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.Colorimport android.os.Bundleimport android.graphics.drawable.ColorDrawableimport android.widget.Toastimport androidx.appcompat.app.ActionBarimport 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
