Android mudando a cor do botão de ação flutuante


532

Estou tentando alterar a cor do botão de ação flutuante do material, mas sem sucesso.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp" />

Eu tentei adicionar:

android:background="@color/mycolor"

ou via código:

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.profile_edit_fab);
fab.setBackgroundColor(Color.parseColor("#mycolor"));

ou

fab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#mycolor")));

Mas nenhuma das opções acima funcionou. Eu também tentei as soluções na pergunta duplicada proposta, mas nenhuma delas funciona; o botão permaneceu verde e também se tornou um quadrado.

PS: Também seria bom saber como adicionar efeito cascata, também não conseguia entender isso.



O efeito cascata não está disponível em dispositivos pré-pirulito porque utiliza um novo RenderThread .
Tachyonflux

@karaokyo ok, mas como estou fazendo isso?
Jjang

27
Google faz um mau trabalho de verdade na minha opinião para fazer essas coisas acessível
Joop

Para fazer isso de forma programática e compatível com versões anteriores, consulte stackoverflow.com/questions/30966222/…
Ralph Pina

Respostas:


1050

Conforme descrito na documentação , por padrão, ele leva o conjunto de cores em styles.xml atributo colorAccent .

A cor de plano de fundo dessa exibição é padronizada com o colorAccent do seu tema. Se você desejar alterar isso em tempo de execução, poderá fazê-lo através de setBackgroundTintList (ColorStateList).

Se você deseja mudar a cor

  • em XML com atributo app: backgroundTint
<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" >
  • em código com .setBackgroundTintList (resposta abaixo por ywwynm )

Como @Dantalian mencionado nos comentários, se você deseja alterar a cor do ícone da Design Support Library até a v22 (inclusive) , você pode usar

android:tint="@color/white"     

Para a Design Support Library desde a v23, você pode usar:

app:tint="@color/white"   

Também com androidXbibliotecas, você precisa definir uma borda 0dp no seu layout xml:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" />

24
Isso não funciona na Design Support Library v23 para dispositivos <API 12. Como estava funcionando na v22, eles quebraram algo, aparentemente.
Fome # 6/15

4
Note que se você quiser também alterar a cor para branco, por exemplo, você pode usar: android: matiz = "@ android: cor / branco"
Dantalian

1
android: tint = "@ color / white" não funcionou para mim porque não foi possível resolvê-lo por algum motivo. android: matiz = "# ffffff" Works for me embora
realappie

2
Isso ocorre porque @ color / white não existe no seu colors.xml. use @android: color / white ou crie uma cor chamada white ou o que for necessário
Dantalian

227
use "app: backgroundTint" não "android: backgroundTint"
Vasil Valchev

244

A resposta de Vijet Badigannavar está correta, mas o uso ColorStateListé geralmente complicado e ele não nos disse como fazê-lo. Como geralmente focamos na alteração Viewda cor no estado normal e pressionado, adicionarei mais detalhes:

  1. Se você quiser alterar FABa cor no estado normal, basta escrever

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
  2. Se você quiser alterar FABa cor no estado pressionado, obrigado pela Design Support Library 22.2.1 , basta escrever

    mFab.setRippleColor(your color in int);

    Ao definir esse atributo, quando você pressiona por muito tempo FAB, uma onda com sua cor aparecerá no seu ponto de toque e será revelada em toda a superfície do FAB. Observe que FABa cor não mudará no estado normal. Abaixo da API 21 (pirulito), não há efeito cascata, mas FABa cor ainda muda quando você a pressiona.

Por fim, se você deseja implementar um efeito mais complexo para os estados, deve se aprofundar ColorStateList, aqui está uma pergunta do SO que está discutindo: Como criar ColorStateList programaticamente? .

ATUALIZAÇÃO: Obrigado pelo comentário de @ Kaitlyn. Para remover o traçado do FAB usando backgroundTint como sua cor, você pode definir app:borderWidth="0dp"seu xml.


