Android zmienia kolor pływającego przycisku akcji


531

Próbowałem zmienić kolor pływającego przycisku materiału, ale bez powodzenia.

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

Próbowałem dodać:

android:background="@color/mycolor"

lub za pomocą kodu:

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

lub

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

Ale żadne z powyższych nie zadziałało. Próbowałem również rozwiązań w proponowanym duplikacie pytania, ale żadne z nich nie działa; przycisk pozostał zielony, a także stał się kwadratem.

PS Byłoby również miło wiedzieć, jak dodać efekt tętnienia, też tego nie rozumiem.



Efekt tętnienia nie jest dostępny na urządzeniach sprzed wersji Lollipop, ponieważ wykorzystuje nowy RenderThread .
tachyonflux

@karaokyo ok, ale jak ja to robię?
Jjang

27
Moim zdaniem Google robi naprawdę kiepską robotę, aby udostępnić te rzeczy
Joop,

Aby to zrobić programowo i wstecznie, zobacz stackoverflow.com/questions/30966222/...
Ralph Pina

Odpowiedzi:


1049

Jak opisano w dokumentacji , domyślnie przyjmuje zestaw kolorów w styles.xml atrybutu colorAccent .

Domyślnie kolor tła tego widoku odpowiada kolorowi motywu. Jeśli chcesz to zmienić w środowisku wykonawczym, możesz to zrobić za pośrednictwem setBackgroundTintList (ColorStateList).

Jeśli chcesz zmienić kolor

  • w XML z atrybutem 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" >
  • w kodzie z .setBackgroundTintList (odpowiedź poniżej autorstwa ywwynm )

Jak wspomniano w komentarzach @Dantalian, jeśli chcesz zmienić kolor ikony w Bibliotece wsparcia projektowania do wersji 22 (włącznie) , możesz użyć

android:tint="@color/white"     

W przypadku biblioteki wsparcia projektowania od wersji 23 można użyć:

app:tint="@color/white"   

Również w androidXbibliotekach musisz ustawić granicę 0dp w swoim układzie 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
To nie działa w Design Support Library v23 dla urządzeń <API 12. Działało w wersji 22, więc najwyraźniej coś złamali.
hungryghost

4
Pamiętaj, że jeśli chcesz na przykład zmienić kolor obrazu na biały, możesz użyć: android: tint = "@ android: color / white"
Dantalian

1
android: tint = "@ color / white" nie działał dla mnie, ponieważ z jakiegoś powodu nie mógł go rozwiązać. android: tint = "# ffffff" Działa jednak dla mnie
realappie

2
Wynika to z faktu, że @ color / white nie istnieje w pliku colors.xml. użyj @ android: kolor / biały lub utwórz kolor o nazwie biały lub cokolwiek potrzebujesz
Dantalian

227
użyj „app: backgroundTint”, a nie „android: backgroundTint”
Vasil Valchev

244

Odpowiedź Vijet Badigannavara jest poprawna, ale korzystanie z niej ColorStateListjest zwykle skomplikowane i nie powiedział nam, jak to zrobić. Ponieważ często skupiamy się na zmianie Viewkoloru w stanie normalnym i wciśniętym, dodam więcej szczegółów:

  1. Jeśli chcesz zmienić FABkolor w normalnym stanie, możesz po prostu pisać

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
  2. Jeśli chcesz zmienić FABkolor w stanie wciśniętym, dzięki Design Support Library 22.2.1 możesz po prostu pisać

    mFab.setRippleColor(your color in int);

    Po ustawieniu tego atrybutu, po naciśnięciu i przytrzymaniu FAB, zmarszczka z kolorem pojawi się w punkcie styku i ujawni się na całej powierzchni FAB. Zauważ, że nie zmieni FABkoloru w normalnym stanie. Poniżej API 21 (Lollipop) nie ma efektu tętnienia, ale FABkolor nadal się zmienia po naciśnięciu.

Wreszcie, jeśli chcesz zaimplementować bardziej złożony efekt dla stanów, powinieneś głęboko zagłębić się ColorStateList, oto pytanie SO omawiające to: Jak programowo utworzyć ColorStateList? .

AKTUALIZACJA: Dzięki za komentarz @ Kaitlyn. Aby usunąć obrys FAB przy użyciu backgroundTint jako jego koloru, możesz ustawić app:borderWidth="0dp"w swoim pliku xml.


3
Dzięki za to nie wiedziałem, jak korzystać z ColorStateList. Jednak Twój kod pozostawia mój FAB z obrysem (konturem) koloru akcentującego motyw. Czy masz pojęcie, jak mogę usunąć ten obrys (a raczej zmienić jego kolor) i mieć FAB w specjalnym kolorze, który wygląda tak, że ten specjalny kolor to kolor akcentujący?
Kaitlyn Hanrahan,

@KaitlynHanrahan Proszę zobaczyć moją aktualizację. Dzięki za komentarz.
ywwynm,

To działa idealnie - Lollypop i Kitkat wyglądają tak samo, nawet oba mają niewielkie cieniowanie, więc FAB wyskakuje w tym samym kolorze w tle (mam go częściowo nad paskiem narzędzi). Dzięki wielkie! To proste, ale nie wiem, czy kiedykolwiek bym to znalazł.
Kaitlyn Hanrahan,

