How to Create a Circular ImageView in Android Without using Any Library?

0 0 1 minute read

This article aims to help in How to create a Circular image view in Android without using any library in an Android Application. A Simple Circular ImageView can be made with a White Border and Transparent Content of any shape without using any Library. The code has been given in both Java and Kotlin Programming Language for Android.

Step by Step Implementation

Step 1: Creating the Layout of the Circular ImageView

Create a New Drawable Resource File in the Drawable Directory which defines the shape of the ImageView which is a Circle.

Here, the File name is circular.xml

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: Make a LayerList Drawable so that it can act as a Background to your ImageView.

Create a New XML file in the Drawable Directory with the name image.xml.

Here File name is image.xml

XML

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

Step 3: Creating the activity_main.xml

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 File

Java

import android.graphics.Color;
import android.os.Bundle;
import android.graphics.drawable.ColorDrawable;
import android.widget.Toast;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    ActionBar actionBar;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        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();
    }
}

Kotlin

import android.graphics.Color
import android.os.Bundle
import android.graphics.drawable.ColorDrawable
import android.widget.Toast
import androidx.appcompat.app.ActionBar
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
      
    private var actionBar: ActionBar? = null
      
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        actionBar = supportActionBar
        val colorDrawable = ColorDrawable(Color.parseColor("#0F9D58"))
        actionBar?.setBackgroundDrawable(colorDrawable)
          
        Toast.makeText(this, "Circular Image View " + "without using any library", Toast.LENGTH_LONG).show()
    }
}