Android cambia il colore del pulsante di azione mobile


532

Ho cercato di cambiare il colore del pulsante di azione mobile di Material, ma senza successo.

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

Ho provato ad aggiungere:

android:background="@color/mycolor"

o tramite codice:

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

o

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

Ma nessuna delle precedenti ha funzionato. Ho anche provato le soluzioni nella domanda duplicata proposta, ma nessuna di esse funziona; il bottone rimase verde e divenne anche un quadrato.

PS Sarebbe anche bello sapere come aggiungere l'effetto a catena, non ci capisco neanche.



L'effetto a catena non è disponibile sui dispositivi pre-lecca-lecca perché utilizza un nuovo RenderThread .
tachyonflux,

@karaokyo ok ma come lo sto facendo?
Jjang,

27
Google fa un brutto lavoro secondo me per rendere accessibili queste cose
Joop,

Per fare ciò a livello di programmazione e retrocompatibile, consultare stackoverflow.com/questions/30966222/…
Ralph Pina,

Risposte:


1050

Come descritto nella documentazione , per default prende il set di colori in styles.xml attributo colorAccent .

Il colore di sfondo di questa vista viene impostato automaticamente sul coloreAccent del tema. Se si desidera modificarlo in fase di esecuzione, è possibile farlo tramite setBackgroundTintList (ColorStateList).

Se desideri cambiare il colore

  • in XML con l'attributo 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" >
  • nel codice con .setBackgroundTintList (risposta sotto di ywwynm )

Come menzionato @Dantalian nei commenti, se si desidera modificare il colore dell'icona per Design Support Library fino alla v22 (incluso) , è possibile utilizzare

android:tint="@color/white"     

Per Design Support Library dalla v23 per te puoi usare:

app:tint="@color/white"   

Inoltre con le androidXlibrerie è necessario impostare un bordo 0dp nel 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
Questo non funziona in Design Support Library v23 per dispositivi <API 12. Funzionava nella v22, quindi apparentemente hanno rotto qualcosa.
hungryghost,

4
Si noti che se si desidera cambiare anche il colore dell'immagine in bianco, ad esempio, è possibile utilizzare: android: tint = "@ android: color / white"
Dantalian

1
android: tint = "@ color / white" non ha funzionato per me perché non è stato in grado di risolverlo per qualche motivo. android: tint = "# ffffff" Funziona per me però
realappie il

2
Questo perché @ color / white non esiste in colors.xml. usa @android: color / white o crea un colore chiamato white o qualunque cosa ti serva
Dantalian,

227
usa "app: backgroundTint" non "android: backgroundTint"
Vasil Valchev

244

La risposta di Vijet Badigannavar è corretta ma l'utilizzo ColorStateListè di solito complicato e non ci ha detto come farlo. Dato che ci concentriamo spesso sulla modifica Viewdel colore nello stato normale e premuto, aggiungerò ulteriori dettagli:

  1. Se vuoi cambiare FABil colore nello stato normale, puoi semplicemente scrivere

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
  2. Se vuoi cambiare FABil colore nello stato premuto, grazie a Design Support Library 22.2.1 , puoi semplicemente scrivere

    mFab.setRippleColor(your color in int);

    Impostando questo attributo, quando si tiene premuto a lungo FAB, un'increspatura con il colore apparirà nel punto di tocco e si rivelerà in tutta la superficie di FAB. Si noti che non cambierà FABil colore nello stato normale. Sotto API 21 (Lollipop), non c'è alcun effetto a catena ma FABil colore cambierà ancora quando lo premi.

Infine, se si desidera implementare effetti più complessi per gli stati, quindi è necessario approfondire ColorStateList, ecco una domanda SO che ne discute: Come posso creare ColorStateList a livello di codice? .

AGGIORNAMENTO: Grazie per il commento di @ Kaitlyn. Per rimuovere il tratto di FAB usando backgroundTint come colore, puoi impostare il app:borderWidth="0dp"tuo xml.


3
Grazie per questo, non sapevo usare ColorStateList. Tuttavia, il tuo codice lascia il mio FAB con un tratto (contorno) del colore dell'accento del tema. Hai idea di come posso rimuovere quel tratto (o cambiare il suo colore, piuttosto) e avere un FAB in un colore speciale che sembra che quel colore speciale sia il colore dell'accento?
Kaitlyn Hanrahan,

@KaitlynHanrahan Vedi il mio aggiornamento. Grazie per il tuo commento.
ywwynm,

Funziona perfettamente - Lollypop e Kitkat sembrano uguali, anche entrambi hanno quella piccola sfumatura in modo che il FAB si apra sullo stesso colore sullo sfondo (l'ho parzialmente sopra la barra degli strumenti). Grazie mille! È semplice ma non so se l'avrei mai trovato da solo.
Kaitlyn Hanrahan,

C'è un modo come impostare app:borderWidthprogrammaticamente? Grazie
Štarke il

@ Štarke Bene, dopo aver esaminato il codice sorgente di FloatingActionButton, temo che non sia possibile impostarlo in modo programmatico in questo momento poiché non c'è setter per mBorderWidth.
ywwynm,

124

Come Vasil Valchev ha osservato in un commento, è più semplice di quanto sembri, ma c'è una sottile differenza che non ho notato nel mio 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"/>

Si noti che è:

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

e non

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

7
Questo è importante perché si tratta di due cose completamente diverse: android:backgroundTint=""proviene da Api livello 21 e fa parte del Lollipop Material Design e verrà ignorato sotto Lollipop. Inoltre, non cambia FABcompletamente il colore perché non è un colore solido. Devi usare app:quello per farlo funzionare.
creativecreatorormaybenot

1
Grazie, l'utilizzo ha android:colorcausato il crash della mia app e mi stava facendo impazzire! Grazie per aver salvato la mia app e ciò che resta della mia sanità mentale ;-)
Kapenaar

@Kapenaar nessun problema, mi grattavo la testa anche per un po 'prima di accorgermene;)
HenriqueMS

Come funzionerebbe in modo programmatico poiché dal lato Java non c'è differenza come app: e android: nell'XML.
marienke,

@marienke puoi impostarlo con una ColorStatesList, pubblicare una nuova domanda e pubblicare il link qui in modo che io possa rispondervi;)
HenriqueMS

58

se provi a cambiare il colore del FAB usando l'app, c'è qualche problema. la cornice del pulsante ha un colore diverso, quindi cosa devi fare:

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

e nel codice impostare il colore:

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

2
Questo lavoro per colori normali. Se ho dato il colore alfa come # 44000000 il problema del colore della cornice è riproducibile.
Dinesh,

5
getResources.getColor () è obsoleto, considera l'utilizzo di ContextCompat.getColor (contesto, il tuo colore); anziché. Spero che sia d'aiuto
Tinashe Chinyanga,

51

basta usare,

app:backgroundTint="@color/colorPrimary"

non usare,

android:backgroundTint="@color/colorPrimary"

hmmmm questa causa il completamento automatico dello studio android dà il risultato dell'uso android: backgroundTint, questa risposta sarà molto buona
Yudi karma

31

Il FAB è colorato in base al tuo colorAccent.

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

Bene, il colore predefinito non è verde. Dove hai impostato un colore verde?
tachyonflux,

1
Io no. Come vedi, questo XML è l'unico posto in cui ho impostato il layout del pulsante ...
Jjang

Forse dovresti creare un nuovo progetto con solo il FAB e pubblicare il codice per l'intera cosa.
tachyonflux,

3
Wow ... in pratica ti ho appena chiesto di fare la stessa cosa e non eri disposto a farlo. È abbastanza ipocrita da parte tua credere che il tuo codice sia adeguato, ma che la mia aggiunta al tuo codice non sia adeguata. Spetta al richiedente creare un MCVE . Grazie.
Tachyonflux,

2
Non più, basato sull'attributo del tema che ora mappa il pulsante di azione mobile (mi sono verificato) è colorato in colorSecondary ( com.google.android.material: material: 1.1.0-alpha02 )
ievgen

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

Questa è la soluzione più semplice, molto più semplice rispetto all'utilizzo di un disegno personalizzato.
IgorGanapolsky,

16

Altre soluzioni potrebbero funzionare. Questo è l'approccio gorilla da 10 sterline che ha il vantaggio di essere ampiamente applicabile in questo e in casi simili:

styles.xml:

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

il tuo layout xml:

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

Hmm, sembra che dovrebbe funzionare, ma sto ricevendo errori del compilatore nel file di layout String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Forse mi manca un punto con il styles.xml ....
Scott Biggs

@ScottBiggs usa android:theme="@style/AppTheme.FloatingAccentButtonOverlay"ma questa soluzione non funziona in nessun modo per me ...
jpact

Che dire dell'API 16 che non ha atrribute coloarAccent?
Dushyant Suthar,

12

Il documento suggerisce che per impostazione predefinita prende @ color / accent. Ma possiamo sovrascriverlo sul codice usando

fab.setBackgroundTintList(ColorStateList)

Ricorda anche,

La versione minima dell'API per utilizzare questa libreria è 15, quindi è necessario aggiornarla! se non vuoi farlo, devi definire un disegno personalizzato e decorarlo!


funziona, ma poi devo scegliere come target api 21+. se ho come target api 8 non posso chiamare questo metodo.
Jjang,

Includi questa libreria di design che è stata rilasciata da Google "com.android.support:design:22.2.0". Questo può essere utilizzato su dispositivi che sono versioni non-lollipop! Saluti!!
Vijet Badigannavar,