Czy istnieje sposób, aby ustawić app:borderWidthprogramowo? Dzięki
Štarke,

@ Štarke Cóż, po zapoznaniu się z kodem źródłowym FloatingActionButton, obawiam się, że nie można go teraz ustawić programowo, ponieważ nie ma setera mBorderWidth.
ywwynm,

123

Jak zauważył Vasil Valchev w komentarzu, jest to prostsze niż się wydaje, ale istnieje subtelna różnica, której nie zauważyłem w moim pliku 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"/>

Zauważ, że to:

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

i nie

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

7
Jest to ważne, ponieważ są to dwie zupełnie różne rzeczy: android:backgroundTint=""pochodzi z poziomu 21 interfejsu API i jest częścią projektu materiału Lollipop i zostanie zignorowany poniżej Lollipop. Również nie zmienia FABcałkowicie koloru, ponieważ nie jest to jednolity kolor. Musisz użyć tego, app:aby działał.
creativecreatorormaybenot

1
Dzięki, używanie android:colorspowodowało awarię mojej aplikacji i doprowadzało mnie to do szału! Dzięki za uratowanie mojej aplikacji i resztki mojego zdrowia psychicznego ;-)
Kapenaar

@Kapenaar bez problemu, drapałem się też przez chwilę, zanim zauważyłem;)
HenriqueMS

Jak miałoby to działać programowo, ponieważ po stronie java nie ma różnicy jak app: i android: w XML.
marienke

@marienke możesz ustawić za pomocą ColorStatesList, opublikować nowe pytanie i zamieścić link tutaj, abym mógł na nie odpowiedzieć;)
HenriqueMS

58

jeśli spróbujesz zmienić kolor FAB za pomocą aplikacji, wystąpi jakiś problem. ramka przycisku ma inny kolor, więc co musisz zrobić:

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

i w kodzie ustaw kolor:

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

2
Działa to dla normalnych kolorów. Jeśli podałem kolor alfa jak # 44000000, problem z kolorem jest powtarzalny.
Dinesh

5
getResources.getColor () jest przestarzały, rozważ użycie ContextCompat.getColor (kontekst, twój kolor); zamiast. Mam nadzieję, że to pomoże
Tinashe Chinyanga

51

po prostu użyj,

app:backgroundTint="@color/colorPrimary"

nie używaj,

android:backgroundTint="@color/colorPrimary"

hmmmm, bo autouzupełnianie w studiu android daje wynik, użyj Androida: backgroundTint, ta odpowiedź jest bardzo dobra
Yudi karma

31

FAB jest pokolorowany na podstawie twojego colorAccent.

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

Domyślny kolor nie jest zielony. Gdzie ustawiłeś zielony kolor?
tachyonflux

1
Ja nie. Jak widać, ten plik XML jest jedynym miejscem, w którym ustawiłem układ przycisku ...
Jjang

Może powinieneś stworzyć nowy projekt za pomocą FAB i opublikować kod całej rzeczy.
tachyonflux

3
Wow ... Zasadniczo po prostu poprosiłem cię o zrobienie tego samego, a ty nie byłeś skłonny to zrobić. To hipokryzja, jeśli wierzysz, że twój kod jest odpowiedni, ale mój dodatek do twojego kodu nie jest odpowiedni. Utworzenie MCVE należy do pytającego . Dzięki.
tachyonflux

2
Już nie, oparty na temacie Mapowanie atrybutu pływającego przycisku akcji (zweryfikowałem siebie) jest zabarwiony na colorSecondary ( com.google.android.material: materiał: 1.1.0-alpha02 )
ievgen

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

To najłatwiejsze rozwiązanie, o wiele łatwiejsze niż korzystanie z niestandardowej szuflady.
IgorGanapolsky

16

Inne rozwiązania mogą działać. To 10-funtowe podejście goryla ma tę zaletę, że ma szerokie zastosowanie w tym i podobnych przypadkach:

Styles.xml:

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

twój układ xml:

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

Hmm, wygląda na to, że to powinno działać, ale dostaję błędy kompilatora w pliku układu String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Może brakuje mi punktu w pliku styles.xml ....
Scott Biggs,

@ ScottBiggs używa, android:theme="@style/AppTheme.FloatingAccentButtonOverlay"ale ten solutin nie działa dla mnie tak czy inaczej ...
jpact

Co z API 16, który nie ma atrybutu coloarAccent?
Dushyant Suthar

12

Dokument sugeruje, że domyślnie przyjmuje @ kolor / akcent. Ale możemy zastąpić to kodem za pomocą

fab.setBackgroundTintList(ColorStateList)

Pamiętaj też

Minimalna wersja interfejsu API do korzystania z tej biblioteki to 15, więc musisz ją zaktualizować! jeśli nie chcesz tego zrobić, musisz zdefiniować niestandardową rysownię i ozdobić ją!


działa, ale potem muszę kierować na API 21+. jeśli celuje API 8 nie może wywołać tej metody.
Jjang,

