ImageView in circular through XML

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.