Android Jetpack Compose – Circular Image with Border

Android Jetpack Compose – Circular Image with Border

We can display given image in circular shape with a specific border, in Android Jetpack Compose.

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

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

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

Example Android Application for Circular Image with Border

In the following example, we display the following image, in a circular shape, with Circular shape border of LightGray color, and 10.dp border width, 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.border
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.graphics.Color
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)
                            .border(10.dp, Color.LightGray, CircleShape)
                    )
                }
            }
        }
    }
}

Screenshot

You can play with the border color, and border width, and change the border as per your requirement.

Summary

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