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