Android меняет цвет кнопки плавающего действия

532

Я пытался изменить цвет кнопки плавающего действия материала, но безуспешно.

<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 Было бы также неплохо узнать, как добавить волновой эффект, но и этого не мог понять.

Jjang
источник
Эффект Ripple недоступен на устройствах перед леденцом на палочке, поскольку он использует новый RenderThread .
tachyonflux
@ karaokyo хорошо, но как я это делаю?
Джанг
27
По моему мнению, Google делает очень плохую работу, чтобы сделать эти вещи доступными
Joop
Чтобы сделать это программно и обратно совместимым, см. Stackoverflow.com/questions/30966222/…
Ральф Пина

Ответы:

1050

Как описано в документации , по умолчанию он принимает цвет, заданный в атрибуте 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, если вы хотите изменить цвет значка для библиотеки поддержки проектирования до версии 22 (включительно) , вы можете использовать

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" />
Marko
источник
24
Это не работает в библиотеке поддержки проектирования v23 для <API 12 устройств. Это работало в v22, поэтому они что-то сломали, по-видимому.
Hungryghost
4
Обратите внимание, что если вы хотите также изменить цвет изображения на белый, например, вы можете использовать: android: tint = "@ android: color / white"
Dantalian
1
android: tint = "@ color / white" не работал для меня, потому что по какой-то причине не смог решить. android: tint = "# ffffff" работает для меня, хотя
realappie
2
Это потому, что @ color / white не существует в вашем colors.xml. используйте @android: color / white или создайте цвет с именем white или как вам нужно
Dantalian
227
используйте "app: backgroundTint", а не "android: backgroundTint"
Василь Вальчев,
244

Ответ Виджета Бадиганнавара правильный, но, 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 программно? ,

ОБНОВЛЕНИЕ: Спасибо за комментарий @ Кейтлин. Чтобы удалить обводку FAB, используя backgroundTint в качестве цвета, вы можете установить app:borderWidth="0dp"в xml.

ywwynm
источник
3
Спасибо за это, я не знал, как использовать ColorStateList. Тем не менее, ваш код оставляет мой FAB с обводкой (контур) цвета акцента темы. Есть ли у вас какие-либо идеи, как я могу удалить этот штрих (или, скорее, изменить его цвет) и получить FAB специального цвета, который выглядит так, будто этот специальный цвет является цветом акцента?
Кейтлин Ханрахан
@KaitlynHanrahan Пожалуйста, смотрите мое обновление. Спасибо за ваш комментарий.
ywwynm
Это прекрасно работает - Lollypop и Kitkat выглядят одинаково, даже у обоих тусклое затенение, поэтому FAB выскакивает на фоне одного и того же цвета (у меня это частично над панелью инструментов). Спасибо! Это просто, но я не знаю, нашел бы я это сам.
Кейтлин Ханрахан
Есть ли способ, как установить app:borderWidthпрограммно? Спасибо
Штарке
@ Štarke Ну, после просмотра исходного кода FloatingActionButton, я боюсь, что вы не можете установить его программно прямо сейчас, так как нет установщика для mBorderWidth.
ywwynm
124

Как отметил Василь Вальчев в комментарии, это проще, чем кажется, но есть небольшая разница, которую я не заметил в своем 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"
HenriqueMS
источник
7
Это важно, потому что это две совершенно разные вещи: android:backgroundTint=""от Api level 21 и части Lollipop Material Design и будут игнорироваться ниже Lollipop. Также это не меняет FABцвет полностью, потому что это не сплошной цвет. Вы должны использовать app:тот, чтобы заставить его работать.
creativecreatorormaybenot
1
Спасибо, использование android:colorвызвало сбой моего приложения, и это сводило меня с ума! Спасибо за сохранение моего приложения и то, что осталось от моего здравомыслия ;-)
Kapenaar
@Kapenaar без проблем, немного почесал голову, прежде чем заметил;)
HenriqueMS
Как это будет работать программно, поскольку на стороне Java нет разницы, как app: and android: в XML.
Мариенке
@marienke, вы можете установить его с помощью ColorStatesList, опубликовать новый вопрос и разместить ссылку здесь, чтобы я мог ответить на него;)
HenriqueMS
58

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

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

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

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));
следовательно
источник
2
Эта работа для нормальных цветов. Если бы я дал альфа-цвет, как # 44000000, проблема с цветом кадра воспроизводима.
Динеш
5
getResources.getColor () устарела, рассмотрите возможность использования ContextCompat.getColor (context, your color); вместо. Надеюсь, это поможет
Тинаше Чиньянга
51

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

