Изменение цвета плавающей кнопки Android

Несколько часов пытались изменить цвет кнопки Floating Action Material, но без успеха.

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

Но ничего из этого не было. Я также пробовал решения в "дублированном вопросе", но ни один из них не работает, кнопка оставалась зеленой, а также стала квадратом.

Я хотел бы получить подробный ответ, спасибо.

P.S. Было бы неплохо также знать, как добавить эффект пульсации, и не мог этого понять.

+478
источник поделиться
23 ответа

Как описано в документации, по умолчанию он принимает цвет, установленный в styles.xml атрибуте colorAccent.

Цвет фона этого представления по умолчанию соответствует цвету вашей темы. Если вы хотите изменить это во время выполнения, вы можете сделать это через setBackgroundTintList (ColorStateList).

Если вы хотите изменить цвет

  • в XML с атрибутом 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" >
  • в коде с .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"
    app:borderWidth="0dp" />
+970
источник

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

  • Если вы хотите изменить цвет FAB в нормальном состоянии, вы можете просто написать

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
    
  • Если вы хотите изменить цвет FAB в нажатом состоянии, спасибо Библиотеке поддержки дизайна 22.2.1, вы можете просто написать

    mFab.setRippleColor(your color in int);
    

    Установив этот атрибут, при длительном нажатии FAB пульсация с вашим цветом появится в вашей точке касания и откроется на всей поверхности FAB. Обратите внимание, что он не изменит цвет FAB в нормальном состоянии. Ниже API 21 (Lollipop) эффект пульсации отсутствует, но цвет FAB будет меняться при нажатии.

Наконец, если вы хотите реализовать более сложный эффект для состояний, тогда вы должны глубоко вникать в ColorStateList, вот вопрос SO, обсуждающий его: Как создать программный код ColorStateList?.

UPDATE: Спасибо за комментарий @Kaitlyn. Чтобы удалить ход FAB с использованием backgroundTint в качестве его цвета, вы можете установить app:borderWidth="0dp" в свой xml.

+224
источник
другие ответы

Связанные вопросы


Похожие вопросы

Как отметил в комментарии Василь Вальчев, это проще, чем кажется, но есть небольшая разница, которую я не заметил в своем 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"
+116
источник

если вы попытаетесь изменить цвет FAB с помощью приложения, есть некоторые проблемы. кадр кнопки имеет разный цвет, так что вы должны сделать:

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

и в коде установите цвет:

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));
+53
источник

просто используйте

app:backgroundTint="@color/colorPrimary"

не использовать,

android:backgroundTint="@color/colorPrimary"
+47
источник

FAB окрашен в соответствии с вашим colorAccent.

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>
+29
источник
mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));
+22
источник

Другие решения могут работать. Это 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>
+15
источник

Документ предполагает, что по умолчанию он принимает цвет @акцент. Но мы можем переопределить его в коде, используя

fab.setBackgroundTintList(ColorStateList)

Также помните,

Минимальная версия API для использования этой библиотеки - 15, поэтому вам необходимо ее обновить! если вы не хотите этого делать, вам нужно определить пользовательский чертеж и украсить его!

+12
источник

Благодаря автозаполнению. Мне повезло после нескольких ударов и испытаний:

    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.

+8
источник

У меня такая же проблема, и все это хватало моих волос. Спасибо за это  fooobar.com/questions/24346/...

Что мы можем сделать.

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

он отлично работает для меня и желает других, которые доберутся здесь.

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

Обратите внимание, что вы добавляете цвета в res/values ​​/color.xml и включить атрибут в ваш fab

   app:backgroundTint="@color/addedColor"
+8
источник

Изменение цвета фона кнопки "Плавающая" с помощью строки ниже

app:backgroundTint="@color/blue"

Изменение цвета значка кнопки "Плавающее действие"

android:tint="@color/white"     
+8
источник

При использовании привязки данных вы можете сделать что-то вроде этого:

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

Я сделал очень простой пример

+5
источник

Новое отображение атрибутов темы для кнопки с плавающим действием в материале 1.1.0

В теме вашего приложения:

  • Установите colorSecondary, чтобы установить цвет для фона FAB (сопоставляется с backgroundTint)
  • Установите colorOnSecondary, чтобы установить цвет значка/текста и цвет пульсации FAB (сопоставляется с tint и 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>
+4
источник

я сделал это следующим образом android: background = "@color/colorAccent" я просто захожу в папку res, затем нажимаю на значения папки и затем на colors.xml в colors.xml я просто меняю цвет colorAccent и вызываю его в android: background и это сделано

+3
источник

То, что нам не хватает, заключается в том, что перед установкой цвета на кнопке важно работать с тем значением, которое вы хотите для этого цвета. Таким образом, вы можете перейти к значениям > цвет. Вы найдете по умолчанию, но вы также можете создавать цвета, обходя и вставляя их, изменяя цвета и имена. Затем... когда вы идете изменить цвет плавающей кнопки (в 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"/>

Это сработало для меня. Удачи!

+2
источник

С Материальной темой и материальными компонентами 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"> attribute

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

enter image description here

+2
источник

Если вы используете Xamarin для разработки приложений для Android, используйте ниже код для изменения цвета плавающей кнопки.

FloatingActionButton fa = root.FindViewById<FloatingActionButton>(Resource.Id.fabback);
            Android.Content.Res.ColorStateList csl = new Android.Content.Res.ColorStateList(new int[][] { new int[0] }, new int[]{Android.Graphics.Color.ParseColor("#000000") });
            fab.BackgroundTintList= csl;

"# 000000" используется для черного цвета, который вы можете изменить в соответствии с вашими требованиями.

+1
источник

Вы можете использовать этот код, если хотите изменить цвет программным способом

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));
0
источник

add colors in color.xml file

добавить цвета в файл color.xml, а затем добавить эту строку кода... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));

0
источник

можешь использовать:

app:tint="#FFFF"       

пример:

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|start"
            android:layout_margin="16dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            app:backgroundTint="@color/colorAccent"
            app:fabSize="normal"
            app:rippleColor="@color/colorPrimaryDark"
            app:tint="#FFFF"
            android:src="@drawable/ic_search_24dp"
          />
0
источник

использовать

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

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос