2025/8/13

【Jetpack Compose】Colorの指定方法と使い方！colorResource

この記事からわかること

Kotlin/Android Jetpack Composeの使い方
Colorの指定方法と使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Meerkat
Kotlin：2.0.21
AGP：8.9.2
Gradle：8.11.1
Mac M1：Sequoia 15.4

Jetpack Compose自体の基本的な使用方法に関しては以下の記事を参考にしてください。

Jetpack ComposeのColor

Jetpack Composeではandroidx.compose.ui.graphics.Colorとして色を扱うためのクラスが定義されています。Colorのcompanion objectとしていくつかデフォルト色が定義されているためColor.BlackやColor.WHITE、Color.Transparentのような形でよく使う色を参照することが可能になっています。

import androidx.compose.ui.graphics.Color
Text(
    text = "Hello World",
    color = Color.Black,
)

また引数に0xAARRGGBB形式(16進数)でカラーコードを渡して色を指定することも可能になっています。

val myRed = Color(0xFFFF0000)
// ・AA: Alpha（透明度, 00=透明〜FF=不透明）
// ・RR: Red
// ・GG: Green
// ・BB: Blue

単に透明にしたいだけであればcopy(alpha:)を使用することでも実装することができます。

val semiTransparentBlue = Color(0xFF0000FF).copy(alpha = 0.5f)

colors.xml(リソース)を参照する

Jetpack ComposeでもcolorResource(id = R.color.xxx)メソッドを使用することでcolors.xmlに定義したカラーリソースを参照することができます。

import androidx.compose.ui.res.colorResource
val myColor = colorResource(id = R.color.my_color)

MaterialTheme.colorScheme

Jetpack Composeでの色の管理にはMaterialThemeを活用することもあります。MaterialThemeはアプリ内のデザインルール(「色」・「文字」・「形」)を一元管理するための仕組みです。定義しておいた配色はMaterialTheme.colorSchemeを介して参照することが可能になります。

@Composable
fun MyApp() {
    MaterialTheme(
        colorScheme = lightColorScheme(
            // メインカラー
            primary = Color(0xFF6200EE), 
            // サブカラー
            secondary = Color(0xFF03DAC5) 
        ),
        // 文字スタイル
        typography = Typography(), 
        // 形
        shapes = Shapes() 
    ) {
        MyScreen()
    }
}

参照できるのはprimaryやsecondaryなど色名ではなく、用途名になっているので適切なカラーをMaterialThemeに定義して使用する形になります。

@Immutable
class ColorScheme(
    // メインカラー。主要なボタンや強調テキストに使用
    val primary: Color,
    // primary 上に表示する文字やアイコンの色
    val onPrimary: Color,
    // primary の背景として使うコンテナ色（カードやチップなど）
    val primaryContainer: Color,
    // primaryContainer 上の文字色
    val onPrimaryContainer: Color,
    // 反転テーマ時の primary 色
    val inversePrimary: Color,

    // 補助カラー。サブボタンやタグなどに使用
    val secondary: Color,
    // secondary 上の文字やアイコンの色
    val onSecondary: Color,
    // secondary の背景として使うコンテナ色
    val secondaryContainer: Color,
    // secondaryContainer 上の文字色
    val onSecondaryContainer: Color,

    // 第3のアクセント色
    val tertiary: Color,
    // tertiary 上の文字色
    val onTertiary: Color,
    // tertiary の背景として使うコンテナ色
    val tertiaryContainer: Color,
    // tertiaryContainer 上の文字色
    val onTertiaryContainer: Color,

    // アプリ全体の背景色
    val background: Color,
    // background 上の文字色
    val onBackground: Color,

    // サーフェス背景（カード、ダイアログ、シート）
    val surface: Color,
    // surface 上の文字色
    val onSurface: Color,
    // サーフェスバリアント色（区切りや控えめな面）
    val surfaceVariant: Color,
    // surfaceVariant 上の文字色
    val onSurfaceVariant: Color,
    // サーフェスにティントをかける色（elevation に応じて）
    val surfaceTint: Color,
    // 反転サーフェス
    val inverseSurface: Color,
    // inverseSurface 上の文字色
    val inverseOnSurface: Color,

    // エラー色
    val error: Color,
    // error 上の文字色
    val onError: Color,
    // エラー用コンテナ背景
    val errorContainer: Color,
    // errorContainer 上の文字色
    val onErrorContainer: Color,

    // 標準枠線色
    val outline: Color,
    // 薄い境界線色
    val outlineVariant: Color,
    // 半透明オーバーレイ色（スクラム）
    val scrim: Color,

    // 明るいサーフェス
    val surfaceBright: Color,
    // 暗いサーフェス
    val surfaceDim: Color,
    // 中立的なサーフェス
    val surfaceContainer: Color,
    // 高コントラスト面
    val surfaceContainerHigh: Color,
    // 最も高いレベルの面
    val surfaceContainerHighest: Color,
    // やや低コントラスト面
    val surfaceContainerLow: Color,
    // 最も低いレベルの面
    val surfaceContainerLowest: Color,
)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Android