Androidマテリアルデザインボタンのスタイル


308

マテリアルデザインのボタンのスタイルがわかりません。使用方法セクションの下にある「強制停止」ボタンと「アンインストール」ボタンのように、添付のリンクのようなカラフルな隆起ボタンを入手したいのですが。利用可能なスタイルはありますか、それとも定義する必要がありますか?

http://www.google.com/design/spec/components/buttons.html#buttons-usage

デフォルトのボタンスタイルが見つかりませんでした。

例:

 <Button style="@style/PrimaryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate"
    android:id="@+id/button3"
    android:layout_below="@+id/editText5"
    android:layout_alignEnd="@+id/editText5"
    android:enabled="true" />

追加してボタンの背景色を変更しようとすると

    android:background="@color/primary"

タッチアニメーション、影、丸みを帯びた角など、すべてのスタイルがなくなります。


これは、カスタマイズされたボタンangrytools.com/android/button
Kharak

回答:


750

提供されている他の回答は使用しないので、回答を追加します。

Support Library v7では、すべてのスタイルが実際に定義されており、すぐに使用できます。標準ボタンでは、これらのスタイルをすべて使用できます。

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

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

Widget.AppCompat.Button.Coloredここに画像の説明を入力してください

Widget.AppCompat.Button.Borderless ここに画像の説明を入力してください

Widget.AppCompat.Button.Borderless.Coloredここに画像の説明を入力してください


したがって、質問に答えるために、使用するスタイルは

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

色を変える方法

アプリ全体:

すべてのUIコントロール(だけではなく、ボタンでなく、フローティング操作ボタン、チェックボックスなど)の色は、属性によって管理されてcolorAccent説明したように、ここで。このスタイルを変更して、独自の色をテーマ定義に適用できます。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

特定のボタンの場合:

特定のボタンのスタイルを変更する必要がある場合は、上記の親スタイルの1つを継承して、新しいスタイルを定義できます。以下の例では、背景とフォントの色を変更しました:

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

次に、この新しいスタイルをボタンに適用するだけです:

android:theme="@style/AppTheme.Button"

レイアウトにデフォルトのボタンデザインを設定するには、次の行をstyles.xmlテーマに追加します。

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

@style/btnボタンのテーマはどこですか。これは、特定のテーマを持つレイアウトのすべてのボタンのボタンスタイルを設定します


6
これは今のところ最善の方法だと思います。
xsorifc28

5
Kitkatデバイスでテストしましたか?
maohieng 2016年

14
colorButtonNormalAndroid 4.1.2ではattrが機能しません。ボタンの色はまったく設定できません(ボタンのandroid:backgroundマテリアルスタイルが壊れます)。
Konstantin Konopko 16

2
@YoannHercouetどのAndroidバージョンでこれらの画像を作成しましたか?私のAndro 4.1.2および4.4.2では、style = ".. AppCompat.Button"のボタンが発生しません。
Grzegorz Dev

5
@konopko私と同じように、後者style=""Android:theme=""変更する代わりに、問題を修正して使用しました
John Snow

84

最も簡単なソリューション


手順1:最新のサポートライブラリを使用する

compile 'com.android.support:appcompat-v7:25.2.0'

手順2:AppCompatActivityを親アクティビティクラスとして使用する

public class MainActivity extends AppCompatActivity

ステップ3:レイアウトXMLファイルでアプリの名前空間を使用する

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

手順4:ボタンの代わりにAppCompatButtonを使用する

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

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


7
あなたは指定する必要はありませんandroid.support.v7.widget.AppCompatButtonビルドツールが自動的に指定したときにすることを使用しているためButton
マーク

2
自動的に有効/無効になりますか?それともスタイルをもう一度指定する必要がありますか?
Sundeep1501 2018

これにより、プレロリポップの状態リストが削除され、クリック効果のないボタンが表示されます
Florian Walther

Android Pで動作しているtextColorようですが、無効状態のテキストの色が上書きされます。
l33t

