Styles and Themes

Styles and Themes are used to change the look and feel of Views and appearance of application based on our requirements. By using Styles and Themes we can reduce the code duplication and make our app light & responsive.

Generally, the style is a combination of multiple attributes such as background color, font color, font size, font style, height, width, padding, margin, etc. and it is used to change the look and feel of View or window.

A style resource defines the format and look for a UI. A style can be applied to an individual View (from within a layout file) or to an entire Activity or application (from within the manifest file).

We can define style in xml file that resides into res/values folder, you can define multiple style using <style> tag, each style has it's own name to identify.

We will create custom text style as below:

<style name="customTextStyle">
    <item name="android:textColor">@android:color/holo_red_dark</item>
    <item name="android:textSize">12pt</item>
    <item name="android:background">@android:color/holo_blue_dark</item>
</style>


Now we will apply this style to AppCompatButton as below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Custom Style"
        style="@style/customTextStyle"
        android:layout_centerInParent="true"/>
</RelativeLayout>


Android Style Inheritance

We can inherit parent element attribute in <style>, an existing style and define only the attributes that we want to change or add. shown in below code snippet:

<style name="customTextStyle" parent="@android:style/Widget.TextView">
    <item name="android:textColor">@android:color/holo_red_dark</item>
    <item name="android:textSize">12pt</item>
    <item name="android:background">@android:color/holo_blue_dark</item>
</style>


Android Themes

Theme is a style that is applied to an entire Activity or app, instead of an individual View like as explain above. When we applied a style as a theme, the views in Activity or Application apply to the all style attributes that supports. For example. If we apply customTextStyle as a theme for an activity, then the text of all the views in activity appears in the same style.

To set a theme for all the activities of your application, open the AndroidManifest.xml file and edit the <application> tag to include the android:theme attribute with the style name. For example

android:theme="@style/MyAppTheme"

And we create custom application style as:

<style name="MyAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@android:color/holo_red_dark</item>
    <item name="colorPrimaryDark">@android:color/holo_green_dark</item>
    <item name="colorAccent">@android:color/holo_blue_dark</item>
    <item name="android:windowBackground">@android:color/holo_orange_dark</item>
    <item name="android:colorBackground">@android:color/darker_gray</item>
</style>