マテリアルデザインとAppCompatを使用したAndroidのボタンのカラーリング


256

AppCompat今日アップデートが出る前に、Android Lのボタンの色を変更できましたが、古いバージョンではできませんでした。新しいAppCompatアップデートを含めた後、どちらのバージョンでも色を変更できません。ボタンを押すと消えます。ボタンの色を変更する方法を知っている人はいますか?

次の写真は、私が達成したいことを示しています。

望ましい結果を示す画像

白いボタンがデフォルトで、赤いボタンが私が欲しいものです。

これは私が以前にボタンの色を変更するために行っていたものですstyles.xml

<item name="android:colorButtonNormal">insert color here</item>

そしてそれを動的に行うには:

button.getBackground().setColorFilter(getResources().getColor(insert color here), PorterDuff.Mode.MULTIPLY);

また、テーマの親をから@android:style/Theme.Material.Light.DarkActionBarに変更しましたTheme.AppCompat.Light.DarkActionBar


同じことを試しましたが、ボタンの色は何も変わりませんでした。私もandroidを削除しました。属性はサポートライブラリからのものであり、android名前空間の一部ではないためです
Informatic0re

Android 5.0でandroid:colorButtonNormalを使用している場合は機能しますが、下位互換性がないようです
Informatic0re

はい、それは私が経験していたまさにです
mail929

また、アクセントカラーはCheckBoxの色を変更しないこともわかりましたが、古いバージョンでは変更されます
Informatic0re

それに加えて、その動的メソッドに1つ。:)
theapache64

回答:


222

サポートライブラリrev.22(2015年3月13日金曜日)で正式に修正されました。関連するGoogleコードの問題を参照してください:

https://issuetracker.google.com/issues/37008632

使用例

theme.xml:

<item name="colorButtonNormal">@color/button_color</item>

v21 / theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>

17
使い方の例はありますか?1つのボタンに色を設定するにはどうすればよいですか?
複雑化

3
@WindRiderでも問題があります。色を変えてボタンを作成したいのですが。私はスタイルButton.Red、Button.Greenを作成し、すべて親がボタンの基本スタイルと同じです。アイテムcolorButtonNormalを要求された色に設定し、これをボタンのテーマとして設定します。残念ながら、21のボタンに色を付けるだけです。その下では、テーマで定義されたcolorButtonNormalをオーバーライドしません。
dominik4142

71
AppCompat 22.1.1を使用すると、2.3.7、4.4.4、5.1でも1つのボタンだけで機能します。ボタンの設定 android:theme="@style/ColoredButton"、およびstyles.xmlで <style name="ColoredButton" parent="Widget.AppCompat.Button"> <item name="colorButtonNormal">@color/button_yellow</item> </style>
hunyadym

2
@hunyadym、ボタンにテーマを追加すると、何らかの理由でonClickが壊れます。デザインライブラリがより良い方法を提供するまで、これを回避策として分類します。
2015年

3
@gladed:あなたの場合、問題はこのバグのようです:code.google.com/p/android/issues/detail?id
62795#

148

編集(22.06.2016):

元のレスポンスを投稿した後、Appcompatライブラリがマテリアルボタンのサポートを開始しました。この投稿では、浮き出しボタンとフラットボタンの最も簡単な実装を確認できます。

元の答え:

そのAppCompatはボタンをまだサポートしていないため、背景としてxmlを使用できます。そのために、Androidのソースコードを見て、マテリアルボタンのスタイルを設定するための関連ファイルを見つけました。

1-ソースからのマテリアルボタンの元の実装を確認します。

Androidのソースコードでbtn_default_material.xmlをご覧ください。

ファイルをプロジェクトのdrawable-v21フォルダーにコピーできます。ただし、ここでは色属性に触れないでください。変更する必要があるファイルは2番目のファイルです。

drawable-v21 / custom_btn.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

2-元のマテリアルボタンの形状を取得する

ご存知のように、このドローアブルの内部で使用されている形状が、ソースコードのこのファイルにあります

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
<shape android:shape="rectangle">
    <corners android:radius="@dimen/control_corner_material" />
    <solid android:color="?attr/colorButtonNormal" />
    <padding android:left="@dimen/button_padding_horizontal_material"
             android:top="@dimen/button_padding_vertical_material"
             android:right="@dimen/button_padding_horizontal_material"
             android:bottom="@dimen/button_padding_vertical_material" />
</shape>

3-マテリアルボタンの寸法を取得する

そして、このファイルには、ここで見つけることができるファイルから使用されるいくつかの寸法があります。ファイル全体をコピーして、valuesフォルダーに配置できます。これは、すべてのボタンに同じサイズ(マテリアルボタンで使用される)を適用するために重要です。

4-古いバージョン用に別の描画可能なファイルを作成する

古いバージョンの場合は、同じ名前の別のドローアブルが必要です。参照するのではなく、アイテムを直接インラインに配置しています。それらを参照することをお勧めします。しかし、最も重要なことは、マテリアルボタンの元の寸法です。

drawable / custom_btn.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/PRESSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/FOCUSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/NORMAL_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

結果

ボタンはLollipopデバイスに波及効果をもたらします。古いバージョンでは、波及効果を除いてまったく同じボタンが使用されます。ただし、さまざまな状態のドローアブルを提供するので、それらは(古い方法として)タッチイベントにも応答します。


4
はい、正確に。すべてのボタンに同じ背景を使用し、これを何度も追加したくない場合は、styles.xmlでボタンのスタイルを定義します <style name = "ButtonStyle" parent = "android:Widget.Button"> < item name = "android:background">​​ @ drawable / custom_btn </ item> </ style> とテーマにボタンスタイルを追加 <item name = "android:buttonStyle"> @ style / ButtonStyle </ item>
eluleci

1
21歳以前のこのボタンに標高を追加するにはどうすればよいですか?私はボタンの下に影のある新しい形状を追加する必要があることを理解していますが、正確にどこに配置する必要がありますか?
xakz

7
これがそのままではサポートされていないことは非常に不愉快です
Sam

39
完全にあなたと同意します。ボタンは主に使用されるウィジェットですが、マテリアルのサポートライブラリには含まれていません。彼らは何を考えていたのだろう。
eluleci 2015年

1
また、あなたのガイドに従って、背景がまったく表示されないようです...
JMRboosties

111

これはAppCompatライブラリのv23.0.0で強化され、次のようなテーマが追加されています。

Widget.AppCompat.Button.Colored

まだの場合は、まずappCompat依存関係を含めます

compile('com.android.support:appcompat-v7:23.0.0') {
    exclude group: 'com.google.android', module: 'support-v4'
}

アプリ互換のv23を使用する必要があるので、SDK-v23もターゲットにする必要があります。

    compileSdkVersion = 23
    targetSdkVersion = 23

あなたの values/theme

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

あなたの values/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

あなたの values-v21/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

ボタンのテーマはに基づいているので、ボタンWidget.AppCompat.Button.Coloredのテキストの色はデフォルトで白です!

ボタンを無効にすると問題があるようです。ボタンの色は薄い灰色に変わりますが、テキストの色は白のままです!

これを回避するには、ボタンのテキストの色を白に設定します。上記のスタイルで行ったように。

これで、ボタンを定義してAppCompatに残りの作業を任せることができます。

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

無効な状態 無効状態

有効な状態 有効な状態

編集:

たす <Button android:theme="@style/BrandButtonStyle"/>


19
それが今それを行うための最良の方法です!を使用して、個々のボタンのスタイルを使用することもできます<Button android:theme="@style/BrandButtonStyle"/>。それはなければならないtheme属性とないstyle属性。
mohlendo

7
@Muhammad Alfaifiこれのサンプルプロジェクトまたは要点はありますか?私はクリーンなプロジェクトを作成しましたが、機能しません:github.com/Bresiu/ThemeTest。アクセントカラー付きのLolipopボタンの色とAPI v16では、ボタンは灰色のままです:i.imgur.com/EVwkpk2.png
Bresiu

4
これは、android:theme属性を指定したときにのみ機能しました。属性スタイルをボタンタグで機能させることができませんでした。
レイハンター

8
v23.1 libを使用すると、これは正しく機能しませんでした。テーマ全体に設定しようとすると、アクセントカラーが定義されたものではなく常にbgとして表示されました
Patrick Favre

3
ここの同じ問題、v23.1では、無効なボタンは有効なボタンと同じ色です。とてもイライラします。誰かがこれを理解していますか?
AhmedW 2016年

63

Android Support Library 22.1.0で、GoogleはButton色合いを認識させました。したがって、ボタンの背景色をカスタマイズする別の方法は、backgroundTint属性を使用することです。

例えば、

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

1
最後に!:22.1リリースに関するブログ記事android-developers.blogspot.no/2015/04/...
GuillermoMP

5
ドキュメンテーションは言う:「これはレイアウトでボタンを使用するときに自動的に使用されます。カスタムビューを作成するときにこのクラスを手動で使用する必要があるだけです。」developer.android.com/reference/android/support/v7/widget/…これは、すべてのレイアウトとJavaコードを手動で変更する必要がないことを意味しますか?
ステファン

@Stephaneいいえ、レイアウトを変更する必要があります。chris.banes.me/2015/04/22/support-libraries-v22-1-0
アントンホロビン2015

驚くばかり!今、ToggleButtonsの背景を変更できるAppCompatToggleButtonはありますか?多分私はコードを盗用することができます...
swooby

19
残念ながら、これはAPI 21以降でのみ機能します。AppCompatライブラリを使用していても、android:backgroundTint属性はpre-Lollipopでは機能しません。ロリポップ前では、テーマのcolorButtonNormalのみが機能します。
Timur_C

42

色付きのボタンをサポートするには、最新のAppCompatライブラリ(> 23.2.1)を以下で使用します。

膨張-XML

AppCompatウィジェット:

android.support.v7.widget.AppCompatButton

AppCompatスタイル:

style="@style/Widget.AppCompat.Button.Colored"

NB!xmlでカスタムカラーを設定するには、次のapp代わりにattr:を使用します。android

(使用するalt+enterか使用することxmlns:app="http://schemas.android.com/apk/res-auto"を宣言app

アプリ:backgroundTint = "@ color / your_custom_color"

例:

<android.support.v7.widget.AppCompatButton
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/your_custom_color"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"     
     android:text="Colored Button"/>

またはプログラムで設定-JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));

あなたのJavaコードは私のために働いた。また、Muhammad Alfaifiの回答は、ボタンのテキスト色の設定に役立ちました。
Micro

プログラムで色合い(背景ではなく)を設定する簡単な方法はありますか?
ボールト

素晴らしい!4.4.4でも動作します!そしてセレクター状態もかなり良く維持されています!
sud007 2016年

ドキュメントごと:これは、レイアウトでボタンを設定するときに自動的に使用されます。カスタムビューを作成するときにAppCompatButtonを指定する必要があるだけです。
gMale

興味深いことに、XMLの変更はフラグメントでは完全に機能しましたが、アクティビティレイアウトでは機能しませんでした。アクティビティボタンはcolorAccentのみを使用しました。ただし、プログラムバージョンは機能しました。
レオン

25

最新のサポートライブラリを使用すると、ちょうどあなたの活動を継承することができAppCompatActivity、それはあなたの膨らまますので、ButtonなどAppCompatButtonとの使用であなたのレイアウト上のすべての単一のボタンのスタイルの色に機会を与えるandroid:theme="@style/SomeButtonStyle"。ここで、SomeButtonStyle次のとおりです。

<style name="SomeButtonStyle" parent="@android:style/Widget.Button">
    <item name="colorButtonNormal">@color/example_color</item>
</style>

2.3.7、4.4.1、5.0.2で私のために働いた


ありがとう!!! EditTextスタイルを更新する必要があるため、「Widget.AppCompat.EditText」の親の値を変更しました。
ファンサラビア、

3
ありがとう、私のためにも働いた。使用android:themeしないでくださいstylecolorControlHighlightおよびを追加することもできcolorControlActivatedます。
レイチェル

動作し
ません

1
Theme.AppCompat.Light代わりに@AndreyUglevを使用してください。
Artem 2015

こんにちは、目的の色を変更しますが、影を削除します。
Amio.io 2015

16

あなたが以下のスタイルが欲しいなら

ここに画像の説明を入力してください

このスタイルをボタンに追加

style="@style/Widget.AppCompat.Button.Borderless.Colored"

このスタイルが欲しいなら

ここに画像の説明を入力してください

コードの下に追加

style="@style/Widget.AppCompat.Button.Colored"

1
compile 'com.android.support:appcompat-v7:23.1.0'追加する必要があります。
Pratik Butani 2015年

1
しかし、問題は、さまざまな色のマテリアルボタンをどのようにして、すべてがテーマの主要な色を持たないようにするかです。
アポストロフィックス2016年

15

答えはテーマにありますはなくスタイルです

問題は、ボタンの色がテーマのcolorButtonNormalに固執することです。私は運が悪いのに多くの異なる方法でスタイルを変えようとしました。ボタンのテーマを変更しました

colorButtonNormalとcolorPrimaryでテーマを作成します。

<style name="ThemeAwesomeButtonColor" parent="AppTheme">
    <item name="colorPrimary">@color/awesomePrimaryColor</item>
    <item name="colorButtonNormal">@color/awesomeButtonColor</item>
</style>

このテーマをボタンで使用

<Button
        android:id="@+id/btn_awesome"
        style="@style/AppTheme.Button"
        android:theme="@style/ThemeAwesomeButtonColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_awesome"/>

「AppTheme.Button」は、ボタンのスタイルを拡張するものであればどのようなものでもかまいません。ここでは、テキストの色に原色を使用しています。

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    ...
    <item name="android:textColor">?attr/colorPrimary</item>
    ...
</style>

また、マテリアルデザインと互換性のある任意の色のボタンを取得できます。


スタイルに追加できる他の属性は何ですか。
Sagar Nayak

4

ボタンの色と波紋の色を簡単に変更できるAndroidライブラリを作成しました

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

別の色を使用するすべてのボタンにスタイルを作成する必要はなく、色をランダムにカスタマイズできます


4

これは、android + 4.0のappcompat-v7:22.2.0で私に働きます

あなたのstyles.xmlで

<style name="Button.Tinted" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">YOUR_TINT_COLOR</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="android:textColor">@android:color/white</item>
</style>

レイアウトファイル内

<Button
    android:id="@+id/but_next"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/but_continue"
    android:theme="@style/Button.Tinted" />

こんにちは、目的の色を変更しますが、影を削除します。
Amio.io 2015

こんにちは、私は見ることができます。今ではそれは適切な動作です。
Amio.io 2015

Javaでこれを行うにはどうすればよいですか?
Micro

@MicroRは上記の答えを確認してください。
ingyesid 2016年

4

レイアウト:

<android.support.v7.widget.AppCompatButton
  style="@style/MyButton"
  ...
  />

styles.xml:

<style name="MyButton" parent="Widget.AppCompat.Button.Colored">
  <item name="backgroundTint">@color/button_background_selector</item>
  <item name="android:textColor">@color/button_text_selector</item>
</style>

color / button_background_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#555555"/>
    <item android:color="#00ff00"/>
</selector>

color / button_text_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#888888"/>
    <item android:color="#ffffff"/>
</selector>

3

