『Android』- StyleとThemeの使い方と違い

2025年1月14日 14:49

概要

AndroidでのUI設計では、StyleとThemeを使用して、コードの再利用性を向上させ、アプリ全体の外観とコンポーネントの属性を一元管理できます。最新のJetpack ComposeやMaterial Design 3（MD3）にも対応し、これらの機能をさらに活用する方法を解説します。

StyleとThemeの違い

Theme: アプリケーションやActivity全体の外観を設定。アプリ全体に共通するデザインや動作を適用します。
Style: 個々のUIコンポーネントの属性を設定。再利用可能なスタイルを作成し、特定のViewに適用します。

宣言 & 使用方法

1. Themeの設定と使用

2025年では、Material Design 3を採用するのが推奨されています。以下はカスタムテーマの例です。

<resources>
    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/primary_color</item>
        <item name="colorOnPrimary">@color/on_primary_color</item>
        <item name="android:windowFullscreen">true</item>
    </style>
</resources>

適用方法

AndroidManifest.xmlでアプリ全体または特定のActivityにテーマを適用します。

<application
    android:theme="@style/AppTheme">
    <activity
        android:name=".MainActivity"
        android:theme="@style/AppTheme" />
</application>

2. Styleの設定と使用

Styleは、最新のMaterial Designコンポーネント（例: MaterialButton, TextView）に適用可能です。

<resources>
    <style name="CustomButtonStyle" parent="Widget.Material3.Button">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/on_primary_color</item>
        <item name="android:backgroundTint">@color/primary_color</item>
    </style>
</resources>

適用方法

レイアウトファイルでStyleを適用します。

<Button
    style="@style/CustomButtonStyle"
    android:text="カスタムボタン" />

3. ThemeとStyleの継承

最新のAndroidでは、カスタムテーマやスタイルを継承することで効率的なUI管理が可能です。

<resources>
    <!-- ベーステーマ -->
    <style name="BaseTheme" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/primary_color</item>
        <item name="colorOnPrimary">@color/on_primary_color</item>
    </style>

    <!-- 派生テーマ -->
    <style name="CustomTheme" parent="BaseTheme">
        <item name="colorSecondary">@color/secondary_color</item>
    </style>
</resources>

Jetpack ComposeによるStyleとThemeの設定

最新のUI設計では、Jetpack Composeを使用することも一般的です。以下はComposeでテーマを設定する例です。

@Composable
fun MyAppTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = lightColorScheme(
            primary = Color(0xFF6200EE),
            onPrimary = Color.White
        ),
        typography = Typography(
            body1 = TextStyle(
                fontSize = 16.sp,
                color = Color.Gray
            )
        )
    ) {
        content()
    }
}

Composeでは、MaterialThemeを用いることでテーマ全体を一元管理できます。

主な変更点（2015年版からの更新）

Material Design 3対応:
- 最新のMaterial Design 3（MD3）を使用し、Jetpackライブラリを活用します。
Jetpack Composeの導入:
- Jetpack Composeでは、XMLではなくKotlinコードでテーマやスタイルを直接定義できます。
Widget.Material3.*の利用:
- Material Designコンポーネントに直接対応したスタイルを使用可能。
最新テーマ構造の採用:
- Theme.Material3.DayNight.NoActionBarなどの最新テーマを基にカスタマイズ。

まとめ

ThemeとStyleを適切に活用することで、コードの再利用性を向上させ、UIデザインの一貫性を保つことができます。
Jetpack Composeを導入することで、XMLの制約を超えた柔軟なテーマ管理が可能です。
最新のMaterial Design 3に対応することで、モダンで直感的なUI設計が実現できます。