Android ändert die Farbe der schwebenden Aktionstaste

531

Ich habe versucht, die Farbe der schwebenden Aktionstaste von Material zu ändern, aber ohne Erfolg.

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

Ich habe versucht hinzuzufügen:

android:background="@color/mycolor"

oder per Code:

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

oder

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

Aber keines der oben genannten hat funktioniert. Ich habe auch die Lösungen in der vorgeschlagenen doppelten Frage ausprobiert, aber keine davon funktioniert. Der Knopf blieb grün und wurde auch ein Quadrat.

PS Es wäre auch schön zu wissen, wie man einen Welleneffekt hinzufügt, konnte das auch nicht verstehen.

Jjang
quelle
Der Ripple-Effekt ist bei Pre-Lollipop-Geräten nicht verfügbar, da ein neuer RenderThread verwendet wird .
Tachyonflux
@ Karaokyo ok aber wie mache ich das?
Jjang
27
Google macht meiner Meinung nach einen wirklich schlechten Job, um diese Dinge zugänglich zu machen
Joop
Um dies programmgesteuert und abwärtskompatibel zu tun, siehe stackoverflow.com/questions/30966222/…
Ralph Pina

Antworten:

1049

Wie in der Dokumentation beschrieben , wird standardmäßig die im format.xml- Attribut colorAccent festgelegte Farbe verwendet .

Die Hintergrundfarbe dieser Ansicht ist standardmäßig colorAccent Ihres Themas. Wenn Sie dies zur Laufzeit ändern möchten, können Sie dies über setBackgroundTintList (ColorStateList) tun.

Wenn Sie die Farbe ändern möchten

  • in XML mit Attribut 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" >
  • im Code mit .setBackgroundTintList (Antwort unten von ywwynm )

Wie @Dantalian in den Kommentaren erwähnt, wenn Sie auf das Symbol Farbe für Design Support - Bibliothek ändern möchten bis zu v22 (einschließlich) , können Sie

android:tint="@color/white"     

Für die Design Support Library seit Version 23 können Sie Folgendes verwenden:

app:tint="@color/white"   

Auch bei androidXBibliotheken müssen Sie in Ihrem XML-Layout einen 0-DP-Rahmen festlegen:

<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" />
Marko
quelle
24
Dies funktioniert in Design Support Library v23 für <API 12-Geräte nicht. Es funktionierte in Version 22, also haben sie anscheinend etwas kaputt gemacht.
Hungerghost
4
Beachten Sie, dass Sie, wenn Sie beispielsweise auch die Bildfarbe in Weiß ändern möchten, Folgendes verwenden können: android: tint = "@ android: color / white"
Dantalian
1
android: tint = "@ color / white" hat bei mir nicht funktioniert, weil es aus irgendeinem Grund nicht behoben werden konnte. android: tint = "# ffffff" Funktioniert aber für mich
realappie
2
Dies liegt daran, dass @ color / white in Ihrer color.xml nicht vorhanden ist. Verwenden Sie @android: Farbe / Weiß oder erstellen Sie eine Farbe mit dem Namen Weiß oder was auch immer Sie benötigen
Dantalian
227
benutze "app: backgroundTint" nicht "android: backgroundTint"
Vasil Valchev
244

Vijet Badigannavars Antwort ist richtig, aber die Verwendung ColorStateListist normalerweise kompliziert und er hat uns nicht gesagt, wie es geht. Da wir uns oft darauf konzentrieren View, die Farbe im normalen und gedrückten Zustand zu ändern , werde ich weitere Details hinzufügen:

  1. Wenn Sie die FABFarbe im Normalzustand ändern möchten , können Sie einfach schreiben

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
  2. Wenn Sie die FABFarbe im gedrückten Zustand ändern möchten , können Sie dank Design Support Library 22.2.1 einfach schreiben

    mFab.setRippleColor(your color in int);

    Wenn Sie dieses Attribut festlegen, wird beim langen Drücken der FABTaste an Ihrem Berührungspunkt eine Welligkeit mit Ihrer Farbe angezeigt, die sich in der gesamten Oberfläche von zeigt FAB. Bitte beachten Sie, dass sich FABdie Farbe im Normalzustand nicht ändert . Unterhalb von API 21 (Lollipop) gibt es keinen Welleneffekt, aber FABdie Farbe ändert sich immer noch, wenn Sie darauf drücken.

Wenn Sie einen komplexeren Effekt für Status implementieren möchten, sollten Sie sich eingehend mit dieserColorStateList SO-Frage befassen : Wie erstelle ich ColorStateList programmgesteuert? .

UPDATE: Danke für @ Kaitlyns Kommentar. Um den Strich von FAB mit backgroundTint als Farbe zu entfernen, können Sie app:borderWidth="0dp"in Ihrer XML festlegen .

ywwynm
quelle
3
Vielen Dank dafür, ich wusste nicht, wie man ColorStateList verwendet. Ihr Code hinterlässt jedoch in meinem FAB einen Strich (Umriss) der Themenakzentfarbe. Haben Sie eine Idee, wie ich diesen Strich entfernen (oder seine Farbe ändern kann) und ein FAB in einer speziellen Farbe haben kann, die so aussieht, als wäre diese spezielle Farbe die Akzentfarbe?
Kaitlyn Hanrahan
@ KaitlynHanrahan Bitte beachten Sie mein Update. Vielen Dank für Ihren Kommentar.
Ywwynm
Das funktioniert perfekt - Lollypop und Kitkat sehen gleich aus, sogar beide haben diese kleine Schattierung, sodass das FAB im Hintergrund gegen dieselbe Farbe erscheint (ich habe es teilweise über der Symbolleiste). Vielen Dank! Es ist einfach, aber ich weiß nicht, ob ich das jemals alleine gefunden hätte.
Kaitlyn Hanrahan
Gibt es eine Möglichkeit, app:borderWidthprogrammgesteuert festzulegen? Danke
Štarke
@ Štarke Nun, nachdem FloatingActionButtonich mir den Quellcode von angesehen habe , befürchte ich, dass Sie ihn momentan nicht programmgesteuert einstellen können, da es keinen Setter für gibt mBorderWidth.
Ywwynm
123

Wie Vasil Valchev in einem Kommentar feststellte, ist es einfacher als es aussieht, aber es gibt einen subtilen Unterschied, den ich in meinem XML nicht bemerkt habe.

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

Beachten Sie, dass es ist:

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

und nicht

android:backgroundTint="@android:color/white"
HenriqueMS
quelle
7
Dies ist wichtig, da dies zwei völlig unterschiedliche Dinge sind: Sie stammen android:backgroundTint=""aus API-Level 21 und sind Teil des Lollipop-Materialdesigns und werden unterhalb von Lollipop ignoriert. Außerdem ändert sich die FABFarbe nicht vollständig, da es sich nicht um eine Volltonfarbe handelt. Sie müssen die verwenden app:, damit es funktioniert.
CreativeCreatorormaybenot
1
Dank der Verwendung ist android:colormeine App abgestürzt und hat mich verrückt gemacht! Danke, dass du meine App
gespeichert hast
@Kapenaar kein Problem, kratzte sich auch eine Weile am Kopf, bevor ich es bemerkte;)
HenriqueMS
Wie würde dies programmgesteuert funktionieren, da es auf der Java-Seite keinen Unterschied wie app: und android: im XML gibt.
Marienke
@marienke Sie können es mit einer ColorStatesList einstellen, eine neue Frage posten und den Link hier posten, damit ich sie beantworten kann;)
HenriqueMS
58

Wenn Sie versuchen, die Farbe von FAB mithilfe der App zu ändern, liegt ein Problem vor. Rahmen der Schaltfläche haben unterschiedliche Farben, was Sie also tun müssen:

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

und im Code die Farbe einstellen:

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));
Ergo
quelle
2
Dies funktioniert für normale Farben. Wenn ich Alpha-Farbe wie # 44000000 angegeben habe, ist das Problem mit der Rahmenfarbe reproduzierbar.
Dinesh
5
getResources.getColor () ist veraltet. Verwenden Sie ContextCompat.getColor (Kontext, Ihre Farbe). stattdessen. Hoffe es hilft
Tinashe Chinyanga
51

benutz einfach,

app:backgroundTint="@color/colorPrimary"

nicht verwenden,

android:backgroundTint="@color/colorPrimary"
Ashana.Jackol
quelle
Hmmmm diese Ursache Android Studio Autocomplete geben Ergebnis verwenden Android: HintergrundTint, diese Antwort sehr gut
Yudi Karma
31