ImageButtonhere を使用する場合は、次のようにします。

style.xmlで:

<style name="BlueImageButton" parent="Base.Widget.AppCompat.ImageButton">
    <item name="colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

v21 / style.xml内:

<style name="BlueImageButton" parent="Widget.AppCompat.ImageButton">
    <item name="android:colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

次に、レイアウトファイルで:

<android.support.v7.widget.AppCompatImageButton
    android:id="@+id/my_button"
    android:theme="@style/BlueImageButton"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_gravity="center_vertical"
    android:src="@drawable/ic_check_black_24dp"
    />

これは役に立ちました...ボタンウィジェットのスタイルではなく、テーマとしてボタンスタイルを適用することに注意することが重要だと思います。私はそれをstyle = "@ style / BlueImageButton"の下に適用しましたが、機能しませんでした
velval

3

あなたとスタイルソリューションを使用する場合colorButtonNormal、継承することを忘れないでくださいWidget.AppCompat.Button.Colored波及効果が働いているので;)

お気に入り

<style name="CustomButtonStyle" parent="Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@android:color/white</item>
</style>

2

AppCompatButtonを使用した別の簡単なソリューション

<android.support.v7.widget.AppCompatButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/red"
     android:text="UNINSTALL" />

2

使用する:

android:backgroundTint="@color/customColor"

あるいは :

android:background="@color/customColor"

ボタンにカスタムカラーを与えます。


1

「フラット」マテリアルボタンのみが必要な場合は、こちらで説明するように、selectableItemBackground属性を使用して背景をカスタマイズできます


「色合い」の色や選択した色を変更したくない場合、これは間違いなく、色付きのボタンでフィードバックを得るための簡単な解決策です。ありがとう!
theblang 2015


1

私にとっての問題は、Android 5.0ではandroid:colorButtonNormal影響がなく、実際にはテーマのアイテム(などandroid:colorAccent)がなかったことですが、たとえばAndroid 4.4.3では影響がありました。プロジェクトは、で構成されていたcompileSdkVersiontargetSdkVersion@Muhammad Alfaifiがsugesstedように私はすべての変更を行いましたが、最終的に、私は問題があったことに気づいたので、22にbuildToolsVersion更新されませんでした。23.0.1に変更する、すべてがほぼ正常に機能し始めます。今android:colorButtonNormalでも、効果はありませんが、少なくともボタンは反応しますandroid:colorAccent

このヒントが誰かを助けることを願っています。注:ボタンにandroid:theme=[...]も効果がないため、スタイルをボタンに直接適用しました。


あなたは、ほぼ新しい@スタイル/ Widget.AppCompat.Button.Coloredを使用するには、どのように100%正しい方法を見つけました;) -この回答を参照stackoverflow.com/a/35811157/19733911
sosite

1

これを実現する1つの方法は、スタイルをポイントするだけで、アプリ内のすべてのボタンに同じテーマを設定することはできません。
themes.xmlにテーマを追加する

    <style name="Theme.MyApp.Button.Primary.Blue" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/someColor</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

今styles.xmlに追加

    <style name="MyApp.Button.Primary.Blue" parent="">
        <item name="android:theme">@style/Theme.MyApp.Button.Primary.Blue</item>
    </style>

レイアウトでボタンのスタイルをポイントするだけです

    <Button
        ...
        style="@style/MyApp.Button.Primary.Blue"
        ...  />

1

更新

使用設計支援ライブラリ(23.2.0)およびappcompatwidgets 以下のように

Android Support Library 22.1の場合

これは、レイアウトをインフレートするときに自動的に行われます-ButtonをAppCompatButtonに、TextViewをAppCompatTextViewに置き換えるなどして、それぞれが着色をサポートできるようにします。このリリースでは、これらの色合い対応ウィジェットが一般に利用可能になり、サポートされているウィジェットの1つをサブクラス化する必要がある場合でも、色合いを維持し続けることができます。