3
Obrigado por isso, eu não sabia como usar o ColorStateList. No entanto, seu código deixa meu FAB com um traço (contorno) da cor de destaque do tema. Você tem alguma idéia de como posso remover esse traço (ou mudar de cor) e ter um FAB em uma cor especial que se pareça com a cor de destaque?
Kaitlyn Hanrahan

@KaitlynHanrahan Por favor, veja minha atualização. Obrigado por seu comentário.
precisa saber é

Isso funciona perfeitamente - Lollypop e Kitkat têm a mesma aparência, até os dois têm esse pequeno sombreamento, de modo que o FAB aparece na mesma cor de fundo (eu o tenho parcialmente na Barra de Ferramentas). Muito obrigado! É simples, mas não sei se alguma vez teria encontrado isso sozinho.
precisa saber é o seguinte

Existe uma maneira de definir app:borderWidthprogramaticamente? Obrigado
Štarke

@ Štarke Bem, depois de olhar para o código fonte de FloatingActionButton, tenho medo de que você não possa defini-lo programaticamente agora, já que não há nenhum configurador paramBorderWidth .
ywwynm

124

Como Vasil Valchev observou em um comentário, é mais simples do que parece, mas há uma diferença sutil que eu não estava percebendo no meu XML.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp"
    app:backgroundTint="@android:color/white"/>

Observe que é:

app:backgroundTint="@android:color/white"

e não

android:backgroundTint="@android:color/white"

7
Isso é importante porque são duas coisas completamente diferentes: android:backgroundTint=""é do nível 21 da API e faz parte do design de material do Lollipop e será ignorado abaixo do Lollipop. Também não muda FABcompletamente a cor porque não é uma cor sólida. Você tem que usar o app:único para fazê-lo funcionar.
Creativecreatorormaybenot

1
Obrigado, o uso android:colorcausou uma falha no meu aplicativo e isso estava me deixando louco! Obrigado por salvar minha aplicativo e o que sobrou da minha sanidade ;-)
Kapenaar

@Kapenaar nenhum problema, foi coçar a cabeça por um tempo, bem antes de notar;)
HenriqueMS

Como isso funcionaria programaticamente, já que no lado java não há diferença como app: e android: no XML.
Marienke 22/17 /

@marienke você pode configurá-lo com um ColorStatesList, postar uma nova pergunta e postar o link aqui para que eu possa respondê-la;)
HenriqueMS

58

se você tentar alterar a cor do FAB usando o aplicativo, há algum problema. moldura do botão tem cor diferente, então o que você deve fazer:

app:backgroundTint="@android:color/transparent"

e no código defina a cor:

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));

2
Este trabalho para cores normais. Se eu tiver fornecido cores alfa como # 44000000, o problema da cor do quadro é reproduzível.
Dinesh

5
getResources.getColor () foi descontinuado, considere usar ContextCompat.getColor (contexto, sua cor); em vez de. Espero que ajude
Tinashe Chinyanga

51

Apenas use,

app:backgroundTint="@color/colorPrimary"

não use,

android:backgroundTint="@color/colorPrimary"

hmmmm esta causa android studio autocomplete uso resultado give Android: backgroundTint, esta resposta verry boa
Yudi karma

31

O FAB é colorido com base no seu colorAccent.

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>

Bem, a cor padrão não é verde. Onde você definiu uma cor verde?
tachyonflux

1
Eu não. Como você pode ver, este xml é o único lugar que eu configurar o layout do botão ...
Jjang

Talvez você deva criar um novo projeto apenas com a FAB e postar o código para a coisa toda.
tachyonflux

3
Uau ... eu basicamente pedi para você fazer a mesma coisa e você não estava disposto a fazê-lo. É bastante hipócrita da sua parte acreditar que seu código era adequado, mas que minha adição ao seu código não é adequada. Cabe ao solicitante criar um MCVE . Obrigado.
tachyonflux

