Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 07 Aug, 2021

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.

Here filename 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: 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
     

Here filename is image.xml

XML




<?xml version="1.0" encoding="utf-8"?>
 
<!--res/drawable/image.xml-->
<!--define layer-list-->
<layer-list
 
    <!--set image to be shown on circular image view-->
    <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.java file

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!