色合いを認識するウィジェットの完全なリスト:

AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView

プレロリポップデバイスのマテリアルデザイン

AppCompat(別名ActionBarCompat)は、Gingerbreadで実行されているデバイス用のAndroid 4.0 ActionBar APIのバックポートとして始まり、バックポートされた実装とフレームワーク実装の上に共通のAPIレイヤーを提供しました。AppCompat v21は、Android 5.0で最新のAPIと機能セットを提供します



1

Widget.AppCompat.ButtonBase.Widget.AppCompat.Button.ColoredなどのAppCompatスタイルを使用する場合などの、サポートライブラリの互換ビューでこれらのスタイルを使用する必要があります。

以下のコードはpre-lolipopデバイスでは機能しません。

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

AppCompatButtonを使用して、AppCompatスタイルを有効にする必要があります。

<android.support.v7.widget.AppCompatButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

2
XMLレイアウトを拡張するときに、アプリ互換ウィジェットが自動的に使用されませんか?私ImageViewは置き換えられると信じAppCompatImageViewており、対応するAppCompatバージョンを持つすべてのウィジェットと同じでなければなりません。
d.aemon 2017

いいえ、最後のターゲットバージョンをターゲットにしない場合は、android.support.v7.widget.AppCompatImageView明示的に定義する必要があります。
farukcankaya 2017

last target version@power はどういう意味ですか?
d.aemon 2017

1

私はこれを使います。リップルエフェクトとボタンクリックシャドウ機能。

style.xml

<style name="Button.Red" parent="Widget.AppCompat.Button.Colored">
    <item name="android:textColor">@color/material_white</item>
    <item name="android:backgroundTint">@color/red</item>
</style>

レイアウト上のボタン:

<Button
        style="@style/Button.Red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/close"/>

0

カスタムボタンのスタイルを変更したくなかったのですが、残念ながら機能しなくなりました。

私のアプリのminSdkVersionは9で、以前はすべて動作していました。

理由はわかりませんが、androidを削除したため、buttonStyleの前に再び動作するようです

今=作業中:

<item name="buttonStyle">@style/ButtonmyTime</item>

前=灰色のマテリアルボタン:

<item name="android:buttonStyle">@style/ButtonmyTime</item>

私のボタンは非常に平らで、すべてのAndroidバージョンで同じに見えるはずなので、私はnewver androidバージョン用のspezialフォルダーを持っていません。

「android:」を削除する必要があった理由を誰かが教えてくれるかもしれません。ImageButtonはまだ「android:」で機能しています。

<item name="android:imageButtonStyle">@style/ImageButtonmyTimeGreen</item>

0

2日後に回答を探したところ、ボタンテーマはAPI <21で機能しませんでした。

私の唯一の解決策は、ベースアプリのテーマ "colorButtonNormal"だけでなく、次のようなビューのbackgroundTintで着色するAppCompatButtonをオーバーライドすることです。

public class AppCompatColorButton extends AppCompatButton {

    public AppCompatColorButton(Context context) {
        this(context, null);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.support.v7.appcompat.R.attr.buttonStyle);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        if (TintManager.SHOULD_BE_USED) {
            setSupportBackgroundTintList(createButtonColorStateList(getContext(), attrs, defStyleAttr));
        }
    }

    static final int[] DISABLED_STATE_SET = new int[]{-android.R.attr.state_enabled};
    static final int[] FOCUSED_STATE_SET = new int[]{android.R.attr.state_focused};
    static final int[] PRESSED_STATE_SET = new int[]{android.R.attr.state_pressed};
    static final int[] EMPTY_STATE_SET = new int[0];

    private ColorStateList createButtonColorStateList(Context context, AttributeSet attrs, int defStyleAttr) {
        final int[][] states = new int[4][];
        final int[] colors = new int[4];
        int i = 0;

        final int themeColorButtonNormal = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        /*TypedArray a = context.obtainStyledAttributes(attrs, new int[] { android.R.attr.backgroundTint }, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(0, themeColorButtonNormal);*/
        TypedArray a = context.obtainStyledAttributes(attrs, android.support.v7.appcompat.R.styleable.View, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(android.support.v7.appcompat.R.styleable.View_backgroundTint, themeColorButtonNormal);
        a.recycle();
        final int colorControlHighlight = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorControlHighlight);

        // Disabled state
        states[i] = DISABLED_STATE_SET;
        colors[i] = ThemeUtils.getDisabledThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        i++;

        states[i] = PRESSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        states[i] = FOCUSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        // Default enabled state
        states[i] = EMPTY_STATE_SET;
        colors[i] = colorButtonNormal;
        i++;

        return new ColorStateList(states, colors);
    }
}