certo che lo so, ma questo è l'errore su questo codice: la chiamata richiede il livello API 21 (il minimo corrente è 8): android.widget.ImageView # setBackgroundTintList
Jjang

La versione minima dell'API per utilizzare questa libreria è 15, quindi è necessario aggiornarla! se non vuoi farlo, devi definire un disegno personalizzato e decorarlo!
Vijet Badigannavar,

Oh, grazie! Non lo sapevo, pensavo fossero le 21 dato che questo è ciò che ha detto l'errore. Pubblica questo come risposta e lo accetterò!
Jjang,

10

Modifica del colore di sfondo del pulsante di azione mobile utilizzando la riga inferiore

app:backgroundTint="@color/blue"

Modifica del colore dell'icona del pulsante di azione mobile

android:tint="@color/white"     

8

Grazie al completamento automatico. Sono stato fortunato dopo alcuni colpi e prove:

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

- oppure - (entrambi sono sostanzialmente la stessa cosa)

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

Questo ha funzionato per me su API versione 17 con la libreria di progettazione 23.1.0.


8

Ho avuto lo stesso problema ed è tutto strappandomi i capelli. Grazie per questo https://stackoverflow.com/a/35697105/5228412

Ciò che possiamo fare..

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

funziona bene per me e auguro ad altri che raggiungeranno qui.


Sebbene ciò possa teoricamente rispondere alla domanda, sarebbe preferibile includere qui le parti essenziali della risposta e fornire il collegamento come riferimento.
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"/>

Nota che aggiungi i colori in res / valori / color.xml e includi l'attributo nel tuo fab

   app:backgroundTint="@color/addedColor"

8

Con il materiale tema le e componenti materiali FloatingActionButton per default prende il colore impostato in styles.xmlattributo colorSecondary.

  • Puoi usare l' app:backgroundTintattributo in xml:
<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>
  • Puoi usare fab.setBackgroundTintList();

  • Puoi personalizzare il tuo stile usando l' <item name="backgroundTint">attributo

  <!--<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 partire dalla versione 1.1.0 dei componenti del materiale è possibile utilizzare il nuovo materialThemeOverlayattributo per sovrascrivere i colori predefiniti solo per alcuni componenti:
  <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>

inserisci qui la descrizione dell'immagine


7

Nuova mappatura degli attributi del tema per il pulsante di azione mobile nel materiale 1.1.0

Nel tema della tua app:

  • Imposta colorSecondary per impostare un colore per lo sfondo di FAB (mappe su backgroundTint)
  • Imposta colorOnSecondary per impostare un colore per l'icona / il testo e il colore dell'ondulazione del FAB (mappe per tingere 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 qualcuno che fornisce soluzioni semplici per i colori di sfondo e di primo piano FAB (icona).
ManuelTS

5

Quando si utilizza il Data Binding è possibile fare qualcosa del genere:

android:backgroundTint="@{item.selected ? @color/selected : @color/unselected}"

Ho fatto un esempio molto semplice


3

l'ho fatto come questo androide: background = "@ color / colorAccent" vado semplicemente alla cartella res quindi faccio clic sui valori della cartella e poi su colors.xml in colors.xml cambio solo il colore di colorAccent e lo chiamo in android: background ed è fatto


2

Il punto che ci manca è che prima di impostare il colore sul pulsante, è importante lavorare sul valore desiderato per questo colore. Quindi puoi andare su valori> colore. Troverai quelli predefiniti, ma puoi anche creare colori copiandoli e incollandoli, cambiando colori e nomi. Quindi ... quando vai a cambiare il colore del pulsante mobile (in activity_main), puoi scegliere quello che hai creato

Esempio - codice su valori> colori con colori predefiniti + altri 3 colori che ho creato:

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

Ora il mio pulsante di azione mobile con il colore che ho creato e chiamato "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"/>

Ha funzionato per me. In bocca al lupo!


1

Se si dispone di un pulsante di azione mobile senza disegni, è possibile modificare la tinta a livello di codice utilizzando:

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

Questa è la soluzione che stavo cercando. Ho avuto un semplice fab con backgrountTint e non sono riuscito a trovare un modo per modificarlo a livello di programmazione fino a quando non l'ho trovato.
Redar

0

aggiungi colori nel file color.xml

aggiungi i colori nel file color.xml e quindi aggiungi questa riga di codice ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));


0

È possibile utilizzare questo codice nel caso si desideri modificare il colore a livello di codice

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

0

uso

app: backgroundTint = "@ color / orange" in


<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

per la progettazione dei materiali, ho appena cambiato il colore del pulsante di azione mobile in questo modo, aggiungi le due righe seguenti nel tuo pulsante di azione mobile xml. E fatto

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

0

a Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.