ImageView in circular through XML

I'd Like to make any image from my ImageView to be circular with a border.

I searched but couldn't find any useful information (anything that I tried didn't work).

How can I achieve this through XML: Create an ImageView with certain src and make it circular with a border?

Solution 1:

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>

Solution 2:

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.