XML テーマを Compose に移行する

既存のアプリには、View のテーマ設定やスタイル設定が非常に多い可能性があります。既存のアプリに Compose を導入する場合は、Compose 画面で MaterialTheme を使用するようにテーマを移行する必要があります。つまり、アプリのテーマ設定には、View ベースのテーマと Compose テーマの 2 つの信頼できる情報源があります。スタイル設定の変更は、複数の場所で行う必要があります。

アプリを Compose に移行するには、既存のテーマの Compose バージョンを作成する必要があります。ただし、移行プロセスの早い段階で作成すると、XML テーマと Compose テーマの両方を維持する必要が生じ、メンテナンスの負担になります。

Material Theme Adapter

アプリで MDC-Android ライブラリの Theme.MaterialComponents.* テーマを使用している場合、Material Theme Adapter ライブラリを使用すると、既存の View ベースの XML テーマにおけるマテリアル 2 の色、タイポグラフィ、シェイプのテーマ設定を、コンポーザブルで簡単に再利用できます。

MdcTheme コンポーザブルを使用します。

import com.google.accompanist.themeadapter.material.MdcTheme

class MdcThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Use MdcTheme instead of M2 MaterialTheme
        // Colors, typography, and shapes have been read from the
        // View-based theme used in this Activity
        setContent {
            MdcTheme {
                // Your app-level composable here
            }
        }
    }
}MdcThemeSnippets.kt

詳細については、Material Theme Adapter ライブラリのドキュメントをご覧ください。

Material 3 Theme Adapter

アプリで MDC-Android ライブラリの Theme.Material3.* テーマを使用している場合、Material 3 Theme Adapter ライブラリを使用すると、既存の View ベースの XML テーマにおけるマテリアル 3 の色、タイポグラフィ、シェイプのテーマ設定を、コンポーザブルで簡単に再利用できます。

Mdc3Theme コンポーザブルを使用します。

import com.google.accompanist.themeadapter.material3.Mdc3Theme

class Mdc3ThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Use Mdc3Theme instead of M3 MaterialTheme
        // Color scheme, typography, and shapes have been read from the
        // View-based theme used in this Activity
        setContent {
            Mdc3Theme {
                // Your app-level composable here
            }
        }
    }
}Mdc3ThemeSnippets.kt

詳細については、Material 3 Theme Adapter ライブラリのドキュメントをご覧ください。

AppCompat Theme Adapter

AppCompat Theme Adapter ライブラリを使用すると、Jetpack Compose でのテーマ設定に AppCompat XML テーマを簡単に再利用できます。コンテキストのテーマから色とタイポグラフィの値を使用して M2 MaterialTheme を作成します。

AppCompatTheme コンポーザブルを使用します。

import com.google.accompanist.themeadapter.appcompat.AppCompatTheme

class AppCompatThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Colors and typography have been read from the
            // View-based theme used in this Activity
            // Shapes are the default for M2 as this didn't exist in M1
            AppCompatTheme {
                // Your app-level composable here
            }
        }
    }
}AppCompatThemeSnippets.kt

詳細については、AppCompat Compose Theme Adapter ライブラリのドキュメントをご覧ください。

カスタムテーマ属性

Core Theme Adapter ライブラリは、上記の Accompanist テーマアダプタライブラリすべてで使用され、さまざまな XML リソースを Compose に変換するための共通のロジックが含まれています。これらのリソースユーティリティを使用して、カスタムテーマ属性を解析できます。

詳細については、Core Theme Adapter ライブラリのドキュメントをご覧ください。

デフォルトのコンポーネントスタイル

Accompanist テーマアダプタライブラリでは、テーマが定義されているデフォルトのウィジェットスタイルは読み込まれません。これは、Compose にはデフォルトのコンポーザブルのコンセプトがないためです。

詳細については、Compose でのカスタムデザインシステムをご覧ください。

テーマオーバーレイ

View ベースの画面を Compose に移行する場合は、android:theme 属性の使い方に注意してください。Compose UI ツリーの該当部分に新しい MaterialTheme が必要になる場合があります。