Rounded images are used in the UI to represent elements such as profile images. Let’s learn how to make images round in Android Jetpack Compose.
Image composable is used to show images and we can make use of CircleShape clip. See the code snippet given below.
@Composable
fun RoundImage() {
Column() {
Image(
painter = painterResource(R.drawable.woman),
contentDescription = "Round Image",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(250.dp)
.clip(CircleShape)
.border(3.dp, Color.Red, CircleShape)
)
}
}This will give an output of a circular image with a red color border. The complete example 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.CircleShape
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
) {
RoundImage()
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun RoundImage() {
Column() {
Image(
painter = painterResource(R.drawable.woman),
contentDescription = "Round Image",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(250.dp)
.clip(CircleShape) // clip to the circle shape
.border(3.dp, Color.Red, CircleShape)//optional
)
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ExampleTheme {
RoundImage()
}
}You will get the following output.
That’s how you add a round image with a border in Jetpack Compose.
