In this tutorial we will see how to make a textview with a circular background in android. In some applications we can see there will be text written in circular background in the items of listview .Android is not providing any default CircularTextView widget , but we can achieve this by setting a drawable background for the default textview in android.
- Create new project in android studio
- Implement custom drawable file for textview
- Create the TextView in layout file with custom background
- Add the required colors
Create project in android studio
Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.
Implement custom drawable file for textview
If we want a custom background for a textview we need to have a drawable file which defines the shape,size and color of the textview layout and this will be the drawable which will set as background of the textview in the layout file. So in this step you need to have an xml file under your res/drawable/
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/cirular_textview_background" /> <size android:width="120dp" android:height="120dp" /> <corners android:bottomLeftRadius="65dp" android:bottomRightRadius="65dp" android:topLeftRadius="65dp" android:topRightRadius="65dp" /> </shape>
Create the TextView in layout file with custom background
Once the drawable file is created you need to create the textview in your layout file and simply use the above drawable file in your textview as in the following code
<TextView android:layout_width="120dp" android:layout_height="120dp" android:background="@drawable/circular_textview_drawable" android:gravity="center" android:textColor="@color/white" android:text="Hi" android:layout_centerInParent="true"/>
Add the required colors
Add the following colors into colors.xml which is using in above codes
<color name="white">#FFFFFF</color> <color name="cirular_textview_background">#FF0000</color>