Rounded corners can make a UI element beautiful and elegant. Here, let’s check how to show an image with rounded corners in Jetpack Compose.
Image composable and RoundCornerShape helps you to add rounded corners around the image. You can also show borders around the same image with the same shape. See the code snippet given below.
@Composable
fun ExampleImage() {
Column() {
Image(
painter = painterResource(R.drawable.woman),
contentDescription = "Image with round corners",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(250.dp)
.clip(RoundedCornerShape(20.dp))
.border(3.dp, Color.Red, RoundedCornerShape(20.dp))
)
}
}The complete code is given below.
package com.example.example
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.example.ui.theme.ExampleTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ExampleTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
ExampleImage()
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun ExampleImage() {
Column() {
Image(
painter = painterResource(R.drawable.woman),
contentDescription = "Image with round corners",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(250.dp)
.clip(RoundedCornerShape(20.dp))
.border(3.dp, Color.Red, RoundedCornerShape(20.dp))
)
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ExampleTheme {
ExampleImage()
}
}Following is the output of this Jetpack Compose tutorial.
That’s how you add image with rounded corners in Jetpack Compose.
