2026/02/18

【Android】Composeの基本の装飾

サイズ、テキストカラー、背景色など基本のカスタマイズについて覚えていく

Text

Kotlin
Text(
    text = "こんにちは",
    color = Color.Blue,
    fontSize = 20.sp
)

colorでテキストカラーを指定

fontSizeでフォントの大きさを指定

fontWeightでフォントの太さを指定

textAlignで左右中央寄せなどテキストの位置を指定する

style: TextStyleは文字に関する設定の塊で上記のcolorやfontsizeなども持っているので共通化しておくことでコードの可読性が向上する

テキストの一部のみ装飾を変更する場合

buildAnnotatedStringを利用する

Kotlin
Text(
    buildAnnotatedString {
        append("ほか、計")

        withStyle(
            style = SpanStyle(
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold
            )
        ) {
            append("$count")
        }

        append("枚のチケット")
    }
)

Button

Kotlin
Button(
    onClick = {},
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Red
    )
) {
    Text("赤いボタン", color = Color.White)
}

onClikでタップ処理

colorsで色の指定

ButtonDefaults.buttonColorsは通常状態、押下状態（pressed）、無効状態の色を指定することが可能。これはCardなども同様にCladDefaults.cardColorsなどが用意されている。

Image

Kotlin
Image(
    painter = painterResource(id = R.drawable.sample),
    contentDescription = "サンプル画像"
)

painterでリソースから表示する画像を指定する

余白（padding）とサイズ（size）

Kotlin
Text(
    "余白あり",
    modifier = Modifier
        .padding(16.dp)
        .size(200.dp)
)

よく使うModifier

padding()内側の余白
size()幅と高さ同時指定
width() / height()個別指定
fillMaxWidth()横幅いっぱい
fillMaxHeight() 縦いっぱい
background()背景色
border() 枠線
clip()角丸
clickable() クリック処理追加

単位の話（dpとsp）

dpはサイズ・余白用（density-independent pixel）

spは文字サイズ用