Styles and Themes

WORK IN PROGRESS ...

Styles and Themes

A style is a collection of properties that specify the look and format for a View or window.
A style can be also applied to a single element (e.g. button), to a group of elements, to an activity.
A style can specify properties such as height, padding, font color, font size, background color, and much more.
A style is defined in an XML resource file that is separate from the XML that specifies the layout. Usually this file is the styles.xml file in the app/res/values directory.
When a style is applied to the entire application, it becomes a theme.

When creating a new app a default style is used; this style is called AppTheme and is defined in the file styles.xml of the app\res section as follows:

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

    </style>

</resources>

The snippets below show the elements the AppTheme implements (app bar, progress bar, ...) and how they looks like

App bar
Progress bar (indeterminate)
Switch
Raised button
Seekbar
TextView

Flat button
Radio button
Navigation bar
FAB button
Checkbox
Status bar

Horizontal progress bar

Changing the Style of the App

Let's now modify the application style and see which are the results. First of all let's define a new style using the Android SDK style editor; to do this open the styles.xml file, open the theme editor and modify the colors as you wish. Here my example

<style name="MyMaterialTheme" parent="Theme.AppCompat.DayNight" >

    <item name="colorPrimary">@color/myColorPrimary</item>

    <item name="colorPrimaryDark">@color/myColorPrimaryDark</item>

    <item name="colorAccent">@color/myAccent_Material_Light</item>

    <item name="android:colorForeground">@color/myForeground_Material_Light</item>

    <item name="android:navigationBarColor">@color/myNavigationBarColor</item>

    <item name="android:colorBackground">@color/myBackground_Material_Light</item>

</style>

And here the corresponding values reported in the colors.xml file.

<resources>

    <color name="colorPrimary">#3F51B5</color>

    <color name="colorPrimaryDark">#303F9F</color>

    <color name="colorAccent">#FF4081</color>

    <color name="myColorPrimary">#d29bea</color>

    <color name="myColorPrimaryDark">#8b1798</color>

    <color name="myAccent_Material_Light">#314ed2</color>

    <color name="myBackground_Material_Light">#defaf0</color>

    <color name="myForeground_Material_Light">#dff179</color>

    <color name="myNavigationBarColor">#f2ab41</color>

    <color name="myButtonBackgroundButton">#dee8f9</color>

</resources>

Let's now assume you want to apply this new style to the whole app, defining in this way a new app theme. To do this change the android:theme row in the AndroidManifest.xml for the whole app:

<application

    android:allowBackup="true"

    android:icon="@mipmap/ic_cloud"

    android:label="@string/app_name"

    android:supportsRtl="true"

    android:theme="@style/MyMaterialTheme">

    <activity android:name=".MainActivity">

        <intent-filter>

            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />

        </intent-filter>

    </activity>

</application>

and you get below results:

App bar
Progress bar (indeterminate)
Switch
Raised button
Seekbar
TextView

Flat button
Radio button
Navigation bar
FAB button
Checkbox
Status bar

Horizontal progress bar

And here the style change results shown using the Android Studio SDK simulator

Changing the Style of a Single Activity

If you instead want to apply the new style only to single Activity you have to position the theme in the specific activity section:

<application

    android:allowBackup="true"

    android:icon="@mipmap/ic_cloud"

    android:label="@string/app_name"

    android:supportsRtl="true" >

    <activity android:name=".MainActivity"

        android:theme="@style/MyMaterialTheme" >

        <intent-filter>

            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />

        </intent-filter>

    </activity>

</application>

Changing the Style of a Single Element

In this case you have to define the new style and add it into the XML activity file where the element is defined. The example below shows how to change the backgroundTint of a button.

Define the new style (e.g MyMaterialButton) in the styles.xml file

<style name="MyMaterialButton" parent="Widget.AppCompat.Button.Colored" >

    <item name="android:backgroundTint">@color/myColorPrimary</item>

</style>

Add the new style name into the element definition

<Button

    android:text="@string/ButtonColored"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/ButtonColored"

    style="@style/MyMaterialButton"

    ... />

... and here the result. The button background tint has changes its default AppTheme color from pinkA200 to my purple (#d29bea).

Changing the Button Background Style

Let's mow see how to change the background of a button by adding a colored picture. Again the steps to implement are similar to the above, i.e.:

select the image you want to use as button background
define the new style in the styles.xml file
add the new style into the element definition

Example to follows

Where to find all styles and themes

All styles and themes applicable to an element are reported in the android -> R.style section of the reference manual. Please note that the Using Platform Styles and Themes says:

The R.style reference, however, is not well documented and does not thoroughly describe the styles, so viewing the actual source code for these styles and themes will give you a better understanding of what style properties each one provides.

To review non material styles/themes follows below links

styles.xml [standard framework]
themes.xml [standard framework]
styles.xml V7 [support library]
themes.xml V7 [support library]

To review material styles/themes follow below links

styles_material.xml [standard framework]
themes_material.xml [standard framework]

Useful Links

Styles and Themes Tutorial

Google Sites

Report abuse