web-dev-qa-db-ja.com

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

素材デザインのボタンスタイルを混同しています。添付のリンクにあるように、使用法のセクションの下に表示されている「強制停止」ボタンと「アンインストール」ボタンのように、色鮮やかなボタンが表示されます。利用可能なスタイルはありますか、またはそれらを定義する必要がありますか？

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"

タッチアニメーション、影、角の丸みなど、すべてのスタイルが消えます。

androidbuttonmaterial-designandroid-5.0-lollipop
268
xsorifc28

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

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： enter image description here

Widget.AppCompat.Button.Colored： enter image description here

Widget.AppCompat.Button.Borderlessenter image description here

Widget.AppCompat.Button.Borderless.Colored： enter image description here

質問に答えるために、使用するスタイルはそれ故にです。

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

色を変える方法

アプリ全体の場合：

すべてのUIコントロール（ボタンだけでなく、フローティングアクションボタン、チェックボックスなど）の色も、 here で説明されているように属性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はあなたのボタンテーマです。これは、特定のテーマを持つレイアウト内のすべてのボタンのボタンスタイルを設定します。

667
Yoann Hercouet

最も簡単な解決策

ステップ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：Buttonの代わりに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"/>

enter image description here

78
Ehtesham Hasan

私があなたを正しく理解しているならば、あなたはこのようなことをしたいです：
enter image description here

そのような場合は、使用するだけで十分です。

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

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

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

材料テーマチュートリアルを使う に加えて。

アニメーションの変形は ここ です。

62
AlexKorovyansky

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

まず、ボタンを作りました（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>

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

37
xsorifc28

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

これは私が特定のスタイルで使用したサンプルテーマです。

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

2dpコーナーは、それをMaterialテーマと一致させるためのものです。

20
samkya

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’ }

それから：

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

完全なドキュメント hereおよび APIはこちら を確認できます。

古い：

新しい Support Library 28.0.0-alpha1リリース により、デザインライブラリにMaterial Buttonが追加されました。

あなたは私たちのレイアウトファイルにこのボタンを追加することができます：

<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：ボタンの背景に濃淡を付けるために使用されます。ボタンの背景色を変更したい場合は、backgroundの代わりにこの属性を使用してください。

  • app:strokeColor：ボタンストロークに使われる色

  • app:strokeWidth：ボタンストロークに使用される幅
  • app:cornerRadius：ボタンの角に使われる半径を定義するために使われます
11
Gabriele Mariotti

Android.support.design.button.MaterialButton（Gabriele Mariottiによって言及された）のほかに、

com.google.Android.material.button.MaterialButton という別のButtonウィジェットもあります。これはスタイルが異なり、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（デフォルト） ： enter image description here 

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

満ちていて晴れていないButton： enter image description here 

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

テキストButton： enter image description here 

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

アイコンButton： enter image description here 

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

アイコン付きのテキストButton： ： enter image description here

お読みください： https://material.io/develop/Android/components/material-button/

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

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

9
ʍѳђઽ૯ท

私はたくさんの答えとサードパーティのライブラリを試してみましたが、ロリポップに波及効果がありながら、境界線を維持してロリポップ前の効果を上げている人はいませんでした。これがいくつかの答えを組み合わせた私の最終的な解決策です（ボーダー/レイズはグレースケールの色深度のためにGIFではうまくレンダリングされません）。

ロリポップ

enter image description here

プリロリポップ

enter image description here

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;
        }
    });
6
Rémy DAVID

1）xml drawableを定義することで 丸みを帯びた角のボタン を作成でき、ボタンの角の丸みを増減するために半径を増減できます。このxml drawableをボタンの背景として設定します。

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

rounded corner button

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

3
Arnav Rao

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

あなたはそれにz軸を追加することによってビューに航空を与えることができ、それにデフォルトの影を付けることができます。この機能はLプレビューで提供されており、リリース後に利用可能になる予定です。今のところあなたは単にボタンの背景にこの外観を与える画像を追加することができます

0
Suhail Mehta