web-dev-qa-db-fra.com

Comment faire un fond transparent à 20% sur Android

Comment rendre l'arrière-plan d'une Textview à environ 20% transparent (pas totalement transparent), où il y a une couleur dans l'arrière-plan (par exemple, le blanc)?

androidtransparencyandroid-textview
531
Adham

Rendre la couleur ont 80% dans le canal alpha. Par exemple, pour le rouge, utilisez #CCFF0000:

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

Dans cet exemple, CC est le nombre hexadécimal de 255 * 0.8 = 204. Notez que les deux premiers chiffres hexadécimaux sont pour le canal alpha. Le format est #AARRGGBB, où AA est le canal alpha, RR est le canal rouge, GG est le canal vert et BB est le canal bleu.

Je suppose que 20% transparent signifie 80% opaque. Si vous vouliez dire l'inverse, au lieu de CC, utilisez 33, qui est l'hexadécimal de 255 * 0.2 = 51.

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

  1. Avec un pourcentage de transparence, par exemple 20%, vous savez que la valeur de pourcentage opaque est 80% (il s'agit de 100-20=80)
  2. La plage du canal alpha est de 8 bits (2^8=256), ce qui signifie que la plage va de 0 à 255.
  3. Projetez le pourcentage d'opaque dans la plage alpha, c'est-à-dire multipliez la plage (255) par le pourcentage. Dans cet exemple 255 * 0.8 = 204. Arrondis à l'entier le plus proche si nécessaire.
  4. 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 to hexa" et il vous donnera la valeur hexadécimale. Dans ce cas, il s'agit de 0xCC.
  5. Ajoutez la valeur obtenue en 4. à la couleur souhaitée. Par exemple, pour le rouge, qui est FF0000, vous aurez CCFF0000.

Vous pouvez consulter la documentation sur Android pour les couleurs .

948
aromero

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 tout niveau d'opacité ici

Valeurs d'opacité des hexagones

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, alors vous devez voir le lien ci-dessous et ne vous souciez plus de rien retenir du code transparent:

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

textviewHeader.setTextColor(Color.parseColor(ColorTransparentUtils.transparentColor10(R.color.border_color)));
1356
duggu

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

# 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
117
carlol

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

  1. 0% (transparent) -> # 00 en hex
  2. 20% -> # 33
  3. 50% -> n ° 80
  4. 75% -> # C0
  5. 100% (opaque) -> #FF

255 * 0,2 = 51 → en hexagone 33

94
K_Anas

Vous pouvez essayer de faire quelque chose comme:

textView.getBackground().setAlpha(51);

Ici, vous pouvez régler l'opacité entre 0 (totalement transparent) et 255 (complètement opaque). Le 51 correspond exactement aux 20% souhaités.

79
yugidroid

Dans Android Studio, un outil intégré permet de régler la couleur et la valeur alpha/opacité:

 Android Adjust Color Opacity

62
Jayakrishnan PM

See screenshot

J'ai pris trois vues. Dans la première vue, j'ai défini la couleur pleine (sans alpha), dans la deuxième vue, la moitié (0,5 alpha) et, dans la troisième, la couleur claire (0,2 alpha).

Vous pouvez définir n’importe quelle couleur et obtenir une 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é

26
Hiren Patel

Toutes les valeurs hexagonales comprises entre 100% et 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
17
Anant Shah

Il existe une valeur XML alpha qui prend deux valeurs. 

Depuis API 11+, la plage va de 0f à 1f (inclus), 0f étant transparent et 1f étant opaque:

  • Android:alpha="0.0" c'est invisible

  • Android:alpha="0.5" transparent

  • Android:alpha="1.0" pleinement visible

Ça fonctionne comme ça.

16
eldivino87
<TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:alpha="0.9"
        />

Alpha va de 0(transparent) à 1(opaque) dans Android API 11+

6
Naramsim

Nous pouvons rendre transparent de cette façon aussi.

Code de couleur blanche - FFFFFF

70% de blanc - # B3 FFFFFF.

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

6
Ashish Kumar

Now Android Studio 3.3 et les versions ultérieures fournissent une fonctionnalité intégrée permettant de modifier une valeur de Alpha de la couleur,

Il suffit de cliquer sur une couleur dans l'éditeur de studio Android et de fournir la valeur Alpha dans percentage.

Pour plus d'informations, voir ci-dessous image

 enter image description here

3
Chandan Sharma

Voir la popularité ci-dessous textView using this 

     Android:alpha="0.38"

 enter image description here

XML

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

Dynamiquement

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

nom_ tv.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
1
Keshav Gera

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 cette capture d'écran . 20 % Transparent

J'espère que cela vous aidera. Merci

0
Rahul Kushwaha

Essayez ce code :)

C'est un code hexadécimal totalement transparent - "# 00000000"

0
Agilanbu

Voici une solution programmatique tirée 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();
}
0
theapache64