Circular ImageView in Android using Jetpack Compose

Last Updated : 05 Mar, 2025

Circular ImageView 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. We have seen the implementation of ImageView in Android using Jetpack Compose.

In this article, we will take a look at the implementation of Circle ImageView in Android using Jetpack Compose.

Step-by-Step Implementation

Step 1 : Create a New Project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Note: Select Kotlin as the programming language.

Step 2 : Add an Image to the drawable folder

After creating a new project we have to add an image inside our drawable folder for displaying that image inside our ImageView. Copy your image from your folder’s location and go inside our project. Inside our project Navigate to the app > res > drawable > Right-click on the drawable folder and paste your image there.

Step 3 : Working with the MainActivity.kt file

After adding this image navigate to the app > java > MainActivity.kt and add the below code to it. Comments are added inside the code to help you understand the code in more detail.

MainActivity.kt:

package com.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.*
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.*
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.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DemoTheme(dynamicColor = false, darkTheme = false) {
                Surface(color = Color.White) {
                    CircularImageExample()
                }
            }
        }
    }
}

@Preview(showSystemUi = true)
@Composable
fun CircularImageExample() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        val painter = painterResource(id = R.drawable.gfg_logo)
        Card(
            modifier = Modifier.size(150.dp),
            shape = CircleShape,
            colors = CardDefaults.cardColors(Color.White),
            elevation = CardDefaults.cardElevation(18.dp),
        ) {
            Image(
                painter = painter,
                contentDescription = "Sample Image",
                modifier = Modifier
                    .fillMaxSize()
                    .clip(CircleShape)
                    .padding(16.dp),
                alignment = Alignment.Center,
                contentScale = ContentScale.Fit,
                alpha = DefaultAlpha,
            )
        }
    }
}