Comment rendre un fond transparent à 20% sur Android

619

Comment puis-je rendre l'arrière-plan d' Textviewenviron 20% transparent (pas complètement transparent), où il y a une couleur à l'arrière-plan (c'est-à-dire blanc)?

android transparency textview

— Adham
source

Doit regarder ce stackoverflow.com/questions/15852122/hex-transparency-in-colors

— Arun Badole

1038

Rendre la couleur à 80% dans le canal alpha. Par exemple, pour une utilisation en rouge #CCFF0000:

<TextView
   ...
   android:background="#CCFF0000" />

Dans l'exemple, CCest le nombre hexadécimal pour 255 * 0.8 = 204. Notez que les deux premiers chiffres hexadécimaux correspondent au canal alpha. Le format est #AARRGGBB, où AAest le canal alpha, RRle canal rouge, GGle canal vert et BBle canal bleu.

Je suppose que 20% de transparence signifie 80% d'opaque. Si vous vouliez dire le contraire, au lieu d' CCutiliser 33qui est l'hexadécimal pour 255 * 0.2 = 51.

Afin de calculer la valeur appropriée pour une valeur de transparence alpha, vous pouvez suivre cette procédure:

Étant donné un pourcentage de transparence, par exemple 20%, vous savez que la valeur de pourcentage opaque est de 80% (c'est 100-20=80)
La plage du canal alpha est de 8 bits ( 2^8=256), ce qui signifie que la plage va de 0 à 255.
Projetez le pourcentage opaque dans la plage alpha, c'est-à-dire multipliez la plage (255) par le pourcentage. Dans cet exemple255 * 0.8 = 204 . Arrondissez à l'entier le plus proche si nécessaire.
Convertissez la valeur obtenue en 3., qui est en base 10, en hexadécimal (base 16). Vous pouvez utiliser Google pour cela ou n'importe quelle calculatrice. En utilisant Google, tapez "204 en hexa" et il vous donnera la valeur hexadécimale. Dans ce cas, il est0xCC .
Ajoutez la valeur obtenue en 4. à la couleur souhaitée. Par exemple, pour le rouge, qui est FF0000, vous aurezCCFF0000 .

Vous pouvez consulter la documentation Android pour les couleurs .

— aromero
source

Pour la couleur blanche avec transparence, selon la question, utilisez android:background="#CCFFFFFF".

— gotwo

Comment appliquer cette règle pour un fond avec image?

— user1090751

1517

Utilisez le code ci-dessous pour le noir:

<color name="black">#000000</color>

Maintenant, si je veux utiliser l'opacité, vous pouvez utiliser le code ci-dessous:

 <color name="black">#99000000</color> <!-- 99 is for alpha and others pairs zero's are for R G B -->

Et ci-dessous pour le code d'opacité: et tous les niveaux d'opacité ici

Valeurs d'opacité hexadécimale

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

Si vous oubliez toujours quel code pour la transparence, vous devez voir le lien ci-dessous et ne vous soucier de rien vous souvenir du code transparent: -

https://github.com/duggu-hcd/TransparentColorCode

textviewHeader.setTextColor(Color.parseColor(ColorTransparentUtils.transparentColor(R.color.border_color,10)));

— duggu
source

3

en voyant cela, j'ai utilisé # 99ffffff et cela a bien fonctionné pour moi, merci

— nawaab saab

Comment appliquer cette règle pour un fond avec image?

— user1090751

149

Vous pouvez gérer l'opacité des couleurs en modifiant les 2 premiers caractères de la définition des couleurs:

# 99 000000

100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8

90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF

80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5

70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C

60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82

50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69

40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F

30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36

20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C

10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00

— carlol
source

1

Qu'est-ce que cela ajoute aux réponses existantes?

— Code-Apprentice

6

@ Code-Apprentice Je suppose que cette réponse est utile lorsque vous avez besoin d'une transparence plus fine comme 87% ou 54%, comme celles mentionnées dans material.google.com/style/color.html#color-color-schemes

— Bruce

5

Oui, hier j'ai eu besoin de gérer un alpha de 13% et j'ai décidé d'ajouter mon résultat de recherche à ce fil de discussion utile.

— carlol

Et si je voulais rendre un LinearLayout complètement transparent sans aucune couleur?

— Si8

1

Toutes les vues sont transparentes par défaut, vous pouvez utiliser par programmation mLinearLayout.setBackgroundColor (Color.TRANSPARENT); ou android: background = "@ android: color / transparent" dans votre xml si vous devez le forcer pour certaines raisons (évidemment cette couleur n'est pas héritée par les vues des enfants)

— carlol

106

Utilisez une couleur avec une valeur alpha comme #33------et définissez-la comme arrière-plan de votre editText à l'aide de l'attribut XML android:background=" ".

0% (transparent) -> # 00 en hex
20% -> # 33
50% -> # 80
75% -> # C0
100% (opaque) -> #FF

255 * 0,2 = 51 → dans l'hex 33

— K_Anas
source

91

Vous pouvez essayer de faire quelque chose comme:

textView.getBackground().setAlpha(51);

Ici, vous pouvez définir l'opacité entre 0 (entièrement transparent) et 255 (complètement opaque). Le 51 est exactement le 20% que vous souhaitez.

— yugidroid
source

17

@koti, car votre textViewvariable l'est null.

— yugidroid

belle solution élégante. Je peux l'appliquer à l'arrière-plan d'un élément de liste lorsque je le sélectionne - donc j'obtiens de la couleur, mais cela ne rivalise pas avec le texte de l'élément .. Très cool, merci!

— Gene Bo

setAlpha (int) est déconseillé au profit de setAlpha (float) où 0 est entièrement transparent et 1 est entièrement opaque myImage.setAlpha (0.5f);

— polmabri

@polmabri, pas vraiment. myImage.setAlpha(0.5f);applique l'alpha à la vue elle-même, mais ce que je montre dans ma réponse est appliqué à l'arrière-plan de la vue.

— yugidroid

Cela peut provoquer des bugs graphiques! À utiliser avec prudence et de nombreux tests.

— Michael

74

Dans Android Studio, il existe un outil intégré pour ajuster la couleur et la valeur alpha / opacité :

— Jayakrishnan PM
source

32

Voir capture d'écran

J'ai pris trois vues. Dans la première vue, j'ai défini la couleur complète (pas d'alpha), sur la deuxième vue, j'ai défini la couleur à moitié (0,5 alpha), et sur la troisième vue, j'ai défini la couleur claire (0,2 alpha).

Vous pouvez définir n'importe quelle couleur et obtenir la couleur avec alpha en utilisant le code ci-dessous:

Fichier activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:gravity = "center"
    android:orientation = "vertical"
    tools:context = "com.example.temp.MainActivity" >

    <View
        android:id = "@+id/fullColorView"
        android:layout_width = "100dip"
        android:layout_height = "100dip" />

    <View
        android:id = "@+id/halfalphaColorView"
        android:layout_width = "100dip"
        android:layout_height = "100dip"
        android:layout_marginTop = "20dip" />

    <View
        android:id = "@+id/alphaColorView"
        android:layout_width = "100dip"
        android:layout_height = "100dip"
        android:layout_marginTop = "20dip" />

</LinearLayout>

Fichier MainActivity.java

public class MainActivity extends Activity {

    private View fullColorView, halfalphaColorView, alphaColorView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fullColorView = (View)findViewById(R.id.fullColorView);
        halfalphaColorView = (View)findViewById(R.id.halfalphaColorView);
        alphaColorView = (View)findViewById(R.id.alphaColorView);

        fullColorView.setBackgroundColor(Color.BLUE);
        halfalphaColorView.setBackgroundColor(getColorWithAlpha(Color.BLUE, 0.5f));
        alphaColorView.setBackgroundColor(getColorWithAlpha(Color.BLUE, 0.2f));
    }


    private int getColorWithAlpha(int color, float ratio) {
        int newColor = 0;
        int alpha = Math.round(Color.alpha(color) * ratio);
        int r = Color.red(color);
        int g = Color.green(color);
        int b = Color.blue(color);
        newColor = Color.argb(alpha, r, g, b);
        return newColor;
    }
}

Version Kotlin:

private fun getColorWithAlpha(color: Int, ratio: Float): Int {
  return Color.argb(Math.round(Color.alpha(color) * ratio), Color.red(color), Color.green(color), Color.blue(color))
}

Terminé

— Hiren Patel
source

31

Nous pouvons également rendre la transparence transparente.

Code couleur blanc - FFFFFF

20% blanc - # 33 FFFFFF

20% - 33

70% blanc - # B3 FFFFFF

70% - B3

Toutes les valeurs hexadécimales de 100% à 0%

100% - FF, 99% - FC, 98% - FA, 97% - F7, 96% - F5, 95% - F2, 94% - F0, 93% - ED, 92% - EB, 91% - E8, 90% - E6, 89% - E3, 88% - E0, 87% - DE, 86% - DB, 85% - D9, 84% - D6, 83% - D4, 82% - D1, 81% - CF, 80% - CC, 79% - C9, 78% - C7, 77% - C4, 76% - C2, 75% - BF, 74% - BD, 73% - BA, 72% - B8, 71% - B5, 70% - B3 , 69% - B0 68% - AD 67% - AB, 66% - A8, 65% - A6, 64% - A3, 63% - A1, 62% - 9E, 61% - 9C, 60% - 99, 59% - 96, 58% - 94, 57% - 91, 56% - 8F, 55% - 8C, 54% - 8A, 53% - 87, 52% - 85, 51% - 82, 50% - 80, 49% - 7D, 48% - 7A, 47% - 78, 46% - 75, 45% - 73, 44% - 70, 43% - 6E, 42% - 6B, 41% - 69, 40% - 66, 39% - 63, 38% - 61, 37% - 5E, 36% - 5C, 35% - 59, 34% - 57, 33% - 54, 32% - 52, 31% - 4F, 30% - 4D, 29% - 4A, 28% - 47, 27% - 45, 26% - 42, 25% - 40, 24% - 3D, 23% - 3B, 22% - 38, 21% - 36, 20% - 33 , 19% - 30, 18% - 2E, 17% - 2B, 16% - 29, 15% - 26, 14% - 24, 13% - 21, 12% - 1F, 11% - 1C, 10% - 1A, 9% - 17, 8% - 14, 7% - 12, 6% - 0F, 5% - 0D, 4% - 0A, 3% - 08, 2% - 05, 1% - 03, 0% - 00

— Ashish Kumar
source

1

Réponse incroyable. Continuez.

— Tarun

22

Toutes les valeurs hexadécimales de 100% à 0% alpha, vous pouvez définir n'importe quelle couleur avec les valeurs alpha mentionnées ci-dessous. par exemple #FAFFFFFF (ARRGGBB)

100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00

— Anant Shah
source

19

Maintenant, Android Studio 3.3 et versions ultérieures offrent une fonctionnalité intégrée pour modifier la valeur alpha de la couleur,

Cliquez simplement sur une couleur dans l'éditeur de studio Android et indiquez la valeur Alphapercentage .

Pour plus d'informations, voir l'image ci-dessous

— Chandan Sharma
source

18

Il existe une valeur XML alphaqui prend des valeurs doubles.

Étant donné que API 11+la plage va de 0fà 1f(inclus), 0fétant transparente et 1fopaque:

android:alpha="0.0" c'est invisible
android:alpha="0.5" voir à travers
android:alpha="1.0" entièrement visible

Voilà comment ça marche.

— eldivino87
source

1

qui rendra la mise en page semi-transparente, y compris son contenu

— jack_the_beast

7

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:alpha="0.9"
        />

Alpha varie entre 0 (transparent) et 1 (opaque) dans Android API 11+

— Naramsim
source

3

Voir la popularité sous le texte

     android:alpha="0.38"

XML

android:color="#3983BE00"    // Partially transparent sky blue

Dynamiquement

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

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

Where the INT ranges from 0 (fully transparent) to 255 (fully opaque).


  <TextView
            style="@style/TextAppearance.AppCompat.Caption"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:alpha="0.38"
            android:gravity="start"
            android:textStyle="bold"
            tools:text="1994|EN" />

android: alpha = "0,38"

Text View alpha property set 0.38 to your textView visibility is faid

— Keshav Gera
source

3

Dans Kotlin, vous pouvez utiliser l'alpha comme ceci,

   //Click on On.//
    view.rel_on.setOnClickListener{
        view.rel_off.alpha= 0.2F
        view.rel_on.alpha= 1F

    }

    //Click on Off.//
    view.rel_off.setOnClickListener {
        view.rel_on.alpha= 0.2F
        view.rel_off.alpha= 1F
    }

Le résultat est comme dans ces captures d'écran.

J'espère que cela vous aidera.Merci

— Rahul Kushwaha
source

1

Je sais, c'est une très vieille question.

Si vous souhaitez utiliser une valeur de couleur, vous pouvez également utiliser la version courte de celle-ci avec #ARGB. Où Aest la valeur du canal alpha.

En cas de couleur blanche, il existe les valeurs de transparence suivantes:

#FFFF  -     0%
#EFFF  -   6,7%
#DFFF  -  13,3%
#CFFF  -  20,0%
#BFFF  -  26,7%
#AFFF  -  33,3%
#9FFF  -  40,0%
#FFF8  -  46,7%
#7FFF  -  53,3%
#6FFF  -  60,0%
#5FFF  -  66,7%
#4FFF  -  73,3%
#3FFF  -  80,0%
#2FFF  -  86,7%
#1FFF  -  93,3%
#0FFF  - 100,0%

Vous pouvez donc TextViewajouter la ligne suivante pour une transparence de 20%:

<TextView
    android:background="#CFFF"
    ... />

— gotwo
source

0

Voici une solution programmatique de la réponse de @Aromero pour calculer la valeur hexadécimale du canal alpha. :)

 public static void main(String[] args) throws Exception {
    final Scanner scanner = new Scanner(System.in);
    int transPerc;
    float fPerc;
    System.out.println("Enter the transparency percentage without % symbol:");
    while((transPerc=scanner.nextInt())>=0 && transPerc <=100){
        fPerc = (float) transPerc / 100;
        transPerc = Math.round(255 * fPerc);
        System.out.println("= " + Integer.toHexString(transPerc));
        System.out.print("another one please : ");
    }
    scanner.close();
}

— theapache64
source

3

La question a été balisée pour Android. Ce code ne prend pas en charge Android.

— Pawan

0

Essayez ce code :)

C'est un code hexadécimal entièrement transparent - "# 00000000"

— Agilanbu
source

0

si vous voulez rendre la couleur transparente à 50% en kotlin,

val percentage = 50f/100 //50%
ColorUtils.setAlphaComponent(resources.getColor(R.color.whatEverColor), (percentage * 255).toInt())

— Jetwiz
source