@ Sundeep1501 Widget.MaterialComponents.Button.OutlinedButton少なくとも、に変更されませんでした。
Dr.jacky

66

私があなたを正しく理解しているなら、あなたはこのようなことをしたいです:
ここに画像の説明を入力してください

そのような場合、それを使用するだけで十分です:

<item name="android:colorButtonNormal">#2196f3</item>

または21未満のAPIの場合:

<item name="colorButtonNormal">#2196f3</item>

Material Themeチュートリアルの使用に加えて。

アニメーションバリアントはこちらです。


1
@androiddeveloperのGitHubにサンプルプッシュ、コアの事はここにある- github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/...
AlexKorovyansky

古いバージョンでは互換ライブラリを使用する必要があると思います。
AlexKorovyansky 2014年

2
ありませんが、APIが21以上の場合に設定できます。私は方法を見つけましたが、それを行うための最良の方法がわかりません。
Android開発者、

4
このアプローチで複数の色を使用できますか?一度に1つしか許可されていないようです。
gerfmarquez 2015

2
@gerfmarquez Uはtkがボタンごとに異なるスタイルを持つ必要がある
KISHORE_ZE

39

これが私が欲しかったものを手に入れる方法です。

まず、ボタンを作成しました(内styles.xml):

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

ドローアブルとしてのボタンの波紋と背景primary_round.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

これは私が探していた波及効果を追加しました。


3
フレームワークアセットに一致させるには、コーナー半径を2 dpにする必要があります。さらに、translationZをXMLで設定しないでください。デフォルトの高度、minWidth、minHeight、またはマージンをオーバーライドする必要はありません。
alanv 2014年

カスタムスタイルが適用されると、デフォルトのマージンは0になります。これは、何らかの理由でプロパティが継承されていないためです。
xsorifc28 2014年

3
ああ、親のスタイルがないことに気づかなかった。parent = "Widget.Material.Button"を追加するか、カスタムスタイルの作成を完全にスキップして、ボタン自体に背景を設定する必要があります。
alanv 2014年

ああ!私はそれが存在することを知りませんでした、どのドキュメントでもそれに遭遇していません。やってみます。
xsorifc28 2014年

しかし、カスタムスタイルなしではどうすればよいかわかりません。例を見せていただけますか?
xsorifc28 2014年

33

2018年11月のAndroid Material Componentsの安定版リリースに伴い、Googleはマテリアルコンポーネントを名前空間からに移動しandroid.support.designましたcom.google.android.material
Material Component Libraryは、AndroidのDesign Support Libraryに代わるものです。

依存関係を追加しますbuild.gradle

dependencies { implementation com.google.android.material:material:1.0.0 }

次にをMaterialButtonレイアウトに追加します。

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

ここで完全なドキュメントAPIをここで確認できます

背景色を変更するには、2つのオプションがあります。

  1. backgroundTint属性を使用します。

何かのようなもの:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. それは私の意見では最良の選択肢になるでしょう。デフォルトのスタイルからいくつかのテーマ属性を上書きしたい場合は、新しいmaterialThemeOverlay属性を使用できます。

何かのようなもの:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

オプション#2には 'com.google.android.material:material:1.1.0'.

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

OLDサポートライブラリ:

新しいサポートライブラリ28.0.0では、デザインライブラリにが含まれていMaterialButtonます。

このボタンをレイアウトファイルに追加するには、次のようにします。

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

デフォルトでは、このクラスはボタンのテキストの色に白を使用し、ボタンの背景色にはテーマのアクセントカラーを使用します。

次の属性を使用してボタンをカスタマイズできます。

  • app:rippleColor:ボタンのリップル効果に使用する色
  • app:backgroundTint:ボタンの背景に色合いを適用するために使用されます。ボタンの背景色を変更する場合は、背景の代わりにこの属性を使用します。

  • app:strokeColor:ボタンのストロークに使用される色

  • app:strokeWidth:ボタンのストロークに使用される幅
  • app:cornerRadius:ボタンのコーナーに使用される半径を定義するために使用されます

