Android circular textview example

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.

Steps

  • 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/

circular_textview_drawable.xml

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

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *