Jetpack Composeで丸い画像に枠を付ける
円形に切り取った画像に、同じCircleShapeの枠線を重ねます。
実装のポイント
clip(CircleShape)に加えて、border(4.dp, Color.Black, CircleShape)を指定します。枠の形を画像と同じにし、円の輪郭に4dpの黒い線を重ねます。
準備
Android StudioのCompose対応プロジェクトで、Material 3を使用します。以下のコードではパッケージ名をcom.swiswiswift.swiswikotlinにしています。自分のプロジェクトに合わせて変更してください。テーマはMaterialThemeに揃えています。
各記事は独立したサンプルです。同じプロジェクトで試す場合は、前のサンプルのMainActivityやContentViewを置き換えてください。
サンプルの画像をapp/src/main/res/drawable/snorlax.pngに置き、res/values/strings.xmlへ次の文字列を追加します。別の画像を使用するときは、リソース名と説明も変更してください。
<resources>
<string name="snorlax">カビゴンの画像</string>
</resources>
コード
MainActivity.kt
package com.swiswiswift.swiswikotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.ui.Modifier
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MaterialTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
ContentView(innerPadding)
}
}
}
}
}
ContentView.kt
package com.swiswiswift.swiswikotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.material3.MaterialTheme
@Composable
fun ContentView(innerPadding: PaddingValues = PaddingValues()) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
modifier = Modifier
.size(150.dp, 150.dp)
.clip(CircleShape)
.border(4.dp, Color.Black, CircleShape),
painter = painterResource(id = R.drawable.snorlax),
contentScale = ContentScale.Crop,
contentDescription = stringResource(id = R.string.snorlax)
)
}
}
@Preview(showBackground = true)
@Composable
fun ContentViewPreview() {
MaterialTheme {
ContentView()
}
}