android.support.design.button.MaterialButtonがコンパイルされていないようです
IgorGanapolsky

3
@IgorGanapolskyそうですね。安定版リリースで回答を更新しました。
Gabriele Mariotti

20

これは、アプリ全体でボタンのスタイルを一貫して適用するのに役立つサンプルです。

以下は、特定のスタイルで使用したテーマのサンプルです。

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

これは、res / drawable-v21フォルダー内のボタンの形状と効果を定義する方法です...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

2 dpコーナーは、マテリアルテーマとの整合性を保つためのものです。


6
下位互換性?
Skynet

申し訳ありませんが返答が遅れていますが、テーマがかなり遅れて導入されたため、下位互換性はありません。
samkya

18

android.support.design.button.MaterialButtonGabriele Mariottiが言及した)の横に、

さまざまなスタイルを持ち、以下から拡張さButtonれると呼ばれる別のウィジェットもありcom.google.android.material.button.MaterialButtonますAppCompatButton

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

塗りつぶし、高架Button(デフォルト)ここに画像の説明を入力してください

style="@style/Widget.MaterialComponents.Button"

塗りつぶされた、持ち上げられていないButtonここに画像の説明を入力してください

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

テキストButtonここに画像の説明を入力してください

style="@style/Widget.MaterialComponents.Button.TextButton"

アイコンButtonここに画像の説明を入力してください

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

Buttonアイコン付きのテキスト::ここに画像の説明を入力してください


読む: https : //material.io/develop/android/components/material-button/

新しいMaterialボタンを作成するための便利なクラス。

このクラスは、コンストラクターのボタンの更新されたMaterialスタイルを提供します。ウィジェットは、スタイルフラグを使用せずに、正しいデフォルトのマテリアルスタイルを表示します。


1
どうやって色を変えられるか知っていますか?
Daniel Gomez Rico

1
app:backgroundTintドキュメントapp:backgroundTintModeから。
ʍѳђઽ9ท

無効状態の色を割り当てる方法
Zaid Mirza

6

私はたくさんの答えとサードパーティのライブラリを試してみましたが、境界を維持せず、ロリポップに波及効果をもたらしながら、プレロリポップに効果をもたらしました。これがいくつかの回答を組み合わせた私の最終的な解決策です(グレースケールの色深度のため、ボーダー/浮き出しはgifでうまくレンダリングされません):

ロリポップ

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

プレロリポップ

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

build.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-v21 / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

drawable / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

アクティビティのonCreate

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });

完全な例を探していましたが、これが高位投票されていないことに驚きました-ありがとう。
XMAN、2018

4

1)xmlドローアブルを定義することにより、角の丸いボタンを作成できます。また、半径を増減して、ボタンの角の丸みを増減できます。このxmlドローアブルをボタンの背景として設定します。

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

角の丸いボタン

2)ボタンの状態間のデフォルトの影と影の遷移アニメーションを変更するには、セレクターを定義し、android:stateListAnimatorプロパティを使用してボタンに適用する必要があります。完全なボタンのカスタマイズリファレンス:http : //www.zoftino.com/android-button


1

ボタンの色と波紋の色を簡単に変更できる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"/>

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


1
ライブラリはエラーを生成します:rippleColor has already been defined、一部のユーザーはすでに「問題」で言及しています
SagiLow

0

ビューにZ軸を追加して航空写真を表示したり、デフォルトのシャドウを設定したりできます。この機能はLプレビューで提供され、リリース後に利用可能になります。今のところ、ボタンの背景をこのように見せる画像を追加するだけです


そうですか。私はそれから手動でそれをしなければなりません。ラジアルタッチ効果を追加するにはどうすればよいですか?ボタンのトランジション効果だけですか?
xsorifc28 2014年

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