次に、次のようにボタンの色を定義できます。

<com.example.views.AppCompatColorButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#ffff0000"
            app:backgroundTint="#ffff0000"
            android:text="Button"
            android:textColor="@android:color/white" />

0

このSOの答えは私が答えに到達するのに役立ちましたhttps://stackoverflow.com/a/30277424/3075340

このユーティリティメソッドを使用して、ボタンの背景の色合いを設定します。それはロリポップ前のデバイスで動作します:

// Set button background tint programmatically so it is compatible with pre-lollipop devices.
public static void setButtonBackgroundTintAppCompat(Button button, ColorStateList colorStateList){
    Drawable d = button.getBackground();
    if (button instanceof AppCompatButton) {
        // appcompat button replaces tint of its drawable background
        ((AppCompatButton)button).setSupportBackgroundTintList(colorStateList);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Lollipop button replaces tint of its drawable background
        // however it is not equal to d.setTintList(c)
        button.setBackgroundTintList(colorStateList);
    } else {
        // this should only happen if
        // * manually creating a Button instead of AppCompatButton
        // * LayoutInflater did not translate a Button to AppCompatButton
        d = DrawableCompat.wrap(d);
        DrawableCompat.setTintList(d, colorStateList);
        button.setBackgroundDrawable(d);
    }

}

コードでの使用方法:

Utility.setButtonBackgroundTintAppCompat(myButton,
ContextCompat.getColorStateList(mContext, R.color.your_custom_color));

このように、背景の色合いだけを変更したい場合は、ColorStateListを指定する必要はありませんが、きれいなボタンの効果を維持したいだけです。


0

私は私のボタンのテーマに設定android:textColor@null、それが役立ちます。

styles.xml

<style name="Button.Base.Borderless" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:textColor">@null</item>
</style>

some_layout.xml

<Button
    style="@style/Button.Base.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hint" />

今、ボタンのテキストの色がさcolorAccentで定義されていますAppTheme

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="borderlessButtonStyle">@style/Button.Base.Borderless</item>
    <item name="alertDialogTheme">@style/AlertDialog</item>
</style>

0

kotlinを使用している場合、MaterialButtonのすべての属性がサポートされていることがわかります。android:background属性は使用しないでください。MaterialButtonは独自の背景のドローアブルを管理します。新しい背景を設定すると、Materialボタンが無効になっている色は、導入する新しい属性が適切に機能することを保証できなくなります。デフォルトの背景が変更された場合、マテリアルボタンは明確に定義された動作を保証できません。 MainActivity.ktで

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        buttonClick.setOnClickListener {
            (it as MaterialButton).apply {
                backgroundTintList = ColorStateList.valueOf(Color.YELLOW)
                backgroundTintMode = PorterDuff.Mode.SRC_ATOP
            }
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonNormal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Material Button Normal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:text="Material Button Background Red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonNormal" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTintMode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:backgroundTintMode="multiply"
        android:text="Tint Red + Mode Multiply"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTint" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Click To Change Background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTintMode" />
</androidx.constraintlayout.widget.ConstraintLayout>

リソース:マテリアルボタンの色の変更の例


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.