Android cambia el color del botón de acción flotante


532

He estado tratando de cambiar el color del botón de acción flotante del material, pero sin éxito.

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

He intentado agregar:

android:background="@color/mycolor"

o mediante código:

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

o

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

Pero ninguno de los anteriores funcionó. También probé las soluciones en la pregunta duplicada propuesta, pero ninguna de ellas funciona; el botón permaneció verde y también se convirtió en un cuadrado.

PD: También sería bueno saber cómo agregar el efecto dominó, tampoco podría entender eso.



El efecto dominó no está disponible en dispositivos pre-piruletas porque utiliza un nuevo RenderThread .
tachyonflux

@karaokyo ok, pero ¿cómo lo estoy haciendo?
Jjang

27
Google hace un mal trabajo en mi opinión para hacer que estas cosas sean accesibles
Joop

Para hacer esto mediante programación y compatible con versiones anteriores, consulte stackoverflow.com/questions/30966222/…
Ralph Pina

Respuestas:


1050

Como se describe en la documentación , por defecto se toma el conjunto de colores en styles.xml atributo colorAccent .

El color de fondo de esta vista por defecto es el colorAccent de su tema. Si desea cambiar esto en tiempo de ejecución, puede hacerlo a través de setBackgroundTintList (ColorStateList).

Si deseas cambiar el color

  • en XML con la aplicación de atributos : 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" >
  • en código con .setBackgroundTintList (respuesta a continuación por ywwynm )

Como @Dantalian mencionó en los comentarios, si desea cambiar el color del icono de Design Support Library hasta v22 (inclusive) , puede usar

android:tint="@color/white"     

Para la Biblioteca de soporte de diseño desde v23 , puede usar:

app:tint="@color/white"   

También con las androidXbibliotecas debe establecer un borde de 0dp en su diseño 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
Esto no funciona en Design Support Library v23 para dispositivos <API 12. Funcionaba en v22, por lo que aparentemente rompieron algo.
hungryghost

44
Tenga en cuenta que si desea cambiar también el color de la imagen a blanco, por ejemplo, puede usar: android: tint = "@ android: color / white"
Dantalian

1
android: tint = "@ color / white" no funcionó para mí porque no pudo resolverlo por alguna razón. Android: tinte = "# ffffff" Obras para mí, sin embargo
realappie

2
Esto se debe a que @ color / white no existe en su colors.xml. use @android: color / white o cree un color llamado blanco o lo que necesite
Dantalian

227
use "app: backgroundTint" no "android: backgroundTint"
Vasil Valchev

244

La respuesta de Vijet Badigannavar es correcta, pero el uso ColorStateListsuele ser complicado y no nos dijo cómo hacerlo. Como a menudo nos enfocamos en cambiar Viewel color en estado normal y prensado, voy a agregar más detalles:

  1. Si desea cambiar FABel color en estado normal, simplemente puede escribir

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
  2. Si desea cambiar FABel color en estado presionado, gracias por Design Support Library 22.2.1 , puede escribir

    mFab.setRippleColor(your color in int);

    Al establecer este atributo, cuando mantienes presionada la tecla FAB, aparecerá una onda con tu color en tu punto de contacto y se mostrará en toda la superficie de FAB. Tenga en cuenta que no cambiará FABel color en estado normal. Debajo de API 21 (Lollipop), no hay efecto dominó, pero FABel color seguirá cambiando cuando lo presione.

Finalmente, si desea implementar un efecto más complejo para los estados, entonces debe profundizar ColorStateList, aquí hay una pregunta SO que lo discute: ¿Cómo creo ColorStateList programáticamente? .

ACTUALIZACIÓN: Gracias por el comentario de @ Kaitlyn. Para eliminar el trazo de FAB usando backgroundTint como su color, puede configurarlo app:borderWidth="0dp"en su xml.


3
Gracias por esto, no sabía cómo usar ColorStateList. Sin embargo, su código deja mi FAB con un trazo (contorno) del color de acento del tema. ¿Tienes alguna idea de cómo puedo eliminar ese trazo (o cambiar su color, más bien) y tener un FAB en un color especial que parece que ese color especial es el color de acento?
Kaitlyn Hanrahan

@KaitlynHanrahan Por favor vea mi actualización. Gracias por tu comentario.
ywwynm

