Como definir a opacidade (Alpha) para exibição no Android


211

Eu tenho um botão como no seguinte:

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

No meu onCreate()evento, eu estou chamando Button01 assim:

setContentView(R.layout.main);

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

Há um plano de fundo no aplicativo e desejo definir uma opacidade neste botão de envio. Como posso definir uma opacidade para essa visualização? É algo que posso definir no lado java ou no arquivo main.xml?

No lado do java eu ​​tentei Button01.mutate().SetAlpha(100), mas isso me deu um erro.

Respostas:


64

Acabei de encontrar sua pergunta enquanto estava com o mesmo problema com um TextView. Consegui resolvê-lo, estendendo o TextView e substituindo onSetAlpha. Talvez você possa tentar algo semelhante com o seu botão:

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
Obrigado, isso também me ajudou. No entanto, é ridículo que um TextView e um ImageView tenham maneiras diferentes de definir alfa.
Geraldo Nascimento

Isso também me ajudou a aplicar o efeito de clique na exibição de imagem sem segundo recurso. Thanx !!
skygeek

568

Estou impressionado com as respostas MUITO mais complicadas de todos os outros .

XML

Você pode simplesmente definir o alfa na definição de cores do botão (ou em qualquer outra visualização) no seu xml:

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

No exemplo acima, a cor seria um vermelho parcialmente transparente.

Ao definir a cor de uma visualização, o formato pode ser #RRGGBBou #AARRGGBB, onde AAestá o valor hexadecimal alfa. FFseria totalmente opaco e 00totalmente transparente.

Dinamicamente

Se você precisar alterar dinamicamente a opacidade no seu código, use

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

Onde o INT varia de 0(totalmente transparente) a 255(totalmente opaco).


18
Isso ainda não é a solução se você tem um drawable composto
Michał K

6
Defina a cor verde meio transparente da exibição: <RelativeLayout android: background = "# 8700FF00" />
Jonny

2
A vista não tem android:coloratributo.
22412 Ronnie

6
@moshersan Você pode definir a cor na propriedade android: background em si!
Dheeraj Bhaskar

1
backgroundOpacidade incorreta não é viewopacidade. Não é equivalente em muitos casos de uso
Jocky Doe

215

Eu acho que você já deve ter encontrado a resposta, mas se não (e para outros desenvolvedores), você pode fazê-lo assim:

btnMybutton.getBackground().setAlpha(45);

Aqui eu configurei a opacidade para 45. Você pode basicamente defini-la de qualquer coisa entre 0 (totalmente transparente) a 255 (completamente opaco)


5
Isso está disponível apenas na API 11+ developer.android.com/reference/android/view/…
Graeme

8
@Graeme você vinculou ao método setAlpha na classe View, mas a postagem está usando o setAlpha na classe Drawable. O método getBackground retorna um Drawable. Este método é de Nível API 1. developer.android.com/reference/android/graphics/drawable/...
Geekygecko

Oh interessante! Eu não vi isso. Isso significaria que o texto estava totalmente visível, mesmo que o plano de fundo estivesse definido como transparente.
Graeme

-1 isso não funciona no meu caso, onde meu drawable de segundo plano é um seletor.
Mike S

