A style resource is a collection of properties that defines the format and look for a UI. A style can be applied to an individual View by a layout file or to an entire Activity or application by the manifest file.
A style can specify properties such as height, padding, font color, font size, background color, and much more. In Android Styles works similar to CSS (cascading stylesheets) that are used in web designing application.
A style is defined in an XML resource that is separate from the XML that specifies the layout.
This XML file resides under res/values/ directory of your project and will have <resources> as the root node which is mandatory for the style file.
For example, by using a style, you can take this layout XML:
|
1 2 3 4 5 6 7 8 9 10 |
<Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="4dp" android:background="#FF0000" android:shadowDy="4" android:textColor="@color/button_text_color_light" android:textSize="22sp" android:text="@string/button" android:typeface="sans" /> |
And turn it into this:
|
1 2 3 |
<Button style="@style/MyButtonStyle" android:text="@string/button" /> |
Defining Styles:
For each style, you want to create, add a <style> element to the file with a name that uniquely identifies the style. Then add an <item> element for each property of that style, with a name that declares the style property and a value to go with it.
Note: <item> element is required for defining style.
The value for the <item> can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property. Here’s an example file with a single style:
|
1 2 3 4 5 6 7 8 9 10 |
<resources> <style name="MyButtonStyle"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">#FF0000</item> <item name="android:textColor">@color/button_text_color_light</item> <item name="android:textSize">22sp</item> <item name="android:typeface">sans</item> </style> </resources> |
Each child of the <resources> element is converted into an application resource object at compile-time, which can be referenced by the value in the <style> element’s name attribute.
In above example style can be referenced from an XML layout as
|
1 |
style="@style/MyButtonStyle" |
Style Inheritance:
Styles support inheritance by using the parent attribute of the <style> tag. We can use this to inherit properties from an existing style and then define only the properties that you want to change or add. We can inherit from own styles that we’ve created ourself or from styles that are built into the platform or we can say that default android themes and styles.
For example, we can inherit the Android platform’s default Button Style and then modify it:
|
1 2 3 4 5 |
<style name="MyButtonStyle" parent="@android:attr/buttonBarButtonStyle"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#C1C1C1</item> </style> |
or we can inherit the Android platform’s default text appearance and then modify it:
|
1 2 3 4 |
<style name="MyTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title"> <item name="android:textColor">#C1C1C1</item> <item name="android:textStyle">bold</item> </style> |
In above both examples, MyButtonStyle and MyTextStyle, both have inherited all the property of its parent style, named
|
1 |
parent="@android:attr/buttonBarButtonStyle" |
and
|
1 |
parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title" |
Both are the Android platform’s default styles.
And we can inherit our custom made style and modify it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style name="MyButtonStyle"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">#00FF00</item> <item name="android:textColor">#C1C1C1</item> <item name="android:textSize">22sp</item> <item name="android:typeface">sans</item> </style> <style name="MyButtonStyle2" parent = "MyButtonStyle"> <item name="android:background">#FF0000</item> <item name="android:textSize">16sp</item> </style> |
In above example, MyButtonStyle2 is a child style and it has inherited all the property of its parent style, named MyButtonStyle.
We can also use the different method for inheriting the style without parent attribute:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style name="MyButtonStyle"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">#00FF00</item> <item name="android:textColor">#C1C1C1</item> <item name="android:textSize">22sp</item> <item name="android:typeface">sans</item> </style> <style name="MyButtonStyle.RedSmall"> <item name="android:background">#FF0000</item> <item name="android:textSize">16sp</item> </style> |
we can see that there is no parent attribute in the <style> tag, but because the name attribute begins with the MyButtonStyle style name (which is a style that you have created), this style inherits all style properties from that style. This style then overrides the android:background and android:textSize property to make the button background red and text size on the button is to be small (16sp). You can reference this new style as @style/MyButtonStyle.RedSmall.
Note: This technique for inheritance by chaining together names by (.) only works for styles defined by our own resources. You can’t inherit Android built-in styles this way. To reference a built-in style, such as TextAppearance or buttonBarButtonStyle, you must use the parent attribute.
And simply apply to the button view
|
1 2 3 |
<Button style="@style/MyButtonStyle.RedSmall" android:text="@string/button" /> |
The style attribute does not use the android: namespace prefix.
Theme for an Activity or Application:
We have seen that how to apply a style to an individual View, by adding the style attribute to a View element in XML Layout.
But if we want to apply a style to entire Activity or application, then we use android:theme attribute to the <activity> or <application> element in the Android manifest. For example:
1: For entire application:
|
1 |
<application android:theme="@style/MyCustomTheme"> |
2: For an Activity:
|
1 |
<activity android:theme="@style/MyCustomTheme"> |
or we can also use the android default themes:
|
1 |
<activity android:theme="@android:style/Theme.Dialog"> |
This is my custom theme for entire application named MyTheme
style.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="MyCustomTheme" parent="android:Theme.Light"> <item name="android:windowBackground">@color/dark_primary_color</item> <item name="android:colorBackground">@color/dark_primary_color</item> <item name="android:actionBarStyle">@style/MyActionBar</item> </style> <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar"> <item name="android:background">@color/primary_color</item> </style> </resources> |
colors.xml
|
1 2 3 4 5 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="primary_color">#03A9F4</color> <color name="dark_primary_color">#0288D1</color> </resources> |
Now we can use MyCustomTheme instead of Theme.Light inside the Android Manifest:
For entire application:
|
1 |
<application android:theme="@style/MyCustomTheme"> |
For an Activity:
|
1 |
<activity android:theme="@style/MyCustomTheme"> |
Android default Styles & Themes:
The Android platform provides a huge collection of styles and themes that we can use in our applications. We can find a reference of all available styles in the R.style class. For know more, You can view the following source code for Android styles and themes −
1- Android Styles (styles.xml)
2- Android Themes (themes.xml)
The above links help you to know about the android platform’s default themes and styles.