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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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>

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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>

    chevron_right

    
    

  • Step 3: Creating the activity_main.xml

    activity_main.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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>

    chevron_right

    
    

  • Step 4: Creating the backend MainActivity.java file

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

Output: Circular image view

Activity containing Circular image



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


4


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.