3
isso funciona muito bem, mas com um efeito colateral: tenho muitos botões compartilhando o mesmo plano de fundo e eles ficam transparentes! :(
Mark

66

O que eu sugiro que você faça é criar uma cor ARGB personalizada em seu arquivo colors.xml, como:

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

defina o plano de fundo do botão para essa cor:

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

Outra coisa que você pode fazer se quiser brincar com a forma do botão é criar um recurso desenhável do Shape, onde você configura as propriedades com a aparência do botão:

arquivo: res / drawable / rounded_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>

Em seguida, use isso como plano de fundo do botão:

    android:background="@drawable/rounded_corner_box"

6
Se você está lutando para converter a partir de 40% de opacidade para um valor hexadecimal que você pode usar o Google Search "40% de 255 em hexadecimal" dá o valor hexadecimal para 40%
scottyab

54

De acordo com os documentos do Android, o alpha é um valor entre 0 e 1. Portanto, para configurá-lo, use algo como isto:

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

Isso é o que só funcionou para mim em toda a exibição ... Tentei o item de exibição de lista, que também possui várias visualizações de texto. essa linha única ajudou a definir o alfa à vista e a seus filhos. Obrigado @ cange1
Alyas

A única coisa que funcionou para mim também. Eu sei que isso é velho, mas obrigado @ cange1
masoftheund 24/01

50

Muito mais fácil do exposto. O atributo alfa padrão existe para o botão

android:alpha="0.5"

O intervalo está entre 0 para total transparência e 1 para total opacidade.


Este é exatamente o que eu estava procurando, impressionante, testado em api 21
Fernando Torres

Resposta perfeita !!
Harry .Naeem 25/01

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

O que foi dito acima é algo que eu sei ... acho que criar uma classe de botão personalizada é a melhor ideia

Nível 11 da API
Recentemente, deparei-me com este atributo android: alpha xml, que assume um valor entre 0 e 1. O método correspondente é setAlpha (float) .


Oi Josnidhin. Obrigado por sua resposta. Mas isso torna todo o botão completamente transparente. O que estou procurando é colocar alguma opacidade (talvez via valor alfa) no botão.
Ncakmak 15/05

É um flutuador, então você pode usar os valores entre 0 e 1, 0,5, por exemplo.
StackOverflowed

@StackOverflowed - acredito que ncakmak significou a primeira solução. definir @android:color/transparentcomo plano de fundo tornará a visualização completamente transparente. A @android:alphaparte - parece ser um adendo.
Katzenhut 18/05

17

Embora btnMybutton.getBackground().setAlpha(45);seja uma boa idéia, basta aplicar alfa ao plano de fundo e não à visualização completa.

Se você deseja aplicar alfa ao modo de exibição, use-o btnMybutton.setAlpha(0.30f);. Isso aplica opacidade ao modo de exibição. Ele aceita um valor entre 0 e 1.

Doc diz:

Define a opacidade da vista. Este é um valor de 0 a 1, em que 0 significa que a visualização é completamente transparente e 1 significa que a visualização é completamente opaca. Se essa visualização substituir onSetAlpha (int) para retornar true, essa visualização será responsável por aplicar a própria opacidade. Caso contrário, chamar esse método é equivalente a chamar setLayerType (int, android.graphics.Paint) e definir uma camada de hardware. Observe que definir alfa como um valor translúcido (0 <alfa <1) pode ter implicações no desempenho. Geralmente, é melhor usar a propriedade alfa com moderação e transitoriamente, como no caso de animações esmaecidas.


7

Eu encontrei esse problema com o ICS / JB porque os botões padrão do tema Holo consistem em imagens ligeiramente transparentes. Para um fundo, isso é especialmente perceptível.

Gingerbread vs. ICS +:

Pão de gengibre ICS

Copiar todos os estados e imagens que podem ser desenhados para cada resolução e tornar as imagens transparentes sólidas é uma dor, por isso optei por uma solução mais suja: enrole o botão em um suporte com fundo branco. Aqui está um drawable XML bruto (ButtonHolder) que faz exatamente isso:

Seu arquivo 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>
.
.
.

No entanto, isso resulta em uma borda branca porque as imagens do botão Holo incluem margens para contabilizar o espaço pressionado:

Muito branco Muito branco pressionado

Portanto, a solução é dar ao fundo branco uma margem (4dp funcionou para mim) e cantos arredondados (2dp) para ocultar completamente o branco e tornar o botão sólido:

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>

O resultado final é assim:

Não branco Sem branco pressionado

Você deve direcionar esse estilo para a v14 + e ajustá-lo ou excluí-lo para o Gingerbread / Honeycomb porque o tamanho da imagem do botão nativo é diferente do ICS e do JB (por exemplo, esse estilo exato atrás de um botão Gingerbread resulta em um pouco de branco abaixo do botão).


7

Para uma visualização, você pode definir a opacidade da seguinte maneira.

view_name.setAlpha(float_value);

A propriedade view.setAlpha(int)foi descontinuada para a versão da API maior que 11. A partir de então, a propriedade like .setAlpha(0.5f)é usada.


6

Para a API <11 para a cor textView, fiz o seguinte:

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

Um pouco complicado, mas ei, ele funciona :-)


1

Sei que isso já tem várias respostas, mas achei que para os botões é mais fácil criar seus próprios seletores .xml e configurá-los para o segundo plano. Dessa forma, você também pode alterar seu estado quando pressionado ou ativado e assim por diante. Aqui está um trecho rápido de um que eu uso. Se você deseja adicionar uma transparência a qualquer uma das cores, adicione um valor hexadecimal inicial (#XXcccccc). (XX == "alfa de cor")

<?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>
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.