Comment définir l'opacité (Alpha) pour la vue dans Android


211

J'ai un bouton comme ci-dessous:

<Button 
     android:text="Submit" 
     android:id="@+id/Button01" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content">
</Button>

Dans mon onCreate()événement, j'appelle Button01 comme ceci:

setContentView(R.layout.main);

View Button01 = this.findViewById(R.id.Button01);
Button01.setOnClickListener(this);

Il y a un fond dans l'application, et je veux définir une opacité sur ce bouton d'envoi. Comment définir une opacité pour cette vue? Est-ce quelque chose que je peux définir du côté java, ou puis-je définir dans le fichier main.xml?

Du côté java, j'ai essayé Button01.mutate().SetAlpha(100), mais cela m'a donné une erreur.

Réponses:


64

Je viens de trouver votre question tout en ayant le même problème avec un TextView. J'ai pu le résoudre en étendant TextView et en remplaçant onSetAlpha. Vous pourriez peut-être essayer quelque chose de similaire avec votre bouton:

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

public class AlphaTextView extends TextView {

  public AlphaTextView(Context context) {
    super(context);
  }

  public AlphaTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public AlphaTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  public boolean onSetAlpha(int alpha) {
    setTextColor(getTextColors().withAlpha(alpha));
    setHintTextColor(getHintTextColors().withAlpha(alpha));
    setLinkTextColor(getLinkTextColors().withAlpha(alpha));
    return true;
  }
}

12
Merci, cela m'a aussi aidé. Cependant, il est ridicule qu'un TextView et un ImageView aient différentes façons de définir l'alpha.
Geraldo Nascimento

Cela m'a également aidé à appliquer un effet de clic sur la vue de l'image sans deuxième ressource. Merci !!
skygeek

568

Je suis étonné par les réponses BEAUCOUP plus compliquées de tout le monde .

XML

Vous pouvez très simplement définir l'alpha dans la définition de couleur du bouton (ou de toute autre vue) dans votre xml:

android:color="#66FF0000"    // Partially transparent red

Dans l'exemple ci-dessus, la couleur serait un rouge partiellement transparent.

Lors de la définition de la couleur d'une vue, le format peut être soit #RRGGBBou #AARRGGBB, AAsoit la valeur alpha hexadécimale. FFserait totalement opaque et 00totalement transparent.

Dynamiquement

Si vous devez modifier dynamiquement l'opacité de votre code, utilisez

myButton.getBackground().setAlpha(128);  // 50% transparent

Où l'INT va de 0(entièrement transparent) à 255(entièrement opaque).


18
Ce n'est toujours pas la solution si vous avez un composé tirable
Michał K

6
Définir la moitié de la couleur verte transparente de la vue: <RelativeLayout android: background = "# 8700FF00" />
Jonny

2
La vue n'a pas d' android:colorattribut.
Ronnie

6
@moshersan Vous pouvez définir la couleur dans la propriété android: background lui-même!
Dheeraj Bhaskar

1
C'est l' backgroundopacité incorrecte n'est pas l' viewopacité. Pas équivalent dans de nombreux cas d'utilisation
Jocky Doe

215

Je suppose que vous avez peut-être déjà trouvé la réponse, mais sinon (et pour les autres développeurs), vous pouvez le faire comme ceci:

btnMybutton.getBackground().setAlpha(45);

Ici, j'ai défini l'opacité à 45. Vous pouvez essentiellement la définir entre 0 (entièrement transparent) et 255 (complètement opaque)


5
Ceci est uniquement disponible sur API 11+ developer.android.com/reference/android/view/…
Graeme

8
@Graeme que vous avez lié à la méthode setAlpha sur la classe View, mais la publication utilise setAlpha sur la classe Drawable. La méthode getBackground renvoie un Drawable. Cette méthode provient de l'API niveau 1. developer.android.com/reference/android/graphics/drawable/…
Geekygecko

Oh intéressant! Je n'ai pas vu ça. Cela signifierait-il que le texte était entièrement visible même si l'arrière-plan était défini sur transparent.
Graeme

-1 cela ne fonctionne pas dans mon cas où mon arrière-plan dessinable est un sélecteur.
Mike S

3
cela fonctionne très bien mais avec un seul effet secondaire: j'ai de nombreux boutons partageant le même arrière-plan et ils deviennent tous transparents! :(
Mark

66

Je vous suggère de créer une couleur ARGB personnalisée dans votre fichier colors.xml, telle que:

<resources>
<color name="translucent_black">#80000000</color>
</resources>

puis définissez l'arrière-plan de votre bouton sur cette couleur:

android:background="@android:color/translucent_black"

Une autre chose que vous pouvez faire si vous voulez jouer avec la forme du bouton est de créer une ressource dessinable de forme où vous définissez les propriétés à quoi le bouton devrait ressembler:

fichier: res / drawable / round_corner_box.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#80000000"
        android:endColor="#80FFFFFF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

Ensuite, utilisez-le comme arrière-plan du bouton:

    android:background="@drawable/rounded_corner_box"

6
Si vous avez du mal à passer de 40% d'opacité à une valeur hexadécimale, vous pouvez utiliser la recherche google "40% de 255 à hex" donne la valeur hexadécimale à 40%
scottyab

54

Selon la vue des documents Android, alpha est une valeur comprise entre 0 et 1. Donc, pour le définir, utilisez quelque chose comme ceci:

View v;
v.setAlpha(.5f);

C'est ce qui ne fonctionnait que pour moi pour la vue entière ... J'ai essayé l'élément listview, qui a également plusieurs vues textuelles. cette ligne unique a permis de mettre alpha en vue et ses enfants. Merci @ cange1
Alyas

La seule chose qui a fonctionné pour moi aussi. Je sais que c'est vieux, mais merci @ cange1
masoftheund

50

Beaucoup plus facile à partir de ce qui précède. L'attribut alpha par défaut est là pour le bouton

android:alpha="0.5"

La plage est comprise entre 0 pour une transparence totale et 1 pour une opacité totale.


C'est exactement ce que je cherchais, génial, testé sur l'API 21
Fernando Torres

Réponse parfaite !!
Harry .Naeem

18
android:background="@android:color/transparent"

Ce qui précède est quelque chose que je sais ... Je pense que la création d'une classe de boutons personnalisée est la meilleure idée

API Level 11
Récemment, je suis tombé sur cet attribut android: alpha xml qui prend une valeur entre 0 et 1. La méthode correspondante est setAlpha (float) .


Salut Josnidhin. Merci pour votre réponse. Mais cela rend tout le bouton complètement transparent. Ce que je cherche, c'est de mettre une certaine opacité (peut-être via une valeur alpha) sur le bouton.
ncakmak

C'est un flottant, vous pouvez donc utiliser des valeurs ENTRE 0 et 1, 0,5 par exemple.
StackOverflowed

@StackOverflowed - je crois que ncakmak était la première solution. définir @android:color/transparentcomme arrière-plan rendra la vue complètement transparente. La @android:alphapartie semble être un addendum.
katzenhut

17

Bien que ce btnMybutton.getBackground().setAlpha(45);soit une bonne idée, il suffit d'appliquer l'alpha à l'arrière-plan et non à la vue entière.

Si vous souhaitez appliquer alpha pour afficher l'utilisation à la btnMybutton.setAlpha(0.30f);place. Cela applique l'opacité à la vue. Il accepte une valeur comprise entre 0 et 1.

Doc dit:

Définit l'opacité de la vue. Il s'agit d'une valeur de 0 à 1, où 0 signifie que la vue est complètement transparente et 1 signifie que la vue est complètement opaque. Si cette vue remplace onSetAlpha (int) pour renvoyer true, cette vue est responsable de l'application de l'opacité elle-même. Sinon, appeler cette méthode équivaut à appeler setLayerType (int, android.graphics.Paint) et à définir une couche matérielle. Notez que définir alpha sur une valeur translucide (0 <alpha <1) peut avoir des implications sur les performances. Il est généralement préférable d'utiliser la propriété alpha avec parcimonie et transitoire, comme dans le cas des animations de fondu.


7

J'ai rencontré ce problème avec ICS / JB car les boutons par défaut du thème Holo sont constitués d'images légèrement transparentes. Pour un fond, cela est particulièrement visible.

Pain d'épice vs ICS +:

pain d'épice ICS

Copier sur tous les états et images dessinables pour chaque résolution et rendre les images transparentes solides est une douleur, j'ai donc opté pour une solution plus sale: enveloppez le bouton dans un support qui a un fond blanc. Voici un dessin XML brut (ButtonHolder) qui fait exactement cela:

Votre fichier XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              style="@style/Content">
  <RelativeLayout style="@style/ButtonHolder">
      <Button android:id="@+id/myButton"
              style="@style/Button"
              android:text="@string/proceed"/>
    </RelativeLayout>
</LinearLayout>

ButtonHolder.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="@color/white"/>
    </shape>
  </item>

</layer-list>

styles.xml

.
.
.      
  <style name="ButtonHolder">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:background">@drawable/buttonholder</item>
  </style>

  <style name="Button" parent="@android:style/Widget.Button">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:textStyle">bold</item>
  </style>
.
.
.

Cependant, cela entraîne une bordure blanche car les images du bouton Holo incluent des marges pour tenir compte de l'espace pressé:

Trop de blanc Trop de blanc pressé

La solution consiste donc à donner au fond blanc une marge (4dp travaillé pour moi) et des coins arrondis (2dp) pour masquer complètement le blanc tout en rendant le bouton solide:

ButtonHolder.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  <item>
    <shape android:shape="rectangle">
      <solid android:color="@android:color/transparent"/>
    </shape>
  </item>

  <item android:top="4dp" android:bottom="4dp" android:left="4dp" android:right="4dp">
    <shape android:shape="rectangle">
      <solid android:color="@color/white"/>
      <corners android:radius="2dp" />
    </shape>
  </item>

</layer-list>

Le résultat final ressemble à ceci:

Pas de blanc Pas de blanc pressé

Vous devez cibler ce style pour v14 +, et l'ajuster ou l'exclure pour Gingerbread / Honeycomb car leurs tailles d'image de bouton natives sont différentes des ICS et JB (par exemple, ce style exact derrière un bouton Gingerbread entraîne un petit peu de blanc sous le bouton).


7

Pour une vue, vous pouvez définir l'opacité de la manière suivante.

view_name.setAlpha(float_value);

La propriété view.setAlpha(int)est obsolète pour la version d'API supérieure à 11. Désormais, une propriété similaire .setAlpha(0.5f)est utilisée.


6

Pour l'API <11 pour la couleur textView, j'ai fait ce qui suit:

int textViewColor = textView.getTextColors().getDefaultColor(); 
textView.setTextColor(Color.argb(128, Color.red(textViewColor), Color.green(textViewColor), Color.blue(textViewColor))); //50% transparent

Un peu encombrant, mais bon, ça marche :-)


1

Je sais que cela a déjà un tas de réponses, mais j'ai trouvé que pour les boutons, il est simplement plus facile de créer vos propres sélecteurs .xml et de le mettre à l'arrière-plan dudit bouton. De cette façon, vous pouvez également changer son état lorsqu'il est enfoncé ou activé, etc. Voici un extrait rapide de celui que j'utilise. Si vous souhaitez ajouter une transparence à l'une des couleurs, ajoutez une première valeur hexadécimale (#XXcccccc). (XX == "alpha de couleur")

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#70c656" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#70c656"
                android:endColor="#53933f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.