ImageView in circular through XML

Question

This is the simplest way that I designed. Try this.

dependencies

• implementation 'androidx.appcompat:appcompat:1.3.0-beta01'

• implementation 'androidx.cardview:cardview:1.0.0'

   <android.support.v7.widget.CardView
       android:layout_width="80dp"
       android:layout_height="80dp"
       android:elevation="12dp"
       android:id="@+id/view2"
      app:cardCornerRadius="40dp"
       android:layout_centerHorizontal="true"
       android:innerRadius="0dp"
       android:shape="ring"
       android:thicknessRatio="1.9">
       <ImageView
           android:layout_height="80dp"
           android:layout_width="match_parent"
           android:id="@+id/imageView1"
           android:src="@drawable/YOUR_IMAGE"
           android:layout_alignParentTop="true"
           android:layout_centerHorizontal="true">
       </ImageView>
    </android.support.v7.widget.CardView>
  

  If you are working on android versions above lollipop

   <android.support.v7.widget.CardView
   android:layout_width="80dp"
   android:layout_height="80dp"
   android:elevation="12dp"
   android:id="@+id/view2"
   app:cardCornerRadius="40dp"
   android:layout_centerHorizontal="true">
   <ImageView
       android:layout_height="80dp"
       android:layout_width="match_parent"
       android:id="@+id/imageView1"
       android:src="@drawable/YOUR_IMAGE"
       android:scaleType="centerCrop"/>
     </android.support.v7.widget.CardView>
  

Adding Border to round ImageView - LATEST VERSION

Wrap it with another CardView slightly bigger than the inner one and set its background color to add a border to your round image. You can increase the size of the outer CardView to increase the thickness of the border.

<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="150dp"
          android:layout_height="150dp"
          android:src="@drawable/default_user"
          android:scaleType="centerCrop"/>

   </androidx.cardview.widget.CardView>

 </androidx.cardview.widget.CardView>

You can make a simple circle with white border and transparent content with shape.

// res/drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

Then make a layerlist drawable and put it as background to your imageview.

// res/drawable/img.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/circle"/>    
    <item android:drawable="@drawable/ic_launcher"/>

</layer-list>

and put it as background to your imageview.

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/img"/>

You'll have something like that.

I hope this will help you.

1) CircleImageView

 <de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

Don't forget implementation: Gradle Scripts > build.gradle (Module: app) > dependencies

     implementation 'de.hdodenhof:circleimageview:3.1.0'   
        

For complete description please check here : The Source here.

2) CircularImageView

<com.mikhaellopez.circularimageview.CircularImageView
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:src="@drawable/image"
    app:civ_border_color="#3f51b5"
    app:civ_border_width="4dp"
    app:civ_shadow="true"
    app:civ_shadow_radius="10"
    app:civ_shadow_color="#3f51b5"/>

Don't forget implementation: Gradle Scripts > build.gradle (Module: app) > dependencies

     implementation 'com.mikhaellopez:circularimageview:4.3.0'   
        

For complete description please check here : The Source here.

With the Material Components Library Just use the ShapeableImageView.
Somethig like:

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/roundedImageViewRounded"
    app:strokeColor="@color/....."
    app:strokeWidth="1dp"
    ...
    />

with:

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

Note: it requires at least the version 1.2.0.

---

With jetpack compose 1.0.x you can apply the clip Modifier using a CircleShape:

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

With the help of glide library and RoundedBitmapDrawableFactory class it's easy to achieve. You may need to create circular placeholder image.

Glide V4:

Glide.with(context).load(url).apply(RequestOptions.circleCropTransform()).into(imageView);

Glide V3:

    Glide.with(context)
        .load(imgUrl)
        .asBitmap()
        .placeholder(R.drawable.placeholder)
        .error(R.drawable.placeholder)
        .into(new BitmapImageViewTarget(imgProfilePicture) {
            @Override
            protected void setResource(Bitmap resource) {
                RoundedBitmapDrawable drawable = RoundedBitmapDrawableFactory.create(context.getResources(),
                        Bitmap.createScaledBitmap(resource, 50, 50, false));
                drawable.setCircular(true);
                imgProfilePicture.setImageDrawable(drawable);
            }
        });

For Picasso RoundedTransformation, this is a really great solution that gives an additional option of rounding image at either top or bottom edge.

The above methods don't seem to work if you're using the src attribute. What I did is to put two image views inside a frame layout one above another like this:

<FrameLayout android:id="@+id/frame"
             android:layout_width="40dp"
             android:layout_height="40dp">

    <ImageView android:id="@+id/pic"
               android:layout_width="40dp"
               android:layout_height="40dp"
               android:src="@drawable/my_picture" />

    <ImageView android:id="@+id/circle_crop"
               android:layout_width="40dp"
               android:layout_height="40dp"
               android:src="@drawable/circle_crop" />

</FrameLayout>

Simply put a circular_crop.png in your drawable folder which is in the shape of your image dimensions (a square in my case) with a white background and a transparent circle in the center. You can use this image if you have want a square imageview.

Just download the picture above.