Eso funciona perfecto: Lollypop y Kitkat se ven iguales, incluso ambos tienen ese pequeño sombreado, por lo que el FAB aparece en el mismo color de fondo (lo tengo parcialmente sobre la barra de herramientas). ¡Muchas gracias! Es simple, pero no sé si alguna vez lo habría encontrado por mi cuenta.
Kaitlyn Hanrahan

¿Hay alguna manera de configurar app:borderWidthprogramáticamente? Gracias
Štarke

@ Štarke Bueno, después de mirar el código fuente de FloatingActionButton, me temo que no puedes configurarlo programáticamente en este momento ya que no hay configurador mBorderWidth.
ywwynm

124

Como señaló Vasil Valchev en un comentario, es más simple de lo que parece, pero hay una sutil diferencia que no estaba notando en mi 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"/>

Note que es:

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

y no

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

77
Esto es importante porque son dos cosas completamente diferentes: android:backgroundTint=""es del nivel 21 de Api y es parte del diseño de material de Lollipop y se ignorará debajo de Lollipop. Además, no cambia el FABcolor por completo porque no es un color sólido. Tienes que usar el app:que lo hace funcionar.
creativecreatorormaybenot

1
Gracias, el uso android:colorcausó que mi aplicación se bloqueara, ¡y me estaba volviendo loco! Gracias por guardar mi aplicación y lo que queda de mi cordura ;-)
Kapenaar

@Kapenaar no hay problema, me estaba rascando la cabeza por un tiempo antes de notarlo;)
HenriqueMS

¿Cómo funcionaría esto programáticamente ya que en el lado de Java no hay diferencia como app: y android: en el XML?
marienke

@marienke, puede configurarlo con ColorStatesList, publicar una nueva pregunta y publicar el enlace aquí para que pueda responderla;)
HenriqueMS

58

Si intenta cambiar el color de FAB utilizando la aplicación, hay algún problema. El marco del botón tiene un color diferente, así que lo que debe hacer:

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

y en código establece el color:

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

2
Este trabajo para colores normales. Si le he dado color alfa como # 44000000, el problema del color del marco es reproducible.
Dinesh

55
getResources.getColor () está en desuso, considere usar ContextCompat.getColor (contexto, su color); en lugar. Espero que ayude
Tinashe Chinyanga

51

Solo usa,

app:backgroundTint="@color/colorPrimary"

no use

android:backgroundTint="@color/colorPrimary"

hmmmm esto causa que Android Studio autocomplete dé resultado use android: backgroundTint, esta respuesta muy buena
Yudi karma

31

El FAB está coloreado en función de su colorAccent.

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

Bueno, el color predeterminado no es verde. ¿Dónde pusiste un color verde?
tachyonflux

1
No lo hice. Como puede ver, este xml es el único lugar donde configuré el diseño del botón ...
Jjang

Tal vez deberías crear un nuevo proyecto solo con el FAB y publicar el código para todo.
tachyonflux

3
Wow ... Básicamente te pedí que hicieras lo mismo y no estabas dispuesto a hacerlo. Es bastante hipócrita de su parte creer que su código fue adecuado, pero que mi adición a su código no es adecuada. Le corresponde al autor de la pregunta crear un MCVE . Gracias.
tachyonflux

2
Ya no, según la asignación de atributos del tema, el botón de acción flotante ahora (me verifiqué) está coloreado a color Secundario ( com.google.android.material: material: 1.1.0-alpha02 )
ievgen

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

Esta es la solución más fácil, mucho más fácil que usar un dibujo personalizado.
IgorGanapolsky

16

Otras soluciones pueden funcionar. Este es el enfoque del gorila de 10 libras que tiene la ventaja de ser ampliamente aplicable en este y otros casos similares:

Styles.xml:

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

su diseño xml:

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

Hmm, parece que esto debería funcionar, pero recibo errores de compilación en el archivo de diseño String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Tal vez me estoy perdiendo un punto con los styles.xml ....
Scott Biggs

@ScottBiggs usan android:theme="@style/AppTheme.FloatingAccentButtonOverlay"pero esto solutin no funciona para mí de cualquier manera ...
jpact

¿Qué pasa con API 16 que no tiene coloarAccent atrribute?
Dushyant Suthar

12

El documento sugiere que toma el @ color / acento por defecto. Pero podemos anularlo en el código usando

fab.setBackgroundTintList(ColorStateList)

También recuerda

La versión mínima de API para usar esta biblioteca es 15, por lo que debe actualizarla. si no quieres hacerlo, ¡debes definir un dibujo personalizado y decorarlo!


