0Pricing
Android Academy · レッスン

Material Designの基礎

Material Componentsを使います。MaterialButton、TextInputLayout、MaterialCardView、FloatingActionButton、Snackbar、Chip、BottomSheetDialog、Dynamic Colorを扱います。

「Material Designの基礎」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン1/5です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全5レッスンが含まれています。

Material Designとは？

Material Designは、美しく一貫性のあるAndroidアプリを構築するためのGoogleのデザインシステムです。次の機能を提供します：

  • 豊富なビルド済みUIコンポーネント
  • 一貫した余白、タイポグラフィ、カラーのルール
  • アクセシブルでレスポンシブなコンポーネント
  • 組み込みのアニメーションとトランジション

Material Components for Androidライブラリ（MDC）によって、JetpackでMaterial 3を利用できます。

Materialコンポーネントの追加

依存関係を追加し、アプリのテーマをMaterialテーマに設定します：

// app/build.gradle:
dependencies {
    implementation 'com.google.android.material:material:1.12.0'
}

// res/values/themes.xml:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorSecondary">@color/secondary</item>
    <!-- ... -->
</style>

MaterialButton

通常のButtonをMaterialButtonに置き換えると、角丸、リップルエフェクト、アイコンのサポートを利用できます：

<!-- Filled (default) -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Save"
    app:icon="@drawable/ic_save" />

<!-- Outlined style -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancel" />

<!-- Text button -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.TextButton"
    android:text="Learn more" />

TextInputLayoutとTextInputEditText

TextInputLayoutはEditTextをラップし、フローティングラベル、エラーメッセージ、文字数カウンターを提供します：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilEmail"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email address"
    app:helperText="We will never share your email">

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

</com.google.android.material.textfield.TextInputLayout>

MaterialCardView

MaterialCardViewを使うと、コンテナにエレベーション、角丸、ストロークを追加できます：

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="4dp"
    app:strokeColor="@color/outline"
    app:strokeWidth="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView android:text="Card Title" />
        <TextView android:text="Card content goes here" />

    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

FloatingActionButton（FAB）

FABは画面上の主要なアクションを目立たせます。Material 3では3つのサイズが用意されています：

<!-- Standard FAB -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:contentDescription="Add item"
    app:srcCompat="@drawable/ic_add" />

<!-- Extended FAB (icon + text) -->
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:text="New Note"
    app:icon="@drawable/ic_edit"
    android:layout_gravity="bottom|end" />

MaterialToolbar

デフォルトのActionBarをMaterialToolbarに置き換えると、Material 3のスタイルを利用できます：

<!-- In layout XML -->
<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorSurface"
    app:title="My App"
    app:navigationIcon="@drawable/ic_menu" />

// In Activity:
setSupportActionBar(binding.toolbar)
binding.toolbar.setNavigationOnClickListener {
    onBackPressedDispatcher.onBackPressed()
}

Snackbar

Snackbarは、画面下部に短時間表示される、操作可能なメッセージです。Toastよりもこちらを優先して使用してください：

// Simple message:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_SHORT).show()

// With action:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
    .setAction("Undo") {
        viewModel.undoDelete()
    }
    .setAnchorView(binding.fab)   // appears above the FAB
    .show()

ChipとChipGroup

Chipは、フィルター、タグ、選択項目に使用するコンパクトな要素です：

<com.google.android.material.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kotlin"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Android"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Jetpack"
        style="@style/Widget.Material3.Chip.Filter" />

</com.google.android.material.chip.ChipGroup>

BottomSheetDialog

モーダルボトムシートは画面下部からスライド表示され、コンテンツやアクションを含みます：

class OptionsBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
    }
}

// Show it from a Fragment:
val sheet = OptionsBottomSheet()
sheet.show(parentFragmentManager, "options")

Material You — ダイナミックカラー

Android 12以降ではダイナミックカラーをサポートしています。アプリのカラースキームがユーザーの壁紙に合わせて自動的に変化します：

// In Application.onCreate():
override fun onCreate() {
    super.onCreate()
    DynamicColors.applyToActivitiesIfAvailable(this)
}

// That's it! Colors automatically extract from wallpaper on Android 12+
// On older Android, fallback colors from your theme are used.

クイックチェック

フローティングラベルとインラインのエラーメッセージを表示するために、EditTextをラップするMaterialコンポーネントはどれですか？

まとめ：Material Designの基礎

Material Componentsを使えば、美しいアプリを簡単に作成できます：

  • MaterialButton — 塗りつぶし、アウトライン、テキストの各スタイル
  • TextInputLayout + TextInputEditText — フローティングラベル、エラー
  • MaterialCardView — エレベーションとストロークを備えたカード
  • FloatingActionButton — 主要なアクションボタン
  • Snackbar — アクション付きで閉じられるメッセージ
  • Chip — タグ、フィルター、選択項目
  • ダイナミックカラー — Android 12以降で壁紙に合わせて変化

次は、テーマ、スタイル、ダークモードについて学びます。

よくある質問

「Material Designの基礎」レッスンは無料ですか？

はい。「Material Designの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全5レッスンが含まれています。

「Material Designの基礎」で何を学びますか？

Material Componentsを使います。MaterialButton、TextInputLayout、MaterialCardView、FloatingActionButton、Snackbar、Chip、BottomSheetDialog、Dynamic Colorを扱います。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/5です。

「Material Designの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか？

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Material Designの基礎
  2. テーマとスタイル
  3. カスタムView
  4. アニメーションとトランジション
  5. ボトムナビゲーションとタブ
← Android Academyに戻る