Stellen Sie die Farbe des FAB-Symbols ein

75

aktuelle fab
aktuelle FAB

Ich möchte wissen, wie die Symbolfarbe des FAB-Widgets (Floating Action Button), das von der Bibliothek 'com.android.support:design:22.2.0' bereitgestellt wird, von grün auf weiß geändert wird.

style.xml

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/accent</item>

</style>
<color name="color_primary">#00B33C</color>
<color name="color_primary_dark">#006622</color>
<color name="accent">#FFB366</color>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include android:id="@+id/toolbar" layout="@layout/toolbar" />

    <TextView android:id="@+id/text"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:paddingTop="16dp"
        android:textSize="20sp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="8dp"
        android:paddingBottom="16dp" />

</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/ic_input_add"
    android:layout_margin="24dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:borderWidth="0dp" />

Paradiesstaub
quelle

Antworten:

43

Diese Antwort wurde vor Oktober 2015 geschrieben, als android:tintauf FAB nur mit API> = 21 unterstützt wurde.

AKTUALISIEREN

Lesen Sie die Antwort von @Saleem Khan, die die Standardmethode zum Einstellen des Farbtons ist, indem Sie:

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

über XML auf FAB.

ALT (Juni 2015)

Sie können es programmgesteuert mit ColorFilter ändern.

//get the drawable
Drawable myFabSrc = getResources().getDrawable(android.R.drawable.ic_input_add);
//copy it in a new one
Drawable willBeWhite = myFabSrc.getConstantState().newDrawable();
//set the color filter, you can use also Mode.SRC_ATOP
willBeWhite.mutate().setColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);
//set it to your fab button initialized before
myFabName.setImageDrawable(willBeWhite);
Giorgio Antonioli
quelle
3
Es funktioniert beim Einstellen PorterDuff.Mode.SRC_ATOPund VerwendenDrawable myFabSrc = ResourcesCompat.getDrawable(getResources(), android.R.drawable.ic_input_add, getTheme());
Paradiesstaub
47
Ihre Lösung ist zu kompliziert. Verwenden Sie einfach android: tint = "@ android: color / white"
Mehdi
4
Es ist nicht kompliziert @MahdiElMasaoudi. Manchmal und meistens gibt es Anwendungsfälle, in denen es programmgesteuert aktualisiert werden muss! Es ist Sache des Benutzers, den Overhead so weit wie möglich zu reduzieren.
Sud007
21
Wenn Sie FloatingActionButtondas im com.google.android.materialPaket verwenden, sollten Sie app:tintanstelle von hinzufügen android:tint.
Chenhe
193

Mit der Eigenschaft android: tint können Sie die Farbe wie folgt einstellen

<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:tint="@android:color/white"
    android:src="@android:drawable/ic_input_add"
   />
Saleem Khan
quelle
1
Das hat mir sehr geholfen, viel einfacher als programmgesteuert.
Angel Joseph Piscola
Hab dein Bild hier versehentlich gesehen. Gute Lösung Saleem. :-)
Anees U
so eine saubere Lösung
Thiago Pereira
9
android:tintscheint nur in API Level 21 und höher unterstützt zu werden :( developer.android.com/training/material/drawables.html
alexbirkett
1
@alexbirkett mit Ausnahme von FloatingActionButton ist hier Teil der Support-Bibliothek und scheint es auch auf älteren APIs zu implementieren (versucht es mit API 16).
Arekolek
101

Wenn Sie verwenden Material Components

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end"
    app:fabSize="normal"
    app:tint="@color/colorAccent"
    app:srcCompat="@drawable/ic_google"/>

Wenn Sie die Standardfarbe des Symbols verwenden möchten, ändern Sie diese app:tint="@null"

Miravzal
quelle
13
Verwendet die app:backgroundTint=""für die Hintergrundfarbe und app:tint=""für den Bildton.
Ray Hunter
19
Ich suchte ungefähr 30 Minuten, bis mir klar wurde, dass es nicht sein sollte, android:tintsondern eher app:tint.
Panos Gr
17

Es ist einfacher als die Zeichenbilder zu erhalten. Sie müssen nur auf den Farbfilter zugreifen und ihn auf die gewünschte Farbe einstellen.

FloatingActionButton myFab = (FloatingActionButton) findViewById(R.id.myfabid);

myFab.setColorFilter(Color.WHITE);
Daniel Campos
quelle
1
Ich weiß nicht, warum es abgelehnt wurde, dies ist die richtige Lösung und hätte die akzeptierte Antwort sein sollen.
Ishaan
1
Verwenden Sie dies in einem FragmentyourFab.setColorFilter(getResources().getColor(R.color.red));
OhhhThatVarun
Wie stelle ich die FAB-Farbe in XML oder Stil ein?
Rogayeh Hosseini
@roghayehhosseini android:tintfür API 21 und höher. Es funktioniert auch, wenn Sie die Support-Bibliothek verwendenandroid.support.design.widget.FloatingActionButton
Daniel Campos
Verwenden Sie app:
tint
14

Sie müssen sich ändern app:tint, damit das funktioniert. android:tintIch habe nichts geändert.

B. Amin
quelle
7

Verwenden Sie die weiße Version von ic_add von der Google Design-Website.

android:tint sieht aus wie eine saubere Lösung, wird jedoch unterhalb der API-Ebene 21 nicht unterstützt

Die Verwendung einer Bitmap erhöht die Komplexität Ihrer App als der Versuch, die Farbe eines vorhandenen Symbols programmgesteuert zu ändern. Weniger Komplexität bedeutet weniger Dinge zu testen :)

alexbirkett
quelle
3
Es scheint mir, als ob es android:tintfür die android.support.design.widget.FloatingActionButtonin der Support-Bibliothek definierten Geräte auch auf Geräten mit niedrigerer API-Ebene funktioniert. Ich habe es gerade an einem JellyBean-Image (API 16) getestet.
Arekolek
7

Da FloatingActionButtonerweitert ImageView, können wir verwenden, ImageViewCompatum das Symbol zu tönen:

ImageViewCompat.setImageTintList(
    floatingActionButton,
    ColorStateList.valueOf(Color.WHITE)
);
sfera
quelle
Dies funktioniert und ist eine der besten Möglichkeiten, dies durch Code zu tun, wenn Sie die Symbolfarbe umschalten möchten! Vielen Dank!
Jérémy
0

Wenn Sie Material FAB verwenden, können Sie es mithilfe des folgenden Codes in Kotlin programmgesteuert formatieren.

fab.supportImageTintList = ContextCompat.getColorStateList(context, R.color.fab_icon_tint)
Emi Raz
quelle