Android Academy · レッスン

色とMaterialTheme

Q: 「色とMaterialTheme」で何を学びますか？

一貫したテーマを適用します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

一貫したテーマを適用します。

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

Composeの色

Composeでは、Colorクラスで色を表します。Color.RedやColor.Blueのように、あらかじめ用意された値もあります。

Colorは、Textのcolorやbackgroundなどのパラメータに渡します。

Text(
    text = "Hi",
    color = Color.Blue
)

カスタムカラー値

Color(0xFFRRGGBB)を使うと、16進数コードから任意の色を作れます。最初の2桁であるFFは、完全な不透明を表します。

たとえば、0xFF6200EEは紫色です。

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

背景色

background Modifierを使うと、composableの背後を塗りつぶせます。コンテンツが端に触れないよう、paddingも追加しましょう。

順序が重要です。backgroundの後にpaddingを置くと、paddingの領域まで背景色で塗りつぶされます。

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

MaterialThemeとは？

MaterialThemeは、アプリの色、フォント、形状を1か所で管理する仕組みです。

composableはここから値を読み取るため、アプリ全体の一貫性を保ち、スタイル変更も簡単にできます。

MaterialTheme {
    Text("Themed app")
}

テーマのカラースキーム

テーマのcolorSchemeには、primary、secondary、backgroundなど、名前付きの役割が用意されています。

固定の色ではなくこれらを読み取ると、1か所の変更だけで見た目を変えられます。

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

PrimaryとonPrimary

それぞれの主要な色には、その上に描画するテキスト用のonの色が対応します。たとえばonPrimaryです。

背景にprimary、テキストにonPrimaryを使うと、読みやすいコントラストを確保できます。

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

テーマのタイポグラフィ

MaterialThemeは、titleLargeやbodyMediumなどのテキストスタイルもtypographyに保存します。

Textのstyleにそのうちの1つを渡すと、サイズの整った一貫したテキストになります。

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

ライトとダークのスキーム

lightColorScheme()またはdarkColorScheme()でスキームを作り、MaterialThemeに渡せます。

スキームを切り替えることで、アプリをライトモードとダークモードの両方に対応させられます。

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

スキームをカスタマイズする

スキームを作るときに役割を指定すると、値を上書きできます。ここではprimaryがカスタムのティールになります。

colorScheme.primaryを読み取るすべての箇所が自動的に更新されます。

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

テーマを使う理由

あちこちに色をハードコードすると、デザイン変更が大変になります。MaterialThemeから読み取るようにすれば、1回の変更でアプリ全体を更新できます。

また、onカラーによって十分なコントラストを保てるため、アクセシビリティにも役立ちます。

SurfaceとBackground

Surface composableは、コンテンツの背後にテーマの背景色とelevationを適用します。

カードや画面に適切なベースカラーを設定する、すっきりした方法です。

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

理解度チェック

色とテーマについての理解度を確認しましょう。

まとめ

Colorクラス、カスタムの16進数カラー、background Modifierの使い方を学びました。MaterialThemeは、colorScheme、typography、shapesをまとめて管理します。

primaryやonPrimaryなどの役割を読み取ることで、コントラストと一貫性を保ち、ライトスキームやダークスキームにも対応できます。

スタイリングコースの修了、お疲れさまでした！

よくある質問

「色とMaterialTheme」レッスンは無料ですか？

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

「色とMaterialTheme」で何を学びますか？

一貫したテーマを適用します。ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「色とMaterialTheme」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Android Academyに戻る