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 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" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
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" ?>
< layer-list
xmlns:android = "http://schemas.android.com/apk/res/android" >
< 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
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:gravity = "center" >
< 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