Android cambia il colore del pulsante di azione mobile

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.

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

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.

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"

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)));

basta usare,

app:backgroundTint="@color/colorPrimary"

non usare,

android:backgroundTint="@color/colorPrimary"

Il FAB è colorato in base al tuo colorAccent.

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

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

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>

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!

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"     

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.

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.

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

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>

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>

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

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

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!

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));

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

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

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

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>

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"

a Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)