Das FAB ist basierend auf Ihrem farbig colorAccent.

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>
Tachyonflux
quelle
Nun, die Standardfarbe ist nicht grün. Wo hast du eine grüne Farbe gesetzt?
Tachyonflux
1
Ich hab nicht. Wie Sie sehen, ist diese XML der einzige Ort, an dem ich das Layout der Schaltfläche eingerichtet habe ...
Jjang
Vielleicht sollten Sie ein neues Projekt nur mit dem FAB erstellen und den Code für die gesamte Sache veröffentlichen.
Tachyonflux
3
Wow ... Ich habe dich im Grunde nur gebeten, dasselbe zu tun, und du warst nicht bereit, es zu tun. Es ist ziemlich heuchlerisch von Ihnen zu glauben, dass Ihr Code angemessen war, aber dass meine Hinzufügung zu Ihrem Code nicht angemessen ist. Es liegt an dem Fragesteller, eine MCVE zu erstellen . Vielen Dank.
Tachyonflux
2
Nicht mehr, basierend auf der Zuordnung von Themenattributen, wird die Schaltfläche für schwebende Aktionen jetzt (ich habe mich selbst überprüft) in colorSecondary ( com.google.android.material: material: 1.1.0-alpha02 )
eingefärbt
26
mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));
Reza Isfandyari
quelle
Dies ist die einfachste Lösung, viel einfacher als die Verwendung eines benutzerdefinierten Zeichens.
IgorGanapolsky
16

Andere Lösungen können funktionieren. Dies ist der 10-Pfund-Gorilla-Ansatz, der den Vorteil hat, in diesem und ähnlichen Fällen allgemein anwendbar zu sein:

Styles.xml:

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

Ihr Layout xml:

<android.support.design.widget.FloatingActionButton
       android:theme="AppTheme.FloatingAccentButtonOverlay"
       ...
 </android.support.design.widget.FloatingActionButton>
Robin Davies
quelle
Hmm, anscheinend sollte das funktionieren, aber ich bekomme Compilerfehler in der Layoutdatei String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Vielleicht fehlt mir ein Punkt mit der styles.xml ....
Scott Biggs
@ ScottBiggs verwenden, android:theme="@style/AppTheme.FloatingAccentButtonOverlay"aber diese Lösung funktioniert nicht für mich so oder so ...
jpact
Was ist mit API 16 ohne coloarAccent atrribute?
Dushyant Suthar
12

Das Dokument schlägt vor, dass standardmäßig @ color / akzent verwendet wird. Aber wir können es auf Code überschreiben, indem wir verwenden

fab.setBackgroundTintList(ColorStateList)

Denken Sie auch daran,

Die Mindest-API-Version für die Verwendung dieser Bibliothek beträgt 15, Sie müssen sie also aktualisieren! Wenn Sie es nicht tun möchten, müssen Sie ein benutzerdefiniertes Zeichen definieren und es dekorieren!

Vijet Badigannavar
quelle
funktioniert, aber dann muss ich auf api 21+ zielen. Wenn ich auf API 8 ziele, kann diese Methode nicht aufgerufen werden.
Jjang
Fügen Sie einfach diese Designbibliothek hinzu, die von Google "com.android.support:design:22.2.0" veröffentlicht wurde. Dies kann auf Geräten verwendet werden, die keine Lutscherversionen sind! Prost!!
Vijet Badigannavar
Natürlich tue ich das, aber dies ist der Fehler in diesem Code: Für den Aufruf ist API-Level 21 erforderlich (derzeit mindestens 8): android.widget.ImageView # setBackgroundTintList
Jjang
Die Mindest-API-Version für die Verwendung dieser Bibliothek beträgt 15, Sie müssen sie also aktualisieren! Wenn Sie es nicht tun möchten, müssen Sie ein benutzerdefiniertes Zeichen definieren und es dekorieren!
Vijet Badigannavar
Oh Danke! Ich wusste es nicht, dachte es wäre 21, da dies der Fehler war. Bitte poste dies als Antwort und ich werde es akzeptieren!
Jjang
10

Ändern der Hintergrundfarbe der schwebenden Aktionsschaltfläche mithilfe der folgenden Zeile

app:backgroundTint="@color/blue"

Ändern der Symbolfarbe der schwebenden Aktionsschaltfläche

android:tint="@color/white"     
Kishore Reddy
quelle
8

Dank Autocomplete. Nach ein paar Treffern und Versuchen hatte ich Glück:

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

- oder - (beide sind im Grunde dasselbe)

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

Dies funktionierte für mich unter API Version 17 mit der Designbibliothek 23.1.0.

Gaurav Kumar Gupta
quelle
8

