Skip to content
Related Articles

Related Articles

How to create a Circular image view in Android without using any library?
  • Difficulty Level : Medium
  • Last Updated : 18 Feb, 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.

    circular.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

    image.xml




    <?xml version="1.0" encoding="utf-8"?>
      
    <!--res/drawable/image.xml-->
    <!--define layer-list-->
    <layer-list 
      
        <!--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 
        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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :