2023/7/31

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

この記事からわかること

Android StudioでButtonを実装する方法
マテリアルデザインのボタンを実装するには？
テキストのみボタンやテキストとアイコンボタン、アウトライン、テキストとアイコンボタンで背景色あり、トグルボタン、トグルボタン(アイコン)の実装方法

index

[open]

Buttonのデフォルトのデザイン
マテリアルデザインButtonの実装方法
テキストのみボタン
テキストとアイコンボタン
アウトライン
テキストとアイコンボタンで背景色あり
トグルボタン
トグルボタン(アイコン)

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

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

posted withアプリーチ

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

環境

Android Studio：Flamingo
Kotlin：1.8.20

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

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

【Android Studio】Buttonにアイコンを設定する方法！デザインやテーマのカスタマイズ

この際の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>