2
Não mais, com base em Atributo Tema Traçando o botão de ação flutuante agora (eu mesmo verificado) é colorido para colorSecondary ( com.google.android.material: Material: 1.1.0-alpha02 )
Ievgen

26
mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));

Essa é a solução mais fácil, muito mais fácil do que usar um drawable personalizado.
IgorGanapolsky

16

Outras soluções podem funcionar. Esta é a abordagem do gorila de 10 libras que tem a vantagem de ser amplamente aplicável neste e em casos semelhantes:

Styles.xml:

<style name="AppTheme.FloatingAccentButtonOverlay" >
    <item name="colorAccent">@color/colorFloatingActionBarAccent</item>
</style>

seu layout xml:

<android.support.design.widget.FloatingActionButton
       android:theme="AppTheme.FloatingAccentButtonOverlay"
       ...
 </android.support.design.widget.FloatingActionButton>

Hmm, parece que isso deve funcionar, mas estou recebendo erros de compilador no arquivo de layout String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Talvez eu estou faltando um ponto com o styles.xml ....
Scott Biggs

@ScottBiggs usar android:theme="@style/AppTheme.FloatingAccentButtonOverlay", mas isso solutin não funciona para mim de qualquer maneira ...
jpact

E a API 16, que não possui atributo coloarAccent?
Dushyant Suthar

12

O documento sugere que ele use a @ cor / acento por padrão. Mas podemos substituí-lo no código usando

fab.setBackgroundTintList(ColorStateList)

Lembre-se também,

A versão mínima da API para usar esta biblioteca é 15, então você precisa atualizá-la! se você não quiser fazer isso, precisará definir um drawable personalizado e decorá-lo!


funciona, mas então eu tenho que direcionar a API 21+. se eu visar a API 8, não é possível chamar esse método.
Jjang

Apenas inclua esta biblioteca de design lançada pelo google "com.android.support:design:22.2.0". Isso pode ser usado em dispositivos que não são versões de pirulito! Felicidades!!
Vijet Badigannavar

claro que sim, mas isso é o erro neste código: Chamada exige nível API 21 (atual min é de 8): android.widget.ImageView # setBackgroundTintList
Jjang

A versão mínima da API para usar esta biblioteca é 15, então você precisa atualizá-la! se você não quiser fazer isso, precisará definir um drawable personalizado e decorá-lo!
Vijet Badigannavar

Oh obrigado! Eu não sabia, pensei que tinha 21 anos, pois é isso que o erro dizia. Publique isso como resposta e eu aceito!
Jjang

10

Alterando a cor de fundo do botão de ação flutuante usando a linha abaixo

app:backgroundTint="@color/blue"

Alterando a cor do ícone do botão de ação flutuante

android:tint="@color/white"     

8

Graças ao preenchimento automático. Eu tive sorte depois de alguns hits e testes:

    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:backgroundTint="@color/whicheverColorYouLike"

- ou - (ambos são basicamente a mesma coisa)

    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:backgroundTint="@color/whicheverColorYouLike"

Isso funcionou para mim na API Versão 17 com a biblioteca de design 23.1.0.


8

Eu tenho o mesmo problema e está tudo arrebentando meu cabelo. Obrigado por este https://stackoverflow.com/a/35697105/5228412

O que podemos fazer..

 favourite_fab.setImageDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.favourite_selected));

funciona bem para mim e desejo para os outros que chegarão aqui.


Embora isso possa teoricamente responder à pergunta, seria preferível incluir aqui as partes essenciais da resposta e fornecer o link para referência.
Bhargav Rao

8
 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:elevation="6dp"
    app:backgroundTint="@color/colorAccent"
    app:pressedTranslationZ="12dp"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/add"/>

Observe que você adiciona cores em res / values ​​/ color.xml e inclui o atributo no seu fab

   app:backgroundTint="@color/addedColor"

8

Com o material temático e os componentes materiais FloatingActionButton por padrão que leva a cor definida em styles.xmlatributo colorSecondary.

  • Você pode usar o app:backgroundTintatributo em xml:
