Perfect Way to Give Custom Style to a UI Component in Your Application

Text is an important component for most of the application, through which you will be delivering messages and all the readable components to the user. It can be a TextView, hint in an EditView, label in a ButtonView whatever it may be, you have to present it in a more readable and stylish way to the user. And the most important thing is all the text should be of same style and font for the uniformity of the application, which is very important. Here i am going to explain how you can do this in a more perfect and simple way.

As usual I am going to explain it in steps, for your simplicity and better understanding.

Step 1: Create a new Android project in your work space.

Refer: How to Create and Run Your First Android Project

Step 2: Add your custom style to styles.xml file

Once you created a fresh Android project, you could find styles.xml file under res\values folder. Now add your own custom style to your styles.xml file. The style that I am going to give to my TextView is given below.

<resources xmlns:android="http://schemas.android.com/apk/res/android">



................

................



     <style name="TextStyle">

        <item name="android:padding">5dp</item>

        <item name="android:textSize">25sp</item>

        <item name="android:textColor">@android:color/holo_purple</item>

        <item name="android:typeface">serif</item>

        <item name="android:textStyle">bold</item>

    </style>

 

</resources>

Step 3: Create a TextView and apply your custom style

Once you are done with creating your custom style, then its time for you to create a component to demo the custom style. Here I am going to drag a TextView in my main layout file and set its text appearance property to your custom style as shown below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation = "vertical"

  >



    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:padding="10dp"

        android:text="This is a TextView with some style applied!"

        android:textAppearance="@style/TextStyle" />



</RelativeLayout>

Thats it!! You are done with your custom appearance for a TextView. This is the most acceptable way to give style for any component in your application. The important thing is, it will ensure the uniformity of the application as the same style can be re-used throughout the program.

Now just run your project, you will get the out put as shown below.

Cheers,
Have a nice day. View Complete List of Tips