KotlinでMaterial Designを使ってみよう！初心者でもわかるUIコンポーネント入門

1. Material Designとは？

1. Material Designとは？

Material Design（マテリアルデザイン）とは、Googleが提唱しているユーザーインターフェースのデザインルールです。簡単に言うと、「使いやすくて見た目がキレイなボタンや画面の作り方のルール」と考えてください。

このルールに沿ってデザインされたコンポーネント（部品）を使えば、誰でもかっこいいアプリを作ることができます。

2. Material Componentsを使うための準備

2. Material Componentsを使うための準備

まずは、KotlinでMaterial Designコンポーネントを使えるようにするための設定を行います。Android Studioのプロジェクトに必要なライブラリを追加しましょう。

プロジェクトのbuild.gradle（Moduleレベル）の中に、以下の依存関係を追加します。

dependencies {
    implementation("com.google.android.material:material:1.11.0")
}

このmaterialライブラリには、たくさんのMaterial Design対応コンポーネント（ボタン、テキストフィールド、カードなど）が含まれています。

3. Material Buttonを使ってみよう

3. Material Buttonを使ってみよう

Material Button（マテリアルボタン）は、見た目が洗練されていて押した感触もわかりやすいボタンです。レイアウトXMLに以下のように書くと、使うことができます。

<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="送信"
    style="@style/Widget.MaterialComponents.Button"
    app:cornerRadius="12dp"
    app:icon="@drawable/ic_send"
    app:iconPadding="8dp"
/>

style属性でMaterial Designのボタンスタイルを指定し、角を丸くしたり、アイコンを表示することもできます。

4. TextInputLayoutで入力フィールドを美しく

4. TextInputLayoutで入力フィールドを美しく

ユーザーに文字を入力してもらう画面では、Material DesignのTextInputLayoutが大活躍します。ヒントの表示やエラーメッセージ、線の色などが自動で変化し、とても分かりやすいデザインになります。

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="ユーザー名">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

これにより、入力フォームの見た目がぐっと洗練され、使いやすくなります。

5. CardViewで情報を囲もう

5. CardViewで情報を囲もう

CardView（カードビュー）は、情報のまとまりを「カード」のように表示するための部品です。写真や説明文などをきれいにまとめて見せたいときに便利です。

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="12dp"
    app:cardElevation="6dp"
    android:layout_margin="8dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="カードの中身です"
        android:padding="16dp"/>
</androidx.cardview.widget.CardView>

カードの角を丸くしたり、影をつけて立体感を出すこともできます。

6. Themeの設定で全体のデザインを統一

6. Themeの設定で全体のデザインを統一

Material Designのコンポーネントを使うためには、アプリ全体のテーマもMaterial対応にする必要があります。テーマとは、アプリ全体の色やフォント、スタイルをまとめたものです。

たとえば、themes.xmlファイルで以下のように設定します。

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorSecondary">@color/teal_200</item>
</style>

Theme.MaterialComponentsを親に指定することで、すべてのMaterialコンポーネントが正しく動作するようになります。

7. おすすめのMaterialコンポーネント

7. おすすめのMaterialコンポーネント

• Snackbar：下から出てくる通知メッセージ
• FloatingActionButton：右下に出る丸いアクションボタン
• BottomNavigationView：画面下部のナビゲーションバー
• TabLayout：タブ切り替えを簡単に実装

これらのコンポーネントもすべてMaterial Designに対応しており、アプリをより使いやすく、視覚的に魅力的にしてくれます。

8. Kotlinでボタンのクリックイベントを書く

8. Kotlinでボタンのクリックイベントを書く

最後に、KotlinコードでMaterial Buttonのクリック処理を書く方法です。例えば、ボタンをタップしたときにメッセージを表示するには、次のように書きます。

val button = findViewById<MaterialButton>(R.id.materialButton)
button.setOnClickListener {
    Toast.makeText(this, "ボタンが押されました", Toast.LENGTH_SHORT).show()
}

setOnClickListenerというのは、「クリックされたときに何をするか」を決める命令です。