ZOFTINO.COM android and web dev tutorials

Android Application UI Styles and Themes

Android styles and themes are similar to CSS used in web application user interface design. You can define look and feel attributes such as color, font, padding, background, animations, etc., in one file and apply them to UI components throughout the application.

Separating styles from UI components (defined in layouts) makes maintenance and enhancement of application’s look and feel easy as style definitions are located at one place. And also, separating styles from the UI components removes the duplicate code as styles can be reused with different UI components in different parts of the application.

Android Styles

Android allows styles to be defined as resources in xml and use them with views and windows to change the look and feel of applications.

When a style is applied to a view or window, it is applicable to only the view or window and it doesn’t even applicable to child views. When a style is applied to an application or an activity, all the views or windows within the application or activity derives styles from it.

In android, styles are defined in xml and the xml file is placed in res/values folder. The root node of style xml is resources and resources element contains style elements. Each style defined under resource can be identified by its name. Style contains item elements. Each item element is used to set a value for a style attribute.

Defining Styles

To define style for a particular view, you need to first find out style attributes of the view. For example, TextView style attributes are listed here. For complete list of attributes which can be used in styles, refer R.attr.

Below is an example of style definition.

<?xml version="1.0" encoding="utf-8"?>
<style name="SubmitButton">
    <item name="android:textColor">#031063</item>
    <item name="android:textSize">25dp</item>
    <item name="android:textStyle">italic</item>
    <item name="android:padding">10dp</item>
    <item name="android:background">#6af4d4</item>
</style>

Android Platform Styles

Android platform provides various styles and some of them are default styles for views and widgets.For example, button’s default style is Widget.Button and alternate styles for button are Widget.Button.Inset, Widget.Button.Small, Widget.Button.Toggle, Widget.Material.Light.Button.Borderless.Colored, .etc.

Widget.DatePicker, TextAppearance, and Animation are some examples of android platform styles. For a complete list of android platform styles, see R.style.

Styles Inheritance

Android style definition supports inheritance meaning you can create a style by using already defined style and adding new style attributes or modifying values of parent style attributes.

Below example creates CancelButton style by inheriting styles from SubmitButton style.

<style name="SubmitButton.CancelButton">
   <item name="android:background">#c11122</item>
</style>

Styles can be created by inheriting android platform styles. Below example shows how to inherit android platform styles. Since name spaces of your style and android platform styles are different, you need to use parent attribute.

<style name="MyTextAppearance" parent="@android:style/TextAppearance">
    <item name="textColor">#7ca011</item>
    <item name="textSize">16sp</item>
</style>
 

Applying Styles

Style can be applied to a view using the style attribute as shown below. You can use other attributes to apply styles to views, for example to apply text related styles toTextView, you can use textAppearance attribute.

<Button
    …
    android:text="Register"
    style="@style/SubmitButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"/> 

Below example shows applying android platform style.

 <TextView
    ...
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    style="@android:style/TextAppearance.Material.Display1"/> 

Android Themes

When a style is applied to an entire application or an activity, the style is called theme. Theme applies style to all the UI components of an application or activity. Theme contains style definitions for common attributes such as windowBackground, windowTitleStyle, toastFrameBackground, listViewStyle, .etc applicable to windows and views.

Using theme attribute of application element and activity element of android manifest xml, styles can be applied to application and activity respectively.

Below example shows setting application level theme.

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

    <application
	....
        android:theme="@style/AppTheme">
    ...

Applying a theme to an activity.

<activity android:theme="@android:style/Theme.Material">

Android Platform Themes

Similar to android platform styles, there exist android platform themes. Some of the android platform themes are Theme.Material.Light, Theme.Material.NoActionBar, Theme.Panel, Theme.Material.Dialog.Alert, .etc. For android platform theme names, see theme_ constants inR.style. Below examples apply android platform theme to application and activity.

<application
	....
        android:theme="@android:style/Theme.Material.Light"> 
<activity android:theme="@android:style/Theme.Material.Wallpaper">

Styles Compatibility

Like any other android feature, to achieve backward compatibility, you need to use support library to make android platform styles used in your app work on devices running prior versions of Android. Below example shows using android platform theme from support library. For complete list of styles and themes available in support library, see constants in R.style.

<style name="MyAppCompatLight" parent="Theme.AppCompat.Light">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">true</item>
</style>

You may need to use new android platform styles and themes which are not available in support library. In this case, the best way to achieve backward compatibility is by creating custom themes inheriting android platform styles. You can create custom theme for different version of android and place them in corresponding res/values folder.

For example to achieve backward compatibility for compound button themes, you need to create three versions of custom themes and apply the custom theme MyButton to views in your layout. Android will pick right theme based on its version on the device.

Below style file needs to be saved in res/values as Widget.Holo.Light.CompoundButton.Star theme is available from API 11.

<style name="MyButton" parent="@android:style/Widget.Holo.Light.CompoundButton.Star">
…
</style>

Below style file needs to be saved in res/values-v21 as Widget.Material.CompoundButton.Star theme is available from API 21.

<style name="MyButton" parent="@android:style/Widget.Material.CompoundButton.Star">
…
</style>

Below style file needs to be saved in res/values-v24 as Widget.Material.CompoundButton.Switch theme is available from API 24.

<style name="MyButton" parent="@android:style/Widget.Material.CompoundButton.Switch">
…
</style>