2025/8/16

【Jetpack Compose/Android】Surfaceの使い方と違い

この記事からわかること

Kotlin/Android Jetpack ComposeのSurfaceの使い方

index

[open]

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

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

posted withアプリーチ

環境

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

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

Surface

Jetpack ComposeのSurfaceはUIの「土台(Surface)」を表すコンポーザブルです。内部のコンテンツをラップして、色 (color)、形 (shape)、影 (elevation)などを制御する背景レイヤーを実装することが可能になります。

似たような土台を構築するコンポーザブルにScaffoldがあります。Scaffoldとの違いの1つにEdge-to-edgeに対応しているかどうかです。Scaffoldをベースにしていた画面は自動で上下のシステムバーやノッチ周りの余白を調整してくれますが、Surfaceを画面の土台にするとWindowInsetsなどで明示的に対応が必要になります。

定義を確認してみると色々なプロパティが存在することがわかります。shape、color、shadowElevationなどで背景となるViewの見た目を制御することができます。

@Composable
@NonRestartableComposable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
)

使い方

Surfaceはどちらかというと画面全体を囲う土台ではなくUIコンポーネントを囲う土台として使用します。例えば以下のように「淡い青のカード風UI」を実装する時などに活用することができます。

Surface(
    onClick = { /* クリック処理 */ },
    modifier = Modifier.padding(16.dp),// 余白
    color = Color(0xFFE3F2FD),         // 淡い青
    shape = RoundedCornerShape(16.dp), // 角丸
    shadowElevation = 8.dp             // 影の高さ
) {
    Text(
        text = "これは Surface です",
        modifier = Modifier.padding(24.dp)
    )
}

Surfaceの機能と特徴

公式リファレンス：Surface

Surfaceの機能と特徴は公式に詳細に明記されていました。

クリッピング (Clipping)
- shape で指定した形状に子要素をクリップする。
標高 (Elevation)
- shadowElevation に応じて影を描画し、深度を表現する。
- shape が凹型の場合、Android 10 未満では影は描画されない。
境界線 (Border)
- shape に境界線が設定されている場合、それを描画する。
背景 (Background)
- color で指定した色で shape を塗りつぶす。
- color = Colors.surface の場合、ダークテーマでは ElevationOverlay が適用される。
- オーバーレイ色は elevation と LocalAbsoluteElevation に依存する。
- 親サーフェスと比較して相対的に深度感を失わないように調整される。
コンテンツカラー (Content Color)
- contentColor を指定できる。
- 指定した色は Text や Icon のデフォルト色として使われる。
タッチイベント制御
- Surface は、その後ろにある UI へのタッチ伝播をブロックする。