funciona, pero luego tengo que apuntar a la API 21+. si apunto api 8 no puedo llamar a este método.
Jjang

Solo incluya esta biblioteca de diseño que ha sido lanzada por google "com.android.support:design:22.2.0". ¡Esto se puede usar en dispositivos que no sean versiones de paleta! ¡¡salud!!
Vijet Badigannavar

por supuesto que sí, pero este es el error en este código: la llamada requiere el nivel 21 de API (el mínimo actual es 8): android.widget.ImageView # setBackgroundTintList
Jjang

La versión mínima de API para usar esta biblioteca es 15, por lo que debe actualizarla. si no quieres hacerlo, ¡debes definir un dibujo personalizado y decorarlo!
Vijet Badigannavar

¡Oh gracias! No lo sabía, pensé que era 21 ya que esto es lo que decía el error. ¡Publique esto como respuesta y lo aceptaré!
Jjang

10

Cambiar el color de fondo del botón de acción flotante utilizando la línea de abajo

app:backgroundTint="@color/blue"

Cambio del color del icono del botón de acción flotante

android:tint="@color/white"     

8

Gracias a autocompletar. Tuve suerte después de algunos golpes y pruebas:

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

- o - (ambos son básicamente lo mismo)

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

Esto funcionó para mí en API Versión 17 con la biblioteca de diseño 23.1.0.


8

Tengo el mismo problema y todo me está arrebatando el pelo. Gracias por esto https://stackoverflow.com/a/35697105/5228412

Lo que podemos hacer..

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

funciona bien para mí y deseo que otros lleguen hasta aquí.


Si bien esto puede responder teóricamente la pregunta, sería preferible incluir aquí las partes esenciales de la respuesta y proporcionar el enlace para referencia.
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"/>

Tenga en cuenta que agrega colores en res / values ​​/ color.xml e incluye el atributo en su fab

   app:backgroundTint="@color/addedColor"

8

Con el Tema de material y los componentes de material FloatingActionButton por defecto, toma el color establecido en el styles.xmlatributo colorSecondary.

  • Puede usar el app:backgroundTintatributo en xml:
<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>
  • Puedes usar fab.setBackgroundTintList();

  • Puedes personalizar tu estilo usando el <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 de la versión 1.1.0 de componentes de material, puede usar el nuevo materialThemeOverlayatributo para anular los colores predeterminados solo para algunos 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>

ingrese la descripción de la imagen aquí


7

Nuevo mapeo de atributos del tema para el botón de acción flotante en el material 1.1.0

En el tema de tu aplicación:

  • Establezca colorSecondary para establecer un color para el fondo de FAB (se asigna a backgroundTint)
  • Establezca colorOnSecondary para establecer un color para el icono / texto y el color ondulado de FAB (se asigna a tint y 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, alguien que proporciona soluciones simples para los colores de fondo y de primer plano (íconos) de FAB.
ManuelTS


3

lo hice así android: background = "@ color / colorAccent" solo voy a la carpeta res y luego hago clic en los valores de la carpeta y luego en colors.xml en colors.xml Simplemente cambio el color de colorAccent y lo llamo en android: background y esta hecho


2

El punto que nos falta es que antes de establecer el color en el botón, es importante trabajar en el valor que desea para este color. Entonces puedes ir a valores> color. Encontrará los predeterminados, pero también puede crear colores copiándolos y pegándolos, cambiando los colores y los nombres. Entonces ... cuando vaya a cambiar el color del botón flotante (en activity_main), puede elegir el que ha creado

Ejemplo: código en valores> colores con colores predeterminados + 3 colores más que he creado:

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

Ahora mi botón de acción flotante con el color que he creado y llamado "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"/>

Funcionó para mi. ¡Buena suerte!


1

Si tiene un botón de acción flotante sin dibujo, puede cambiar el tinte mediante programación mediante:

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

Esa es la solución que estaba buscando. Tenía un fab simple con backgrountTint y no pude encontrar una manera de cambiarlo programáticamente hasta que encontré esto.
Redar

0

agregar colores en el archivo color.xml

agregue colores en el archivo color.xml y luego agregue esta línea de código ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));


0

Puede usar este código en caso de que quiera cambiar el color mediante programación

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

0

utilizar

aplicación: backgroundTint = "@ color / orange" en


<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 el diseño de materiales, acabo de cambiar el color del botón de acción flotante de esta manera, agregue las dos líneas a continuación en su botón de acción flotante xml. Y hecho,

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

0

en Kotlin:

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