How to create a Circular image view in Android without using any library?

This article aims to help in how to make a circular image view on an image using the Android App. A simple circular image view can be made with white border and transparent content with shape without using any library.

Below are steps on how to do so:

• Step 1: Creating the layout of the circular image view
  Create a new drawable resource file in the drawable directory which defines the shape of image view that is a circle.

  circular.xml

  
  

  
  
  

  <?xml version="1.0" encoding="utf-8"?>     <!--res/drawable/circular.xml-->  <!--defines the circular shape and its properties--> <shape xmlns:android="http://schemas.android.com/apk/res/android"        android:innerRadius="0dp"     android:shape="ring"     android:thicknessRatio="2.0"     android:useLevel="false" >        <solid          android:color="@android:color/transparent" />        <stroke         android:width="9dp"         android:color="@android:color/white" /> </shape>

• Step 2: Next step is to make a layerlist drawable so that it can act as background to your imageview. Create a new XML file in drawable directory with name image.xml

  image.xml

  
  

  
  
  

  <?xml version="1.0" encoding="utf-8"?>    <!--res/drawable/image.xml--> <!--define layer-list--> <layer-list      xmlns:android="http://schemas.android.com/apk/res/android" >        <!--set image to be shown on cicular image view-->      <item android:drawable="@drawable/ic_launcher"/>      <item android:drawable="@drawable/circular"/> </layer-list>

• Step 3: Creating the activity_main.xml

  activity_main.xml

  
  

  
  
  

  <?xml version="1.0" encoding="utf-8"?> <RelativeLayout      xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:gravity="center"     >      <!--put image.xml as background to your image view-->   <ImageView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/image"/> </RelativeLayout>

• Step 4: Creating the backend MainActivity.java file

  MainActivity.java

  
  

  
  
  

  package com.geeksforgeeks.circularimageview;    import android.support.v7.app.AppCompatActivity; import android.graphics.drawable.ColorDrawable; import java.io.IOException;    public class MainActivity extends AppCompatActivity {        ImageView imageView;     @Override     protected void onCreate(Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);            ActionBar actionBar;         actionBar = getSupportActionBar();         ColorDrawable colorDrawable             = new ColorDrawable(                 Color.parseColor("#0F9D58"));         actionBar.setBackgroundDrawable(colorDrawable);            Toast.makeText(                  MainActivity.this,                  "Circular Image View "                      + "without using any library",                  Toast.LENGTH_LONG)             .show();     } }

Output: Circular image view

Activity containing Circular image

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.