最終更新日が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” が推奨されています。
実行結果
こんな感じで、単一選択式のフォームをきれいに用意できます。色やテキストのサイズなどは特に指定しなければこのスクリーンショットのようなサイズでレンダリングされるので、他のコンポーネントのように自由に調整して使うと良いでしょう。今後が期待できる拡張です。