<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>
  • Você pode usar fab.setBackgroundTintList();

  • Você pode personalizar seu estilo usando o <item name="backgroundTint">atributo

  <!--<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item> -->
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="backgroundTint">#00f</item>
    <!-- color used by the icon -->
    <item name="tint">@color/...</item>
  </style>
  • a partir da versão 1.1.0 dos componentes do material, é possível usar o novo materialThemeOverlayatributo para substituir as cores padrão apenas para alguns componentes:
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="materialThemeOverlay">@style/MyFabOverlay</item>
  </style>

  <style name="MyFabOverlay">
    <item name="colorSecondary">@color/custom2</item>
    <!-- color used by the icon -->
    <item name="colorOnSecondary">@color/...</item>
  </style>

insira a descrição da imagem aqui


7

Novo mapeamento de atributo de tema para o Botão de ação flutuante no material 1.1.0

No tema do seu aplicativo:

  • Defina colorSecondary para definir uma cor para o plano de fundo da FAB (mapeia para backgroundTint)
  • Defina colorOnSecondary para definir uma cor para o ícone / texto e a cor da ondulação do FAB (mapeia para tonalizar e rippleColor)

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ...whatever else you declare in your app theme.. -->
    <!-- Set colorSecondary to change background of FAB (backgroundTint) -->
    <item name="colorSecondary">@color/colorSecondary</item>
    <!-- Customize colorSecondary to change icon/text of FAB (maps to tint and rippleColor) -->
    <item name="colorOnSecondary">@android:color/white</item>
</style>

Finalmente, alguém que fornece soluções simples para as cores de fundo e primeiro plano (ícone) da FAB.
ManuelTS


3

eu fiz isso como este android: background = "@ color / colorAccent" eu apenas vou para a pasta res, clico nos valores da pasta e, em seguida, em colors.xml em colors.xml Eu mudo a cor do colorAccent e chamo-a no android: background e está feito


2

O ponto que falta é que, antes de definir a cor no botão, é importante trabalhar no valor que você deseja para essa cor. Então você pode ir para valores> cor. Você encontrará as padrão, mas também poderá criar cores copiando e colando, alterando as cores e os nomes. Então ... quando você mudar a cor do botão flutuante (em activity_main), poderá escolher o que você criou

Exemplo - código em valores> cores com cores padrão + mais 3 cores que eu criei:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="corBotaoFoto">#f52411</color>
    <color name="corPar">#8e8f93</color>
    <color name="corImpar">#494848</color>

</resources>

Agora meu botão de ação flutuante com a cor que eu criei e nomeei "corPar":

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_input_add"
        android:tint="#ffffff"
        app:backgroundTint="@color/corPar"/>

Funcionou para mim. Boa sorte!


1

Se você tiver um botão de ação flutuante sem desenho, poderá alterar a tonalidade programaticamente usando:

fab.getBackground().mutate().setTint(ContextCompat.getColor(yourContext, R.color.anyColor));

Essa é a solução que eu estava procurando. Eu tinha um fab simples com o backgrountTint e não consegui encontrar uma maneira de alterá-lo programaticamente até encontrar isso.
Redar 03/04

0

adicionar cores no arquivo color.xml

adicione cores no arquivo color.xml e adicione esta linha de código ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));


0

Você pode usar esse código caso queira alterar a cor programaticamente

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));

0

usar

app: backgroundTint = "@ color / orange" em


<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/id_share_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/share"
        app:backgroundTint="@color/orange"
        app:fabSize="mini"
        app:layout_anchorGravity="end|bottom|center" />



</androidx.coordinatorlayout.widget.CoordinatorLayout>

0

para o design de materiais, alterei a cor do botão de ação flutuante desta forma. Adicione as duas linhas abaixo no seu botão de ação flutuante xml. E feito,

 android:backgroundTint="@color/colorPrimaryDark"
 app:borderWidth="0dp"

0

em Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)
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.