Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 15 Aug, 2022

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 -->
    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 
    <!-- 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 
    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()
    }
}

Output: Circular ImageView

Circular ImageView in Android

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!