Wystarczy dołączyć tę bibliotekę projektową wydaną przez Google „com.android.support:design:22.2.0”. Można tego użyć na urządzeniach, które nie są wersjami Lollipop! Twoje zdrowie!!
Vijet Badigannavar

oczywiście, że tak, ale taki jest błąd w tym kodzie: wywołanie wymaga interfejsu API poziomu 21 (bieżąca wartość min to 8): android.widget.ImageView # setBackgroundTintList
Jjang

Minimalna wersja interfejsu API do korzystania z tej biblioteki to 15, więc musisz ją zaktualizować! jeśli nie chcesz tego zrobić, musisz zdefiniować niestandardową rysownię i ozdobić ją!
Vijet Badigannavar

Oh dziękuję! Nie wiedziałem, myślałem, że to 21, ponieważ tak powiedział błąd. Prześlij to jako odpowiedź, a ja to zaakceptuję!
Jjang

10

Zmiana koloru tła pływającego przycisku akcji za pomocą poniżej linii

app:backgroundTint="@color/blue"

Zmiana koloru ikony pływającego przycisku akcji

android:tint="@color/white"     

8

Dzięki autouzupełnianiu. Miałem szczęście po kilku trafieniach i próbach:

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

- lub - (oba są w zasadzie to samo)

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

To zadziałało dla mnie w wersji API 17 z biblioteką projektową 23.1.0.


8

Mam ten sam problem i wszystko porywa mi włosy. Dzięki za to https://stackoverflow.com/a/35697105/5228412

Co możemy zrobić..

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

działa dobrze dla mnie i życzę innym, którzy tu dotrą.


Chociaż teoretycznie może to odpowiedzieć na pytanie, lepiej byłoby zawrzeć tutaj istotne części odpowiedzi i podać odnośnik.
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"/>

Pamiętaj, że dodajesz kolory w res / wartości / color.xml i dołączasz atrybut do swojej fabryki

   app:backgroundTint="@color/addedColor"

8

W przypadku motywu materiału i komponentów materiału FloatingActionButton domyślnie przyjmuje on zestaw kolorów w styles.xmlatrybucie colorSecondary.

  • Możesz użyć app:backgroundTintatrybutu w xml:
<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>
  • Możesz użyć fab.setBackgroundTintList();

  • Możesz dostosować swój styl za pomocą <item name="backgroundTint">atrybutu

  <!--<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>
  • Począwszy od wersji 1.1.0 komponentów materiałowych, można użyć nowego materialThemeOverlayatrybutu, aby zastąpić domyślne kolory tylko dla niektórych komponentów:
  <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>

wprowadź opis zdjęcia tutaj


7

Nowe mapowanie atrybutów motywu dla przycisku akcji swobodnej w materiale 1.1.0

W motywie aplikacji:

  • Ustaw colorSecondary, aby ustawić kolor tła FAB (odwzorowanie na backgroundTint)
  • Ustaw colorOnSecondary, aby ustawić kolor ikony / tekstu i pomarszczenia FAB (odwzorowanie na odcień i marszczyć kolor)

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

Wreszcie ktoś, kto zapewnia proste rozwiązania dla kolorów tła FAB i kolorów pierwszego planu (ikon).
ManuelTS


3

Zrobiłem to tak: Android: background = "@ color / colorAccent" Idę do folderu res, następnie klikam na wartości folderu, a następnie na colors.xml w colors.xml Po prostu zmieniam kolor colorAccent i nazywam to w Androidzie: tło i gotowe


2

Chodzi nam o to, że zanim ustawisz kolor na przycisku, ważne jest, aby pracować nad wartością, którą chcesz dla tego koloru. Możesz więc przejść do wartości> kolor. Znajdziesz domyślne, ale możesz również tworzyć kolory, kopiując je i wklejając, zmieniając kolory i nazwy. Następnie ... kiedy zmienisz kolor pływającego przycisku (w activity_main), możesz wybrać ten, który stworzyłeś

Przykład - kod wartości> kolory z domyślnymi kolorami + 3 kolejne kolory, które utworzyłem:

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

Teraz mój Floating Action Button z kolorem, który stworzyłem i nazłem „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"/>

To zadziałało dla mnie. Powodzenia!


1

Jeśli masz pływający przycisk akcji bez rysowania, możesz zmienić odcień programowo, używając:

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

To jest rozwiązanie, którego szukałem. Miałem prostą wersję z backgrountTint i nie mogłem znaleźć sposobu, aby to zmienić programowo, dopóki tego nie znalazłem.
Redar

0

dodaj kolory w pliku color.xml

dodaj kolory w pliku color.xml, a następnie dodaj ten wiersz kodu ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));


0

Możesz użyć tego kodu, jeśli chcesz programowo zmienić kolor

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

0

posługiwać się

app: backgroundTint = "@ color / orange" w


<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

w przypadku projektowania materiałów właśnie zmieniłem kolor pływającego przycisku akcji w ten sposób. Dodaj dwa poniższe wiersze w swoim pływającym przycisku działania xml. I zrobione,

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

0

w Kotlinie:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.