app:backgroundTint="@color/colorPrimary"

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

android:backgroundTint="@color/colorPrimary"
Ashana.Jackol
источник
хмммм, это причина, по которой автозаполнение андроид студии дает результат использования android: backgroundTint, этот ответ очень хорош
Yudi karma
31

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

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>
tachyonflux
источник
Ну, по умолчанию цвет не зеленый. Где вы установили зеленый цвет?
tachyonflux
1
Я не. Как видите, этот xml - единственное место, где я настроил макет кнопки ...
Jjang
Может быть, вам следует создать новый проект с помощью всего лишь FAB и опубликовать код для всего этого.
tachyonflux
3
Ух ты ... Я просто попросил тебя сделать то же самое, а ты не хотел этого делать. С вашей стороны довольно лицемерно полагать, что ваш код был адекватным, но что мое добавление к вашему коду не подходит. Спрашивается, чтобы создать MCVE . Спасибо.
tachyonflux
2
Больше нет, на основе атрибута темы, отображающего теперь плавающую кнопку действия (я проверил себя), в colorSecondary ( com.google.android.material: material: 1.1.0-alpha02 )
ievgen
26
mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));
Реза Исфандьяри
источник
Это самое простое решение, намного более простое, чем использование настраиваемого рисования.
Игорь Ганапольский
16

Другие решения могут работать. Это 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>
Робин Дэвис
источник
Хм, похоже, это должно работать, но я получаю ошибки компилятора в файле макета String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Может быть, я упускаю точку в файле styles.xml ....
Скотт Биггс
@ScottBiggs использовать, android:theme="@style/AppTheme.FloatingAccentButtonOverlay"но этот solutin не работает для меня в любом случае ...
Jpact
А как насчет API 16, у которого нет атрибута coloarAccent?
Душянт Сутар
12

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

fab.setBackgroundTintList(ColorStateList)

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

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

Вийет Бадиганнавар
источник
работает, но тогда я должен нацелиться на API 21+. если я нацеливаюсь на api 8, я не могу вызвать этот метод.
Джанг
Просто включите эту библиотеку дизайна, которая была выпущена Google "com.android.support:design:22.2.0". Это может использоваться на устройствах, которые не являются версиями леденца на палочке! ура !!
Виджет Бадиганнавар
Конечно, я делаю, но это ошибка в этом коде: вызов требует API уровня 21 (текущий минимум 8): android.widget.ImageView # setBackgroundTintList
Jjang
Минимальная версия API для использования этой библиотеки - 15, поэтому вам нужно обновить ее! если вы не хотите этого делать, вам нужно определить собственный рисунок и украсить его!
Виджет Бадиганнавар
Ой ну спасибо! Я не знал, думал, что это 21, так как это то, что сказал ошибка. Пожалуйста, отправьте это как ответ, и я приму это!
Джанг
10

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

app:backgroundTint="@color/blue"

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

android:tint="@color/white"     
Кишоре Редди
источник
8

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

    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

У меня та же проблема, и все это вырывает мои волосы. Спасибо за это https://stackoverflow.com/a/35697105/5228412

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

 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 и включаете атрибут в свой список.

   app:backgroundTint="@color/addedColor"
Гавин Джойс
источник
8

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

введите описание изображения здесь

Габриэле Мариотти
источник
7

Новое отображение атрибутов темы для кнопки с плавающим действием в материале 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>
luca992
источник
Наконец, кто-то, кто предоставляет простые решения для цвета фона и переднего плана (иконки) FAB.
ManuelTS
5

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

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

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

Ян Малек
источник
3

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

сана саджад
источник
2

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

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

Нидия Ф.
источник
1

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

fab.getBackground().mutate().setTint(ContextCompat.getColor(yourContext, R.color.anyColor));
Том
источник
Вот решение, которое я искал. У меня был простой фаб с backgrountTint и я не мог найти способ изменить его программно, пока не нашел это.
Редар
0

добавить цвета в файл color.xml

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

Прогга ильма
источник
0

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

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));
Diegos
источник
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>
passionatedevops
источник
0

для дизайна материалов я просто изменил цвет кнопки плавающего действия следующим образом: Добавьте две нижеприведенные строки в свою кнопку плавающего действия xml. И сделано,

 android:backgroundTint="@color/colorPrimaryDark"
 app:borderWidth="0dp"
Джвала Кумар
источник
0

в Котлине:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)
Бадр
источник