MaterialButtonToggleGroupで選択式フォームを実装する

最終更新日が2023年以前の記事です。レイアウト変更のため、正常に表示されない場合があります。

Androidのアプリ開発において、UIに単一選択式のフォームを実装する際に使用されるフォームといえばRadioButton / RadioGroupでしたが、新たにMaterialButton (MaterialButtonToggleGroup)という選択肢が登場しています。デザインが今風でおしゃれなので(というかRadioButtonがダサい)、実際に使ってみました。

下準備

build.gradle の dependencies に以下の一行を追加します。なお、バージョン(1.5.0)は2022年3月現在のものです。

implementation 'com.google.android.material:material:1.5.0'

リソースフォルダ内の style.xml で、Theme.App が Theme.MaterialComponents の何か(たぶんなんでもいい)を継承していることを確認します。古いプロジェクトでここの設定が違う場合はparentの中身を書き換えます。以下は一例です。

<style name="Theme.App" parent="Theme.MaterialComponents.Light">
    //your items here.
</style>

実装

公式ドキュメントはこちらです(英語サイト)。

https://material.io/components/buttons/android#toggle-button

<com.google.android.material.button.MaterialButtonToggleGroup
    android:id="@+id/toggleButton0"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:singleSelection="true">

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/_2"
        android:layout_weight="1"
        style="?attr/materialButtonOutlinedStyle" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/_3"
        android:layout_weight="1"
        style="?attr/materialButtonOutlinedStyle" />

    //-----中略-----

</com.google.android.material.button.MaterialButtonToggleGroup>

MaterialButtonToggleGroup

  • id, layout_width, layout_height : 他のパーツと同様に設定します。
  • app:singleSelection : trueにすると同時に一つしか選択できなくなります。falseにすると同時に何個でも選択できるようになります。

子要素

子要素にはただのButtonを使います。Button の style は style=”?attr/materialButtonOutlinedStyle” を指定することが推奨されています。

Android Developers のドキュメントには、
“This layout currently only supports child views of type MaterialButton. “
(=このレイアウトは子要素MaterialButton以外はサポートしていません)
と書いてあり、サンプルコードもMaterialButtonを子要素として書いているのですが、このコードを使用しても(少なくとも私の環境では)何も表示されませんでした。MaterialButtonはButtonを継承しているコンポーネントのはずなのですが……。

ひとまずここは開発元のMaterial Designに従うのが良さそうです。

https://developer.android.com/reference/com/google/android/material/button/MaterialButtonToggleGroup
  • layout_weight : 幅を比率で指定します。MaterialButtonToggleGroup全体の長さがmatch_parentなどで予め決まっている場合はこれで指定しましょう。全ての子要素にlayout_weight=”1″を書いておけば均等割り付けになります。
  • style : 前述の通り、公式でstyle=”?attr/materialButtonOutlinedStyle” が推奨されています。

実行結果

こんな感じで、単一選択式のフォームをきれいに用意できます。色やテキストのサイズなどは特に指定しなければこのスクリーンショットのようなサイズでレンダリングされるので、他のコンポーネントのように自由に調整して使うと良いでしょう。今後が期待できる拡張です。