Android: listview Working with Styles and Themes

1. Styles and Themes

1.1. Styles

Android allow you to define the look and feel, for example colors and fonts, of Android components in XML resource files. This way you have to set common style attributes only once in one central place.

If the entry in the resource file is used to style a view, it is typically referred to as a style, while if it is used for styling an activity or application it is typically called a theme /.

To define a style or a theme, save an XML file in the /res/values directory of your project. The root node of the XML file must be <resources> and you use a style tag that includes the name attribute. This tag contains than more or more item tags which define values for named attributes.

The following styles.xml XML file is an example for a style definition.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="text">
        <item name="android:padding">4dip</item>
        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
        <item name="android:textColor">#000000</item>
    </style>
    
    <style name="layout">
        <item name="android:background">#C0C0C0</item>
    </style>
</resources> 

You assign the style attribute to your elements, for example to the text elements via style=”@style/text.

1.2. Inheritance

Styles (and themes) support inheritance by using the parent attribute of the style tag. This way the style inherits all settings from the parent style and can overwrite selected attributes.

1.3. Referring attributes in the current theme

Android lists all standard attributes which can be styled in the R.attr file. The reference for this file can be found online under the following URL: R.attr.

You can refer to individual attributes of the current Android theme via the ?android:attr notation. This notation means that you are referring to a style attribute in the currently active theme.

For example ?android:attr/listPreferredItemHeight means: "use the value defined by the attribute called listPreferredItemHeight in the current theme.

The following layout defines buttons with the Android 4.0 button style.

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

    <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button01"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Show" />

        <Button
            android:id="@+id/Button02"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Change" />
    </LinearLayout>

    <EditText
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

</LinearLayout> 

1.4. Themes

A theme is a style applied to an entire activity or application, rather than an individual View (as in the example above). The technique of defining a theme is the same as defining a style.

The next example show how to define your own theme while extending a platform theme.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyTheme" parent="android:Theme.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/translucent_red</item>
        <item name="android:listViewStyle">@style/MyListView</item>
    </style>

    <style name="MyListView" parent="@android:style/Widget.ListView">
        <item name="android:listSelector">@drawable/ic_menu_home</item>
    </style>

</resources> 

2. Using Android platform themes

2.1. When and how to use the holo design

As of API 14 and before API 21 the holo design can be used.

• @android:style/Theme.Holo
• @android:style/Theme.Holo.Light
• @android:style/Theme.Holo.Light.DarkActionBar

2.2. When and how to use material design

As of API 21 the material design is the new default design you should be used.

• @android:style/Theme.Material (dark version)
• @android:style/Theme.Material.Light (light version)
• @android:style/Theme.Material.Light.DarkActionBar

The v7 Support Libraries provide themes with material design styles for some widgets. This allows you to use material design on earlier releases. See Maintaining Compatibility for how to use the new theme in earlier releases.

2.3. Styling the color palette

As of material design you can customize the themes base colors. The following screenshot shows several of these colors..

The following listing is an example of styling it with different colors (defined in your /res/values folder).

<resources>
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources> 

You can also style the status bar with the android:statusBarColor attribute. By default, android:statusBarColor inherits the value of android:colorPrimaryDark.

2.4. Styling individual views and view groups

As of Android 5.0 (API 21) you can also assign the android:theme for a view. This allows to change the theme for this element and its child elements.

2.5. Best practice for selecting themes

It is considered best practice to inherit the default platform style (the natural style)and to customize it. It is called natural style as this style feels natural to the users on this platform. Users which are used to Android 2.x applications on their phone are usually not happy if you offer your application in a completely different style like holo.

You typically use resource-qualifiers to define which platform them you inherit.

Inherit as of v14 the android:Theme.Holo.Light.DarkActionBar style, as of v11 android:Theme.Holo.Light andandroid:Theme.Light for older versions.