Android змінює колір кнопки плаваючої дії

Я намагався змінити колір плаваючої дії кнопки "Матеріал", але без успіху.

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

Я спробував додати:

android:background="@color/mycolor"

або за допомогою коду:

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

або

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

Але нічого з вищезазначеного не спрацювало. Я також спробував рішення у запропонованому дублікаті питання, але жодне з них не працює; кнопка залишилася зеленою і також стала квадратною.

PS Було б також непогано знати, як додати ефект пульсацій, не можу цього зрозуміти.

Як описано в документації , за замовчуванням він приймає безліч квітів в styles.xml атрибут colorAccent .

Колір фону цього перегляду за замовчуванням відповідає кольору вашої теми. Якщо ви хочете змінити це під час виконання, ви можете зробити це через setBackgroundTintList (ColorStateList).

Якщо ви хочете змінити колір

• в XML з додатком атрибута : 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" >

• в коді з .setBackgroundTintList (відповідь нижче ywwynm )

Як зазначає @Dantalian у коментарях, якщо ви хочете змінити колір піктограми для бібліотеки підтримки дизайну до v22 (включно) , ви можете використовувати

android:tint="@color/white"     

Для бібліотеки підтримки дизайну з v23 ви можете використовувати:

app:tint="@color/white"   

Також з androidXбібліотеками потрібно встановити межу 0dp у вашому макеті 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" />

Відповідь Vijet Badigannavar правильна, але використання ColorStateListзазвичай складне, і він не сказав нам, як це зробити. Оскільки ми часто зосереджуємось на зміні Viewкольору в нормальному і натиснутому стані, я збираюся додати більше деталей:

1. Якщо ви хочете змінити FABколір в звичайний стан, ви можете просто написати

   mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

2. Якщо ви хочете змінити FABколір в натиснутому стані, дякую за бібліотеку підтримки підтримки 22.2.1 , ви можете просто написати

   mFab.setRippleColor(your color in int);

   Встановивши цей атрибут, коли ви довго натискаєте на FAB, на вашій точці дотику з’явиться пульсація з вашим кольором і виявиться на всю поверхню FAB. Зверніть увагу, що він не змінить FABколір у звичайному стані. Нижче API 21 (Lollipop) ефекту пульсації немає, але FABколір все одно зміниться при натисканні на нього.

Нарешті, якщо ви хочете реалізувати більш складний ефект для станів, то вам слід глибоко заглибитись ColorStateList, ось ТАКЕ питання, яке обговорює це: Як створити ColorStateList програмно? .

ОНОВЛЕННЯ: Дякую за коментар @ Kaitlyn Щоб видалити обведення FAB, використовуючи backgroundTint в якості його кольору, ви можете встановити app:borderWidth="0dp"у своєму xml.

Як зазначив у коментарі Василь Валчев, це простіше, ніж це виглядає, але є тонка різниця, яку я не помічав у своєму 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"/>

Зверніть увагу:

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

і ні

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

якщо ви спробуєте змінити колір FAB за допомогою програми, є певна проблема. Рамка кнопки має різний колір, тому що вам потрібно зробити:

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

і в коді встановити колір:

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

просто використовувати,

app:backgroundTint="@color/colorPrimary"

не використовуйте,

android:backgroundTint="@color/colorPrimary"

FAB кольоровий на основі вашого 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)));

Можуть працювати й інші рішення. Це 10-фунтовий підхід горили, який має перевагу в широкому застосуванні в цьому та подібних випадках:

Styles.xml:

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

ваш макет xml:

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

Документ передбачає, що він за замовчуванням приймає @ колір / наголос. Але ми можемо замінити його на код за допомогою

fab.setBackgroundTintList(ColorStateList)

Також пам’ятайте,

Мінімальна версія API для використання цієї бібліотеки - 15, тому її потрібно оновити! якщо ви не хочете це робити, то вам потрібно визначити користувальницький малюнок та прикрасити його!

Зміна кольору фону плаваючої дії за допомогою нижнього рядка

app:backgroundTint="@color/blue"

Зміна кольору піктограми плаваючої дії

android:tint="@color/white"     

Завдяки автозаповненню. Мені пощастило після кількох ударів і випробувань:

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

- або - (обидва - це одна і та ж річ)

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

Це працювало для мене на версії API 17 з бібліотекою дизайну 23.1.0.

У мене така ж проблема, і все це вихоплює моє волосся. Дякуємо за це https://stackoverflow.com/a/35697105/5228412

Що ми можемо зробити..

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

це добре працює для мене і бажаю іншим, хто доїде сюди.

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

Зауважте, що ви додаєте кольори у res / values ​​/ color.xml і включаєте атрибут у свою файлову файлу

   app:backgroundTint="@color/addedColor"

З матеріалом Темою і матеріальними компонентами FloatingActionButton , за замовчуванням він приймає колір , встановлений в styles.xmlатрибуті colorSecondary.

• Ви можете використовувати app:backgroundTintатрибут у xml:

<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>

• Можна використовувати fab.setBackgroundTintList();

• Ви можете налаштувати свій стиль за допомогою <item name="backgroundTint">атрибута

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

• Починаючи з версії 1.1.0 матеріальних компонентів, ви можете використовувати новий materialThemeOverlayатрибут, щоб змінити кольори за замовчуванням лише для деяких компонентів:

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

Нове відображення атрибутів теми для плаваючої кнопки дій у матеріалі 1.1.0

У темі програми:

• Встановіть colorSecondary, щоб встановити колір фону FAB (карти для backgroundTint)
• Встановіть colorOnSecondary, щоб встановити колір піктограми / тексту та пульсації кольорів FAB (карти підфарбовувати та пульсувати кольором)

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

Використовуючи прив'язку даних, ви можете зробити щось подібне:

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

Я зробив дуже простий приклад

мені це подобалося на цьому андроїді: background = "@ color / colorAccent" я просто переходжу до Res папки, потім натискаю на значення папки, а потім на color.xml в кольорах.xml Я просто змінюю колір colorAccent і називаю його в android: background і зроблено

Те, що нам не вистачає, полягає в тому, що перш ніж встановити колір на кнопку, важливо попрацювати над значенням, яке потрібно для цього кольору. Таким чином, ви можете перейти до значень> колір. Ви знайдете типові, але також можете створювати кольори, копіюючи та вставляючи їх, змінюючи кольори та назви. Потім ... коли ви перейдете до зміни кольору плаваючої кнопки (у Activity_main), ви можете вибрати ту, яку ви створили

Приклад - код на значення> кольори з кольорами за замовчуванням + ще 3 кольори, які я створив:

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

Тепер моя плаваюча кнопка дії з кольором, який я створив і назвав "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"/>

Це працювало для мене. Щасти!

Якщо у вас плаваюча кнопка дії без малювання, ви можете змінити відтінок програмно за допомогою:

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

додайте кольори у файл color.xml, а потім додайте цей рядок коду ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));

Цей код можна використовувати в тому випадку, якщо ви хочете програмно змінити колір

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

використання

додаток: backgroundTint = "@ color / orange" в

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

Що стосується дизайну матеріалів, я щойно змінив колір плаваючої кнопки дій, як цей, Додайте нижче два рядки до вашої кнопки плаваючої дії xml. І зробили,

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

в Котліні:

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