Cómo hacer que un fondo sea 20% transparente en Android

Respuestas:

1038

Haz que el color tenga 80% en el canal alfa. Por ejemplo, para uso en rojo #CCFF0000:

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

En el ejemplo, CCes el número hexadecimal para 255 * 0.8 = 204. Tenga en cuenta que los dos primeros dígitos hexadecimales son para el canal alfa. El formato es #AARRGGBB, donde AAestá el canal alfa, RRes el canal rojo, GGes el canal verde y BBes el canal azul.

Supongo que 20% transparente significa 80% opaco. Si quisiste decir lo contrario, en lugar de CCusar 33cuál es el hexadecimal para 255 * 0.2 = 51.

Para calcular el valor adecuado para un valor de transparencia alfa, puede seguir este procedimiento:

  1. Dado un porcentaje de transparencia, por ejemplo 20%, sabe que el valor del porcentaje opaco es 80% (esto es 100-20=80)
  2. El rango para el canal alfa es de 8 bits ( 2^8=256), lo que significa que el rango va de 0 a 255.
  3. Proyecte el porcentaje opaco en el rango alfa, es decir, multiplique el rango (255) por el porcentaje. En este ejemplo 255 * 0.8 = 204. Redondea al entero más cercano si es necesario.
  4. Convierta el valor obtenido en 3., que está en la base 10, a hexadecimal (base 16). Puedes usar Google para esta o cualquier calculadora. Usando Google, escriba "204 a hexa" y le dará el valor hexadecimal. En este caso lo es 0xCC.
  5. Anteponga el valor obtenido en 4. al color deseado. Por ejemplo, para rojo, que es FF0000, tendrás CCFF0000.

Puedes echar un vistazo a la documentación de Android para ver los colores .

— aromero
fuente
Para color blanco con transparencia, según la pregunta, use android:background="#CCFFFFFF".
— Gotwo 01 de
¿Cómo aplicar esta regla para un fondo con imagen?
— user1090751
1517

Use el siguiente código para negro:

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

Ahora si quiero usar opacidad, entonces puedes usar el siguiente código: 

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

Y abajo para el código de opacidad: y todos los niveles de opacidad aquí

Valores de opacidad hexadecimal

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 siempre olvida qué código para la transparencia, entonces debe tener que ver el siguiente enlace y no preocuparse por recordar nada sobre el código transparente:

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

textviewHeader.setTextColor(Color.parseColor(ColorTransparentUtils.transparentColor(R.color.border_color,10)));
— duggu
fuente
3
al ver esto, utilicé # 99ffffff y funcionó bien para mí, gracias
— nawaab saab
¿Cómo aplicar esta regla para un fondo con imagen?
— user1090751
149

Puede administrar la opacidad del color cambiando los primeros 2 caracteres en la definición del color:

# 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
fuente
1
¿Qué agrega esto a las respuestas existentes?
— Code-Apprentice el
66
@ Code-Apprentice Supongo que esta respuesta es útil cuando necesita más transparencia de grano fino como 87% o 54%, como las mencionadas en material.google.com/style/color.html#color-color-schemes
— Bruce
55
Sí, ayer tuve la necesidad de administrar un alfa del 13% y decidí agregar mi resultado de búsqueda a este útil hilo.
— carlol
¿Qué sucede si quisiera hacer un LinearLayout completo transparente sin ningún color?
— Si8
1
Todas las vistas son transparentes de forma predeterminada, puede usar programáticamente mLinearLayout.setBackgroundColor (Color.TRANSPARENT); o android: background = "@ android: color / transparent" en su xml si tiene que forzarlo por alguna razón (obviamente, este color no es heredado por las vistas secundarias)
— carlol
106

Use un color con un valor alfa como #33------y configúrelo como fondo de su editText usando el atributo XML android:background=" ".

  1. 0% (transparente) -> # 00 en hexadecimal
  2. 20% -> # 33
  3. 50% -> # 80
  4. 75% -> # C0
  5. 100% (opaco) -> #FF

255 * 0.2 = 51 → en hex 33

— K_Anas
fuente
91

Puedes intentar hacer algo como:

textView.getBackground().setAlpha(51);

Aquí puede establecer la opacidad entre 0 (totalmente transparente) a 255 (completamente opaco). El 51 es exactamente el 20% que desea.

— yugidroid
fuente
17
@koti, porque tu textViewvariable es null.
— yugidroid
Buena solución elegante. Puedo aplicar esto a un fondo de elemento de lista cuando lo estoy seleccionando, así que obtengo algo de color, pero no compite con el texto del elemento. ¡Muy bien, gracias!
— Gene Bo
setAlpha (int) está en desuso a favor de setAlpha (float) donde 0 es completamente transparente y 1 es completamente opaco myImage.setAlpha (0.5f);
— polmabri
@polmabri, en realidad no. myImage.setAlpha(0.5f);aplica el alfa a la Vista en sí, pero lo que muestro en mi respuesta se aplica al fondo dibujable de la Vista.
— yugidroid
¡Esto puede causar errores gráficos! Usar con precaución y muchas pruebas.
— Michael
74

En Android Studio hay una herramienta integrada para ajustar el color y el valor alfa / opacidad :

Android Ajustar la opacidad del color

— Jayakrishnan PM
fuente
32

Ver captura de pantalla

He tomado tres vistas. En la primera vista configuré el color completo (sin alfa), en la segunda configuré la mitad (0.5 alfa) y en la tercera configuré el color claro (0.2 alfa).

Puede configurar cualquier color y obtener color con alfa utilizando el siguiente código:

Archivo 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>

Archivo 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;
    }
}

Versión 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))
}

Hecho

— Hiren Patel
fuente
31

También podemos hacer transparentes en el camino.

Código de color blanco - FFFFFF

20% blanco - # 33 FFFFFF

20% - 33

70% blanco - # B3 FFFFFF

70% - B3

Todo el valor hexadecimal de 100% a 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
fuente
1
Respuesta asombrosa Seguid así.
— Tarun
22

Todos los valores hexadecimales de 100% a 0% alfa. Puede establecer cualquier color con los valores alfa mencionados a continuación. por ejemplo, #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
fuente
19

Ahora, Android Studio 3.3 y versiones posteriores proporcionan una función incorporada para cambiar un valor Alfa del color,

Simplemente haga clic en un color en el editor de estudio de Android y proporcione el valor Alpha enpercentage .

Para más información ver la imagen de abajo

ingrese la descripción de la imagen aquí

— Chandan Sharma
fuente
18

Hay un valor XML alphaque toma valores dobles.

Desde API 11+el rango es de 0fa 1f(inclusive), 0fsiendo transparente y 1fser opaca:

  • android:alpha="0.0" eso es invisible

  • android:alpha="0.5" transparente

  • android:alpha="1.0" totalmente visible

Asi es como funciona.

— eldivino87
fuente
1
eso hará que todo el diseño sea semitransparente, incluido su contenido
— jack_the_beast
7 
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:alpha="0.9"
        />

Alpha varía entre 0 (transparente) y 1 (opaco) en Android API 11+

— Naramsim
fuente
3

Ver popularidad debajo del textoVer usando esto 

     android:alpha="0.38"

ingrese la descripción de la imagen aquí

XML

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

Dinamicamente

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

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

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
fuente
3

En Kotlin, puedes usar alfa usando esto,

   //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
    }

El resultado es como en esta captura de pantalla.20% transparente

Espero que esto te ayude. Gracias

— Rahul Kushwaha
fuente
1

Lo sé, esa es una pregunta muy antigua.

Si desea usar un valor de color, también puede usar la versión corta de ese con #ARGB. ¿Dónde Aestá el valor para el canal alfa?

En el caso de un color blanco, existen los siguientes valores de transparencia:

#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%

Entonces puede TextViewagregar la siguiente línea para una transparencia del 20%:

<TextView
    android:background="#CFFF"
    ... />
— gotwo
fuente
0

Aquí hay una solución programática de la respuesta de @Aromero para calcular el valor hexadecimal para el canal alfa. :)

 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
fuente
3
La pregunta ha sido etiquetada para Android. Este código no es compatible con Android.
— Pawan
0

Prueba este código :)

Es un código hexadecimal completamente transparente - "# 00000000"

— Agilanbu
fuente
0

si quieres que el color sea 50% transparente en kotlin,

val percentage = 50f/100 //50%
ColorUtils.setAlphaComponent(resources.getColor(R.color.whatEverColor), (percentage * 255).toInt())
— Jetwiz
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.