How to create different shape textviews in android using xml drawable ?

1) Rectangle textview

textview with rectangle shape


First go to your res>drawable folder. Create a new drawable file rectangle_drawable.xml and add the following code inside it

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <stroke
        android:width="3dp"
        android:color="#0FECFF"/>
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp"/>
    <corners
        android:bottomLeftRadius="7dp"
        android:bottomRightRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>


Now, inside your layout file create a textview and set the background property to above drawable file as shown below

<TextView
        android:background="@drawable/rectangle_drawable"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

2)  Circular Textview

textview with round shape

First go to your res>drawable folder. Create a new drawable file circle.xml and add the following code inside it

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="#9FE554" />

<size
    android:height="60dp"
    android:width="60dp" />

</shape>


Similarly create another drawable file round_textview.xml and add the following code inside it


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle" />
</selector>


Now, inside your layout file create a textview and set the drawable as shown below

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="N"
    android:textSize="30sp"
    android:background="@drawable/round_textview"
    android:textColor="@android:color/white"
    android:gravity="center"
     />

3) Custom Shape Textview

textview with a custom shape

First go to your res>drawable folder. Create a new drawable file custom_shape.xml and add the following code inside it

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#00ff00" />

    <corners
        android:bottomRightRadius="50dp"
        android:topLeftRadius="50dp" />

</shape>


Now, inside your layout file create a textview and set the drawable as shown below

<TextView
        android:textStyle="bold"
        android:padding="10dp"
        android:gravity="center"
        android:background="@drawable/custom_shape"
        android:layout_width="100dp"
        android:layout_height="150dp"
        android:text="Sample TextView"
        android:layout_centerInParent="true"/>

No comments:

Post a Comment