Android Jetpack Compose – Circular Image

Android Jetpack Compose – Circular Image

We can display given image in circular shape in Android Jetpack Compose.

To display a circular image with Image composable, crop the image using contentScale parameter, set the size using Modifier.size(), and then clip to circular shape using Modifier.clip().

The following is a simple code snippet to display a circular image using Image composable.

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "Big Elephant",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(256.dp)
        .clip(CircleShape)
)

Example Android Application for Circular Image

In the following example, we display the following image, in a circular shape, using an Image composable.

sample-image.jpg

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
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.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(20.dp),
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.sample_image),
                        contentDescription = "Big Elephant",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier
                            .size(256.dp)
                            .clip(CircleShape)
                    )
                }
            }
        }
    }
}

Screenshot

Summary

In this tutorial, we have seen how to display a circular image using Image composable in Android Jetpack Compose, with an example.