Como tornar um plano de fundo 20% transparente no Android

Respostas:

1038

Faça com que a cor tenha 80% no canal alfa. Por exemplo, para uso em vermelho #CCFF0000:

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

No exemplo, CCé o número hexadecimal para 255 * 0.8 = 204. Observe que os dois primeiros dígitos hexadecimais são para o canal alfa. O formato é #AARRGGBB, onde AAestá o canal alfa, RRé o canal vermelho, GGé o canal verde e BBé o canal azul.

Estou assumindo que 20% transparente significa 80% opaco. Se você quis dizer o contrário, em vez de CCusar 33qual é o hexadecimal para 255 * 0.2 = 51.

Para calcular o valor adequado para um valor de transparência alfa, você pode seguir este procedimento:

  1. Dada uma porcentagem de transparência, por exemplo 20%, você sabe que o valor da porcentagem opaca é 80% (este é 100-20=80)
  2. O intervalo para o canal alfa é de 8 bits ( 2^8=256), significando que o intervalo varia de 0 a 255.
  3. Projete a porcentagem opaca no intervalo alfa, ou seja, multiplique o intervalo (255) pela porcentagem. Neste exemplo 255 * 0.8 = 204. Arredonde para o número inteiro mais próximo, se necessário.
  4. Converta o valor obtido em 3., que está na base 10, em hexadecimal (base 16). Você pode usar o Google para esta ou qualquer outra calculadora. Usando o Google, digite "204 to hexa" e ele fornecerá o valor hexadecimal. Nesse caso é 0xCC.
  5. Anexe o valor obtido em 4. à cor desejada. Por exemplo, para vermelho, ou seja FF0000, você terá CCFF0000.

Você pode dar uma olhada na documentação do Android para obter cores .

— aromero
fonte
Para cor branca com transparência, de acordo com a pergunta, use android:background="#CCFFFFFF".
— gotwo
Como aplicar esta regra a um plano de fundo com imagem?
— user1090751 27/02
1517

Use o código abaixo para preto:

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

Agora, se eu quiser usar opacidade, você pode usar o código abaixo: 

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

E abaixo, para o código de opacidade: e todo o nível de opacidade aqui

Valores de opacidade 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

Se você sempre esquecer o código de transparência, deverá ver o link abaixo e não se preocupe em lembrar-se de algo relacionado ao código transparente: -

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

textviewHeader.setTextColor(Color.parseColor(ColorTransparentUtils.transparentColor(R.color.border_color,10)));
— duggu
fonte
3
vendo isso eu usei # 99ffffff e funcionou muito bem para mim, obrigado
— Nawaab Saab
Como aplicar esta regra a um plano de fundo com imagem?
— user1090751 27/02
149

Você pode gerenciar a opacidade das cores alterando os 2 primeiros caracteres na definição de cores:

# 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
fonte
1
O que isso acrescenta às respostas existentes?
— Code-Apprentice
6
@ Code-Apprentice Acho que essa resposta é útil quando você precisa de uma transparência mais refinada, como 87% ou 54%, como as mencionadas em material.google.com/style/color.html#color-color-schemes
— Bruce
5
Sim, ontem tive a necessidade de gerenciar um alfa de 13% e decidi adicionar meu resultado de pesquisa a este segmento útil.
— Carlol 25/08/16
E se eu quisesse tornar um LinearLayout completamente transparente sem nenhuma cor?
— Si8
1
Todas as exibições são transparentes por padrão; você pode usar programaticamente mLinearLayout.setBackgroundColor (Color.TRANSPARENT); ou android: background = "@ android: cor / transparente" em seu xml se você tem que forçá-lo por algumas razões (obviamente, esta cor não é herdado pelas vistas criança)
— carlol
106

Use uma cor com um valor alfa como #33------e defina-a como plano de fundo do seu editText usando o atributo XML android:background=" ".

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

255 * 0,2 = 51 → em hexadecimal 33

— K_Anas
fonte
91

Você pode tentar fazer algo como:

textView.getBackground().setAlpha(51);

Aqui você pode definir a opacidade entre 0 (totalmente transparente) e 255 (completamente opaco). Os 51 são exatamente os 20% que você deseja.

— yugidroid
fonte
17
@ koti, porque sua textViewvariável é null.
— yugidroid
solução elegante e agradável. Sou capaz de aplicar isso a um plano de fundo de um item da lista ao selecioná-lo - para obter algumas cores, mas ele não compete com o texto do item. Muito legal, obrigado!
— Gene Bo
setAlpha (int) foi descontinuado em favor de setAlpha (float), em que 0 é totalmente transparente e 1 é totalmente opaco myImage.setAlpha (0.5f);
— Polmabri 21/08/16
@polmabri, na verdade não. myImage.setAlpha(0.5f);aplica o alfa ao próprio View, mas o que mostro na minha resposta está sendo aplicado ao drawable de segundo plano do View.
— Yugidroid # 4/16
Isso pode causar erros gráficos! Use com cautela e muitos testes.
— Michael
74

No Android Studio, há uma ferramenta interna para ajustar a cor e o valor de alfa / opacidade :

O Android ajusta a opacidade da cor

— Jayakrishnan PM
fonte
32

Veja a captura de tela

Tomei três visualizações. Na primeira visualização, defino cores completas (sem alfa), na segunda, defino meia (0,5 alfa) e, na terceira, defino cores claras (0,2 alfa).

Você pode definir qualquer cor e obter cores com alfa usando o código abaixo:

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

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

Versão 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))
}

Feito

— Hiren Patel
fonte
31

Também podemos tornar transparentes as coisas desinteressantes.

Código de cor branca - FFFFFF

20% branco - # 33 FFFFFF

20% - 33

70% branco - # B3 FFFFFF

70% - B3

Todo o 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
fonte
1
Resposta incrível. Mantem.
— Tarun
22

Todo o valor hexadecimal de 100% a 0% alfa. Você pode definir qualquer cor com os valores alfa mencionados abaixo. por exemplo, #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
fonte
19

Agora, o Android Studio 3.3 e a versão posterior fornecem um recurso embutido para alterar um valor Alpha da cor,

Basta clicar em uma cor no editor de estúdio Android e fornecer o valor Alpha empercentage .

Para mais informações, veja a imagem abaixo

insira a descrição da imagem aqui

— Chandan Sharma
fonte
18

Há um valor XML alphaque recebe valores duplos.

Desde API 11+o intervalo é de 0faté 1f(inclusive), 0fsendo transparente e 1fsendo opaco:

  • android:alpha="0.0" isso é invisível

  • android:alpha="0.5" transparente

  • android:alpha="1.0" totalmente visível

É assim que funciona.

— eldivino87
fonte
1
que vai fazer todo o layout semi-transparente, incluindo o seu conteúdo
— jack_the_beast
7 
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:alpha="0.9"
        />

Alfa varia entre 0 (transparente) e 1 (opaco) na API Android 11+

— Naramsim
fonte
3

Veja a popularidade abaixo do texto 

     android:alpha="0.38"

insira a descrição da imagem aqui

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

No Kotlin, você pode usar o alfa assim,

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

O resultado é como nas capturas de tela.20% Transparente

Espero que isso ajude você.

— Rahul Kushwaha
fonte
1

Eu sei, essa é uma pergunta muito antiga.

Se você deseja usar um valor de cor, também pode usar a versão curta dele com #ARGB. Onde Aestá o valor para o canal alfa.

No caso de uma cor branca, existem os seguintes valores de transparência:

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

Assim, você pode TextViewadicionar a seguinte linha para obter 20% de transparência:

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

Aqui está uma solução programática da resposta da @Aromero para calcular o valor hexadecimal do 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
fonte
3
A pergunta foi marcada para Android. Este código não suporta Android.
— Pawan
0

Experimente este código :)

É um código hexadecimal totalmente transparente - "# 00000000"

— Agilanbu
fonte
0

se você quiser tornar as cores 50% transparentes no kotlin,

val percentage = 50f/100 //50%
ColorUtils.setAlphaComponent(resources.getColor(R.color.whatEverColor), (percentage * 255).toInt())
— Jetwiz
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.