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 DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

circular.xml

image.xml

activity_main.xml

MainActivity.java

Recommended Posts: