How to Create a Circular ImageView in Android Without using Any Library?
Last Updated :
15 Aug, 2022
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" ?>
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
< 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" >
< 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...