Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Styles in Android
2.1.
Custom Style
3.
Themes in Android
4.
Frequently Asked Questions
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Styles and Themes in Android

Author Pradeep Kumar
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will look into the Styles and Themes in Android. Style specifies the format and appearance of a user interface. It can be applied to a single Activity or the entire application. We will discuss how you can create your own custom style and theme in android.

In this article, we will be using the Android Studio application, so in case you haven't yet set up the application on your system, you can check out this article.

Styles in Android

Styles are defined in an XML file located in your project's res/values/themes directory and contain the root node <resources>, which is required for the style file. The file will be present under the name themes.xml. If you are using an older version of Android Studio, then the file will be present under the name style.xml in the res/values directory.

The style element is used to declare a style in the file. You can declare multiple styles under the same resource node, but each style should have a unique name. Inside a style node, you can define different properties by item nodes corresponding to each property. For example, 

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.StylesAndThemes" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

</resources>

Custom Style

Now that we have discussed what a style is, let's see how we can design a custom style and use it in our program.

First, create a custom style in the themes.xml file. 

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.StylesAndThemes" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name= "MyCustomStyle">
        <item name="android:textSize">18pt</item>
        <item name="android:textColor">#00FF00</item>/>
    </style>
</resources>

We built a custom style called "MyCustomStyle" in the above file, which has two items: android:textSize and android:textColor.

Now, to use the custom style in the program, add it to the activity_main.xml file.

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"
    tools:context=".MainActivity">

    <TextView
        style = "@style/MyCustomStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Ninjas!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

In the above file, we have applied our customstyle to the textview.

Output:

As you can see from the output, the color of the text has been set to red and its font size to 18pt, as we defined in the style MyCustomStyle.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Themes in Android

An Android theme is simply an Android style that is applied to a full Activity or the entire application rather. A style can be applied as a theme for the whole application. In that case, all the activities supporting that style will follow it. To understand the concept better, let's define a custom theme of our own and use it in an android application. 

Now, go to your themes.xml file and add the following code to it. 

themes.xml:

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name= "MyCustomStyle" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">#332628</item>
        <item name="colorPrimaryVariant">#7EC8E3</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <item name="android:textSize">18pt</item>
        <item name="android:textColor">#000C66</item>/>
    </style>
</resources>

Let's apply our custom theme to the app now that we've finished it, and to do so, go to the AndroidManifest.xml file in the manifests directory. And change the attribute android:theme of the application node.  

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.stylesandthemes">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/MyCustomStyle">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
Now, add a text view with the style attribute set to "MyCustomStyle" in the activity_main.xml file.

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"
    tools:context=".MainActivity">

    <TextView
        style = "@style/MyCustomStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Ninjas!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

In this theme, we changed the primary color of the theme, which is reflected in the output.

Frequently Asked Questions

  1. What is the primary color in an android application?
    It is the color that is most frequently used across the android application.
     
  2. What is the difference between a primary color and a primary color variant?
    The primary variant color is generally used to differentiate between two elements of the program that have the same primary color, such as the app bar of the application and the system app bar.
     
  3. What is the theme AppCompat?
    The AppCompat library provides themes for creating Material Design-compliant apps. In order to extend AppCompatActivity for an activity, the theme must have the Theme.AppCompat as its parent theme.

Conclusion

In this article, we have extensively discussed Style and Themes in Android and its implementation in Android Studio. We discussed how a Custom Style could be created and used to style a single view or use it as a theme for the entire application.

We hope that this blog has helped you enhance your knowledge regarding Styles and Themes. All the widgets are enclosed inside a UI layout and if you would like to learn more about layouts, check out our article on Android UI layouts. And to learn in-depth about android development, check out our Android Development course on the Coding Ninjas website. Do upvote our blog to help other ninjas grow. Happy Coding!

Previous article
Double Tap And Custom Buttons
Next article
Custom UI Components in Android
Live masterclass