Ich habe das gleiche Problem und es schnappt mir alles die Haare. Vielen Dank für diese https://stackoverflow.com/a/35697105/5228412

Was wir tun können..

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

es funktioniert gut für mich und wünsche für andere, die hier erreichen werden.

Purvik Rana
quelle
Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
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"/>

Beachten Sie, dass Sie Farben in res / values ​​/ color.xml hinzufügen und das Attribut in Ihre Fab aufnehmen

   app:backgroundTint="@color/addedColor"
Gavine Joyce
quelle
8

Mit dem Werkstoff Thema und den Materialkomponenten FloatingActionButton standardmäßig nimmt es die Farbe in Set - styles.xmlAttribute colorSecondary.

  • Sie können das app:backgroundTintAttribut in XML verwenden:
<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>
  • Sie können verwenden fab.setBackgroundTintList();

  • Sie können Ihren Stil mithilfe des <item name="backgroundTint">Attributs anpassen

  <!--<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>
  • Ab Version 1.1.0 von Materialkomponenten können Sie mit dem neuen materialThemeOverlayAttribut die Standardfarben nur für einige Komponenten überschreiben:
  <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>

Geben Sie hier die Bildbeschreibung ein

Gabriele Mariotti
quelle
7

Neue Themenattributzuordnung für Floating Action Button in Material 1.1.0

In Ihrem App-Thema:

  • Stellen Sie colorSecondary ein, um eine Farbe für den Hintergrund von FAB festzulegen (Zuordnungen zu backgroundTint).
  • Stellen Sie colorOnSecondary ein, um eine Farbe für das Symbol / den Text und die Welligkeitsfarbe von FAB festzulegen (Zuordnungen zu Tint und 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>
luca992
quelle
Endlich jemand, der einfache Lösungen für FAB-Hintergrund- und Vordergrundfarben (Symbolfarben) bietet.
ManuelTS
5

Wenn Sie die Datenbindung verwenden , können Sie Folgendes tun:

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

Ich habe ein sehr einfaches Beispiel gemacht

Jan Málek
quelle
3

Ich habe es so gemacht android: background = "@ color / colorAccent" Ich gehe einfach zu Ordner res und klicke dann auf Ordnerwerte und dann auf Farben.xml in Farben.xml Ich ändere einfach die Farbe von colorAccent und rufe es in android: Hintergrund und es ist geschafft

Sana Sajjad
quelle
2

Der Punkt, den wir vermissen, ist, dass es wichtig ist, an dem Wert zu arbeiten, den Sie für diese Farbe wünschen, bevor Sie die Farbe auf der Schaltfläche festlegen. Sie können also zu Werte> Farbe gehen. Sie finden die Standardfarben, aber Sie können auch Farben erstellen, indem Sie sie ausschneiden und einfügen und die Farben und Namen ändern. Dann ... wenn Sie die Farbe der schwebenden Schaltfläche (in activity_main) ändern, können Sie die von Ihnen erstellte auswählen

Beispiel - Code für Werte> Farben mit Standardfarben + 3 weitere Farben, die ich erstellt habe:

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

Jetzt mein Floating Action Button mit der Farbe, die ich erstellt und "corPar" genannt habe:

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

Es hat bei mir funktioniert. Viel Glück!

Nidia F.
quelle
1

Wenn Sie einen schwebenden Aktionsknopf ohne Zeichen haben, können Sie den Farbton programmgesteuert ändern, indem Sie:

fab.getBackground().mutate().setTint(ContextCompat.getColor(yourContext, R.color.anyColor));
Tom
quelle
Das ist die Lösung, nach der ich gesucht habe. Ich hatte eine einfache Fab mit backgrountTint und konnte keinen Weg finden, sie programmgesteuert zu ändern, bis ich dies fand.
Redar
0

Fügen Sie Farben in die Datei color.xml ein

Fügen Sie Farben in die Datei color.xml ein und fügen Sie dann diese Codezeile hinzu ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));

Progga Ilma
quelle
0

Sie können diesen Code verwenden, wenn Sie die Farbe programmgesteuert ändern möchten

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));
DiegoS
quelle
0

verwenden

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>
leidenschaftliche evops
quelle
0

Für das Materialdesign habe ich gerade die Farbe der schwebenden Aktionsschaltfläche wie folgt geändert. Fügen Sie die folgenden zwei Zeilen in Ihre XML-Datei für schwebende Aktionsschaltflächen ein. Und fertig,

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

in Kotlin:

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