1. ホーム
  2. android

[解決済み] Android マテリアルデザインボタンスタイル

2022-03-17 06:58:03

質問

マテリアルデザインのボタンスタイルで迷っています。添付のリンクのようにカラフルな盛り上がりのあるボタンにしたいのですが、使い方のところにある"強制停止"や"アンインストール"のようなボタンが欲しいです。利用可能なスタイルがあるのか、それとも私が定義する必要があるのでしょうか?

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"

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

解決方法は?

を使用することができます。 マテリアルコンポーネントライブラリ .

追加 依存関係 build.gradle :

dependencies { implementation ‘com.google.android.material:material:1.3.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には、少なくともバージョン 1.1.0 .

これらのスタイルのいずれかを使用することができます。

  • 塗りつぶしボタン(デフォルト) : style="@style/Widget.MaterialComponents.Button
  • テキストボタン : style="@style/Widget.MaterialComponents.Button.TextButton"
  • アウトラインボタン : style="@style/Widget.MaterialComponents.Button.OutlinedButton"

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 : ボタンの背景に色合いを適用するために使用します。ボタンの背景色を変更したい場合は、backgroundの代わりにこの属性を使用します。

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

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

  • app:cornerRadius : ボタンの角に使用する半径を定義するのに使用します。