web-dev-qa-db-ja.com

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

しかし、上記のどれもうまくいきませんでした。私はまた、 "重複した質問" で解決策を試してみましたが、どれもうまくいかず、ボタンは緑色のままで、正方形にもなりました。

詳しい回答をお願いします。

P.S波紋効果を追加する方法を知っていることもいいのですが、それも理解できませんでした。

javaandroidandroid-5.0-lollipopfloating-action-button
423
Jjang

ドキュメント で説明されているように、デフォルトでは styles.xml attribute colorAccent に設定されている色が使用されます。

このビューの背景色は、デフォルトでテーマのcolorAccentになります。実行時にこれを変更したい場合は、setBackgroundTintList（ColorStateList）で変更できます。

色を変えたい場合

  • app：backgroundTint の属性を持つXMLで
<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が述べたように、アイコンの色を変更したい場合は、

Android:tint="@color/white"
878
Marko

Vijet Badigannavarの答えは正しいですが、ColorStateListの使用は通常複雑であり、彼はその方法を教えてくれませんでした。通常Viewの色を通常の状態と押された状態で変更することに集中するため、詳細を追加します。

  1. 通常の状態でFABの色を変更する場合は、次のように書くことができます。

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

  2. 押された状態でFABの色を変更したい場合は、Design Support Library22.2.1に感謝します。

    mFab.setRippleColor(your color in int);

    この属性を設定することにより、FABを長押しすると、タッチポイントに色の波紋が現れ、FABの表面全体に現れます。通常の状態ではFABの色は変わらないことに注意してください。 API 21（Lollipop）より下では、波及効果はありませんが、FABの色は、押すと変わります。

最後に、状態に対してより複雑な効果を実装したい場合は、ColorStateListを深く掘り下げる必要があります。これについて説明するSOの質問があります。 ColorStateListをプログラムで作成する方法は？ 。

UPDATE：@Kaitlynのコメントをありがとう。 backgroundTintを色として使用してFABのストロークを削除するには、xmlでapp:borderWidth="0dp"を設定できます。

222
ywwynm

Vasil Valchev がコメントの中で述べているように、見た目よりも単純ですが、私の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"
101
HenriqueMS

あなたがアプリを使用してFABの色を変更しようとすると、いくつか問題があります。

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

そしてコードで色を設定します。

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

ただ使う

app:backgroundTint="@color/colorPrimary"

使わないで

Android:backgroundTint="@color/colorPrimary"
41
Ashana.Jackol

FABはあなたのcolorAccentに基づいて色づけされています。

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>
26
tachyonflux
mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));
16
Reza Isfandyari

他の解決策でもうまくいく可能性があります。これは、このような場合に広く適用できるという利点を持つ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>
11
Robin Davies

この文書では、デフォルトで@ color /アクセントを使用することを推奨しています。しかし、コードを使ってそれをオーバーライドできます

fab.setBackgroundTintList(ColorStateList)

また覚えて、 

このライブラリを使用するための最低限のAPIバージョンは15ですので、更新する必要があります。あなたがそれをしたくない場合は、カスタムドロアブルを定義してそれを飾る必要があります！

9
Vijet Badigannavar
 <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"
5
Gavine Joyce

オートコンプリートに感謝します。私はいくつかのヒットと試行の後にラッキーになりました：

    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"

これはデザインライブラリ23.1.0を使用したAPIバージョン17で動作しました。

5
Gaurav Kumar Gupta

私は同じ問題を抱えていて、それがすべて私の髪をひったくっています。ありがとうございます https://stackoverflow.com/a/35697105/5228412

私たちにできること..

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

それは私のためにうまく働き、ここに到達する他の人たちのために願っています。

4
Purvik Rana

データバインディングを使用する場合 あなたはこのようなことをすることができます：

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

とても簡単な例を作った example

2
Jan Málek

私はこのようにしました Android：background = "@ color/colorAccent" 私はただフォルダーresに行き、次にフォルダーの値をクリックし、次にcolors.xmlのcolors.xmlをクリックしますcolorAccentの色とAndroidで呼び出す：背景とその完了 

1
sana sajjad

欠けている点は、ボタンに色を設定する前に、この色に必要な値に取り組むことが重要であるということです。だから、あなたは値>色に行くことができます。デフォルトのものが見つかりますが、それらをコピーして貼り付け、色と名前を変更して色を作成することもできます。それから...（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
Nidia F.

下の線を使用してフローティングアクションボタンの背景色を変更する

app:backgroundTint="@color/blue"

フローティングアクションボタンアイコンの色を変更する

Android:tint="@color/white"
1
Kishore Reddy

add colors in color.xml file

color.xmlファイルに色を追加してから、このコード行を追加します... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));

0
Progga Ilma

MaterialTheme およびmaterial componentsFloatingActionButton デフォルトではstyles.xml属性colorSecondaryで設定された色を取ります。

  • Xmlでapp:backgroundTint属性を使用できます。
<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>
  </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>
  </style>
0
Gabriele Mariotti

フローティングアクションボタン のマテリアル1.1.0における新しいテーマ属性のマッピング

あなたのアプリのテーマでは：

  • ColorABondaryを設定して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>
0
luca992

コード floating.setBackgroundTintList（getResources（）。getColorStateList（R.color.vermelho））を変更する場合に使用できます。

0
DiegoS