TechVidvan

Android Styles And Themes

In this article, we are going to cover Android Styles and Themes. Android, as we know, provides features to customize your application look. To do so, we need to understand what styles and themes are in Android.

Styles and Themes in Android

Styles are several parameters: font, color, background, margin, text size, text style, etc. Using a combination of these properties, you can create your style and apply that style to a UI component or the whole layout.

Themes are nothing but a standardized type of style that is followed throughout the application. Your view or layout or even the non-view elements will follow the same theme throughout.

So understanding both the concepts and their implementation is our goal through this article. Let’s start!!!

What is Android Style?

Android-style is a set of all attributes that are applied to view elements. The following are some of the common characteristics that are used to style an element.

  • Font
  • Background
  • Margin
  • Padding
  • Text Size
  • Text Style

To create a style for some specific UI element, you can follow the below steps:

1: First, go to your Project Structure—select res and then select values. Now here, you need to open the themes.xml. (res—->values—–>themes.xml)

2: The root tag of the XML file is <resources>. In this, you need to create a <style> tag.

3: Now, you need to keep a name attribute to the style tag. It helps you in identifying the style uniquely.

4: Now, you just need to use the <item> tag to define each attribute. You should keep a value that is acceptable by that specific attribute.

For example

<resources>
    <style name=”MyTextViewStyle">
      <item name="android:layout_width">wrap_content</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:textColor">#960959</item>
      <item name="android:textSize">40sp</item>
      <item name="android:textStyle">italic</item>
      <item name="android:textAllCaps">true</item>
    </style>
</resources>

How to use Android Style?

The style you defined in your styles.xml file can be used by the elements present in your layout XML file. For this, you need to open your layout XML file and then use the style attribute to call your defined style. After doing so, your element will follow that style.

Below is an implementation of the same.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >
<TextView
    android:id="@+id/techVidvanTitle”
    style="@style/MyTextViewStyle"
    android:text="Tech Vidvan"/>
</LinearLayout>

Android Style Inheritance

In Android, you get a feature to inherit properties from an existing theme and then override some attributes. The process is similar to how we inherit a CSS file in our HTML file and override some of the features.
You can easily do the same by using the parent tag in your style tag.

Below is an example that will help you to do the same.

<resources>
   <style name="MyTextViewStyle" parent="android:style/Theme">
   <item name="android:textSize">40sp</item>
   <item name="android:textColor">#960959</item>
<!-- you can add other required attributes here--> 
   </style>
</resources>

So, here we are, inheriting properties from an exciting style called a Theme. Then, we are altering a few of the attributes based on our needs.

Now, you can similarly implement the above style how we did before.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >
<TextView
    android:id="@+id/techVidvanTitle”
    style="@style/MyTextViewStyle"
    android:text="Tech Vidvan"/>
</LinearLayout>

What is Android Theme?

Android Theme is a standardized type of style that is applied throughout the application. Themes are restricted to the view elements and can also be used for non-view elements like app bar, status bar, etc.

Every UI element present inside the application should follow the parent theme that is applied to the application.

You can easily create your theme by following the below steps:
Step 1: First, go to your Project Structure. Select res and then select values. Now here, you need to open the themes.xml. (res—->values—–>themes.xml)

Step 2: Now, you need to create a new style, give it a name and define the attributes you need.

For example

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Your own customized application theme. -->
    <style name="Theme.TechVidvanThemes" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <!-- Your application's Primary brand color. -->
        <item name="colorPrimary">@color/my_green</item>
        <item name="colorPrimaryVariant">@color/my_green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Your application's Secondary brand color. -->
        <item name="colorSecondary">@color/my_orange</item>
        <item name="colorSecondaryVariant">@color/my_yellow</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Your Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your window action bar color-->
        <item name="windowActionBar">@color/my_red</item>
    </style>
</resources>

Android Style

Implementation of Android Styles and Themes

I hope you understood what is meant by style and theme. Now is the time to take those concepts into practice. Below you can find several steps that will help to create your custom theme for the application.

Also, you will understand how to apply your designed theme and styles in your application.

Step 1: Open your Android Studio and click on Create a New Project.

Android Project

Step 2: Select Empty Activity and proceed.

Android Activity

Step 3: Enter your application name. In my case, it’s “TechVidvanThemes.” Next, select Kotlin from the dropdown. For the API level, select API 22 for now.

Android Projects

Step 4: Now go to res —> values —-> and open colors.xml. Now here, you can add your custom colors which you may require in the project. You can paste the below code in your colors.xml file.

Code: colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <!-- Adding my own colors below-->
    <color name="my_red">#F44336</color>
    <color name="my_orange">#FF5722</color>
    <color name="my_green">#4CAF50</color>
    <color name="my_yellow">#FFEB3B</color>
</resources>

Step 5: Now go to res —> values —-> and open themes.xml. Now here, you need to create your custom style and theme. You can paste the below code in your themes.xml file.

Code: themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Your own customized application theme. -->
    <style name="Theme.TechVidvanThemes" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <!-- Your application's Primary brand color. -->
        <item name="colorPrimary">@color/my_green</item>
        <item name="colorPrimaryVariant">@color/my_green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Your application's Secondary brand color. -->
        <item name="colorSecondary">@color/my_orange</item>
        <item name="colorSecondaryVariant">@color/my_yellow</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Your Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your window action bar color-->
        <item name="windowActionBar">@color/my_red</item>
    </style>


    <!-- Creating a custom style for my text view-->

    <style name="MyTextViewStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#960959</item>
        <item name="android:textSize">30sp</item>
        <item name="android:textStyle">italic</item>
        <item name="android:textAllCaps">true</item>
        <item name="android:gravity">center</item>
    </style>

</resources>

Step 6: Now go to res —> layout —-> and open activity_main.xml. Now, you need to add a text view here. You can paste the below code in your activity_main.xml file.

Code: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.TechVidvanThemes"
    android:background="@color/my_yellow"
    tools:context=".MainActivity">

    <TextView
        style="@style/MyTextViewStyle"
        android:text="Tech Vidvan Styles and Themes"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

So, this completes your application. You need not make any changes to your MainActivity file. Just go ahead and run your application.

Your application would like as follows:

Android Themes

Summary

Through this article, you understood what is meant by android style and theme. You understood the difference between the two and also understood its impact on the android dev element.

Moving forth, you understood how you could create your custom style and apply it to specific UI elements. Finally, you saw a demo application to implement both Android Styles and themes in your project.

I hope you would create your themes and would showcase them.