Android Academy · レッスン

テーマとスタイル

ウィジェット用の再利用可能なStylesと、アプリ用のThemesを定義します。Material 3のカラー役割、タイポグラフィスケール、カスタムフォント、ダークモードを設定します。

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

StyleとThemeの違い

混同されやすい2つの概念：

Style — 1つのウィジェットに適用するView属性の集合（文字サイズ、色、パディングなど）。style="@style/MyButton"で設定します。
Theme — Activityまたはアプリに適用するセマンティック属性の集合。Viewは?attr/colorPrimaryを使ってテーマ属性を参照します。

Styleの定義

res/values/styles.xmlでスタイルを作成します。スタイルは親から継承できます：

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Themeの定義

テーマはMaterial 3の親テーマを継承し、色や形状の属性を上書きします：

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Material 3のカラーシステム

Material 3では、直接的な16進数値ではなく、セマンティックなカラー役割を使用します。主な役割は次のとおりです：

colorPrimary — メインブランドカラー
colorOnPrimary — プライマリ背景上のテキストやアイコン
colorSecondary — アクセントカラー
colorSurface — カードやシートの背景
colorError — エラー状態
colorBackground — ウィンドウの背景

カラーリソース

res/values/colors.xmlで色を定義します：

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

ダークテーマ

Material 3のDayNightテーマは、ダークモードを自動的に処理します。色に対するnightバリアントを追加します：

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

タイポグラフィ

Material 3ではタイポグラフィのスケールが定義されています。一貫したテキスト表示にはtextAppearance属性を使用します：

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

カスタムフォント

res/font/にフォントを追加し、テーマまたはスタイルから参照します：

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

ActivityへのThemeの適用

AndroidManifest.xmlでテーマを設定します。Activityごとに異なるテーマを使用することもできます：

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

コードでのTheme属性の読み取り

Kotlinコードの実行時に、任意のテーマ属性へアクセスできます：

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Material Theme Builder

Material Theme Builder（m3.material.io/theme-builder）を使うと、ブランドカラーから完全なMaterial 3カラースキームを生成できます。colors.xmlとthemes.xml用の、そのまま使えるXMLファイルが出力されます。一貫性のあるデザインシステムを最も短時間で構築できる方法です。

クイックチェック

AndroidにおけるStyleとThemeの主な違いは何ですか？

まとめ：ThemeとStyle

一貫性のあるデザインはここから始まります：

Style — ウィジェット単位の属性で、多くのViewで再利用可能
Theme — アプリまたはActivity単位の属性で、セマンティックなカラー役割を定義
Material 3のカラー役割：colorPrimary、colorSurface、colorErrorなど
values-night/colors.xmlとMODE_NIGHT_FOLLOW_SYSTEMによるダークモード
textAppearance属性によるタイポグラフィスケール
Material Theme Builderを使ってカラースキームをすばやく生成

次は、カスタムViewをゼロから描画します。

よくある質問