How to create circular imageview with Jetpack compose?

Last updated Aug 08, 2021

In this Jetpack compose tutorial we will learn how to create circular imageview in Android application.

Circular Image View is used in many of the apps. These types of images are generally used to represent the profile picture of the user and many more images.

Let's say I have a rectangular image like the one below, how can I force it to be drawn as a circle in Jetpack Compose?

Compose Circular Imageview

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3: let us display an Image with circular shape. Add Circular Image In MainActivity.kt.

There's a clip modifier which can be applied to any composable as well as the Image, just pass a CicularShape into it:

package com.example.jetpack

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    CircularImageViewDemo()
                }
            }
        }
    }
}
@Composable
fun CircularImageViewDemo() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(R.drawable.image1),
            contentDescription = "avatar",
            contentScale = ContentScale.Crop,
            // crop the image if it's not a square
            modifier = Modifier
                .size(100.dp)
                // clip to the circle shape
                .clip(CircleShape)
                // add a border (optional)
                .border(2.dp, Color.Gray, CircleShape)

)
}
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {

CircularImageViewDemo()

}

Image

Jetpack Compose Circular imageview

Conclusion: In this compose tutorial we covered how to create a circular imageview in android studio.

Article Contributed By :

1413 Views