• 2023/7/31
• 3分

【Android Studio】マテリアルデザインButtonの実装方法！見た目を簡単に変更

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Android StudioでButtonのサイズや角丸、枠などを変更したカスタムボタンを作成する方法をまとめていきます。

環境

• Android Studio：Flamingo
• Kotlin：1.8.20

Buttonのデフォルトのデザイン

おすすめ記事：【Kotlin】Android StudioでButtonの使い方！クリックイベント

Android StudioではButtonを設置するとデフォルトのデザインが適応されるようになっています。Android Studio Flamingoでは以下のような紫色で角が丸くなったボタンが実装されます。

この際のButtonのXMLは以下のようになります。

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Button" />

マテリアルデザインButtonの実装方法

公式：MATERIAL DESIGN-Buttons

正直マテリアルデザインが何かよくわかっておりませんが、色々とボタンのデザインを変更できたので共有しておきます。

テキストのみボタン

テキストのみボタンを実装するには@style/Widget.MaterialComponents.Button.TextButtonをstyleに指定します。

<Button
  android:id="@+id/button1"
  style="@style/Widget.MaterialComponents.Button.TextButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Text button" />

テキストとアイコンボタン

>テキストとアイコンボタンを実装するには@style/Widget.MaterialComponents.Button.TextButton.Iconをstyleに指定します。

<Button
  style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Text button"
  app:icon="@drawable/android" />

アウトライン

アウトラインボタンを実装するには@style/Widget.MaterialComponents.Button.OutlinedButton.Iconをstyleに指定します。

<Button
  style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Text button"
  app:icon="@drawable/android" />

テキストとアイコンボタンで背景色あり

テキストとアイコンボタンで背景色ありなボタンを実装するには@style/Widget.MaterialComponents.Button.Iconをstyleに指定します。

<Button
  style="@style/Widget.MaterialComponents.Button.Icon"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Text button"
  app:icon="@drawable/android" />

トグルボタン

トグルボタンを実装するにはMaterialButtonToggleGroupタグの中に?attr/materialButtonOutlinedStyleをstyleに指定したボタンを配置します。

<com.google.android.material.button.MaterialButtonToggleGroup
  android:id="@+id/toggleButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

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

  <Button
      android:id="@+id/toggle_button2"
      style="?attr/materialButtonOutlinedStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 2" />

  <Button
      android:id="@+id/toggle_button3"
      style="?attr/materialButtonOutlinedStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button 3" />
</com.google.android.material.button.MaterialButtonToggleGroup>

トグルボタン(アイコン)

トグルボタン(アイコン)を実装するにはMaterialButtonToggleGroupタグの中に@style/Widget.App.Button.OutlinedButton.IconOnlyをstyleに指定したボタンを配置します。

<com.google.android.material.button.MaterialButtonToggleGroup
  android:id="@+id/toggleButton1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <Button
      style="@style/Widget.App.Button.OutlinedButton.IconOnly"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:icon="@drawable/android" />

  <Button
      style="@style/Widget.App.Button.OutlinedButton.IconOnly"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:icon="@drawable/android" />

  <Button
      style="@style/Widget.App.Button.OutlinedButton.IconOnly"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:icon="@drawable/android" />
</com.google.android.material.button.MaterialButtonToggleGroup>

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。