Creating Circular ImageViews with Borders in Android

In this tutorial, we will explore how to create circular ImageViews with borders in Android. This can be achieved using various methods, including using CardView, ShapeableImageView, and third-party libraries.

Method 1: Using CardView

One way to create a circular ImageView is by wrapping it inside a CardView and setting the cardCornerRadius attribute to half of the width or height of the CardView. Here’s an example:

<androidx.cardview.widget.CardView
    android:layout_width="80dp"
    android:layout_height="80dp"
    app:cardCornerRadius="40dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image"
        android:scaleType="centerCrop" />
</androidx.cardview.widget.CardView>

To add a border to the circular ImageView, you can wrap it inside another CardView with a slightly larger width and height, and set its background color. Here’s an example:

<androidx.cardview.widget.CardView
    android:layout_width="155dp"
    android:layout_height="155dp"
    app:cardCornerRadius="250dp"
    app:cardBackgroundColor="@color/white">
    <androidx.cardview.widget.CardView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:cardCornerRadius="250dp"
        android:layout_gravity="center">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/image"
            android:scaleType="centerCrop" />
    </androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>

Method 2: Using ShapeableImageView

Another way to create a circular ImageView is by using the ShapeableImageView from the Material Components Library. Here’s an example:

<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="250dp"
    android:layout_height="250dp"
    app:shapeAppearanceOverlay="@style/circleImageView"
    app:strokeWidth="10dp"
    app:strokeColor="@android:color/darker_gray"
    android:src="@drawable/image" />

You’ll also need to define the style in your styles.xml file:

<style name="circleImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

Make sure to add the implementation in your build.gradle file:

implementation 'com.google.android.material:material:1.12.0'

Method 3: Using Third-Party Libraries

There are several third-party libraries available that can help you create circular ImageViews with borders, such as CircleImageView and CircularImageView. Here’s an example using CircleImageView:

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/image"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000" />

You’ll also need to add the implementation in your build.gradle file:

implementation 'de.hdodenhof:circleimageview:3.1.0'

Method 4: Using Jetpack Compose

If you’re using Jetpack Compose, you can create a circular ImageView with a border using the clip modifier and the CircleShape. Here’s an example:

Image(
    painter = painterResource(R.drawable.image),
    contentDescription = "image",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(100.dp)
        .clip(CircleShape)
        .border(2.dp, Color.Blue, CircleShape)
)

In conclusion, there are several ways to create circular ImageViews with borders in Android. You can use CardView, ShapeableImageView, third-party libraries, or Jetpack Compose to achieve this effect.