Understanding Android Styles and Themes

Understanding Android Styles and Themes

Styles

This is a detail tutorial that focuses on understanding android styles and themes. Android permits you to specify the look and feel, for instance colors and fonts, of Android constituents in XML resource files. This allows you to put general style characteristics only once in one core place.

If the entry in the resource file is made use of in styling a view, it is basically known as a style, whereas if it is used for styling an activity or application it is basically known as a theme /.

style is a compilation of characteristics that spells out the look and format for a View or window. A style can spell out characteristics like height, padding, font color, font size, background color, and a lot more. A style is specified in an XML resource that is distinct from the XML that spells out the layout.

Styles in Android share a like attitude with cascading style sheets in web design-they permit you to split the design from the content.

Every one of the attributes related to style have been alienated from the layout XML and put into a style definition known as CodeFont, which is then applied with the style characteristic.

To specify a style or a theme, save an XML file in the /res/values directory of your project. The root node of the XML file ought to be <resources> and you make use of a style label that incorporates the name attribute. This tag is made up of more material labels which specify values for named characteristics.

The styles.xml XML file below is an instance 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 designate the style characteristic to your elements, for instance to the text elements through style=”@style/text.

Defining Styles

To produce a collection of styles, save an XML file in the res/values/ directory of your project. The name of the XML file is arbitrary, but it ought to make use of the .xml extension and be saved in the res/values/ folder.

The root node of the XML file ought to be <resources>.

For every style you wish to produce, add a <style> element to the file with a name that singularly specifies the style (this characteristic is needed). Then incorporate an <item> element for every property of that style, with a name that specifies the style property and a value to go with it. The value for the <item> can be a keyword string, a hex color, a reference to a different resource form, or other value depending on the style attribute.

Every child of the <resources> element is transformed into an application resource object at compile-time, which can be referred to  by the value in the <style> element’s name characteristic. This type of style can be referenced from an XML layout as @style/CodeFont .

The parent characteristic  in the <style> element is non-compulsory and specifies the resource ID of another style from which this style ought to inherit properties. You can then override the inherited style characteristics if you wish to.

Memorize, a style that you want to make use of as an Activity or application theme is specified in XML precisely the same as a style for a View. A style like the one defined above can be applied as a style for one View or as a theme for the whole Activity or application.

Theme

A theme is a style applied to the whole Activity or application, instead of  a single individual View . When a style is applied as a theme, each one of the Views in the Activity or application will apply every one style characteristic that it supports. For instance, you can apply the same CodeFont style as a theme for an Activity and then every text inside that Activity will possess green monospace font.

Inheritance

Styles and themes sustain inheritance by making use of the parent attribute of the style tag. In this manner, the style takes over every settings from the parent style and can overwrite chosen characteristics.

Referring attributes in the current theme

Android catalogs every all normal characteristics can be styled in the R.attr file. The reference for this file can be obtained on the net through the URL: R.attr.

You can make reference to individual characteristic s of the present Android theme through the ?android:attr notation. This notation signifies that you are making reference to a style characteristic in the presently vigorous theme.

For instance ?android:attr/listPreferredItemHeight signifies: ” to make use of  the value specified by the characteristic known as listPreferredItemHeight in the present theme.

The layout below 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>

Themes

An android theme is a style used in the whole activity or application, instead of a single individual View as in the previous example. The method of specifying a theme is related to that used for defining a style.

Making Use of Android platform themes

When and how to make use of the holo design

The holo design can be made use of as of API 14 and before API 21.

1. @android:style/Theme.Holo

2. @android:style/Theme.Holo.Light

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

When and the manner to make use of material design

As of API 21 the material design is the fresh default design you ought to make use of.

1. @android:style/Theme.Material (dark version)

2. @android:style/Theme.Material.Light (light version)

3. @android:style/Theme.Material.Light.DarkActionBar

The v7 Support Libraries make available themes with stuff design styles for a few widgets. This offers you the opportunity to make use of material design on previous releases.

Styling the color palette

As of material design you can modify the themes foundation colors.

You can as well style the status bar with the android:statusBarColor characteristics. By default, android:statusBarColor takes over the value of android:colorPrimaryDark.

Styling individual views and view groups

For Android 5.0 (API 21) you can as well designate the android:theme for a view. This permits you to alter the theme for this element and its child elements.

The most excellent practice for choosing themes

It is taken as an excellent practice to take over the default platform style (the natural style) and to adapt it. It is known as natural style because this style feels natural to the users on the platform. Users which are already accustomed to Android 2.x applications on their phone are normally not pleased if you provide your application in an entirely different style such as holo.

You characteristically make use of resource-qualifiers to specify which platform you accede to.

Inherit  for v14 the android: Theme.Holo.Light.DarkActionBar style, and for v11 android:Theme.Holo.Light and android:Theme.Light for older editions.

Be aware that you may as well make use of material design on earlier edition of Android. Google is porting the majority of their applications to material design, thus, this may become the natural style for the majority of users  in no distant time.

Responsive design and consideration

It is a good practice to allow the application scales with the device. On a small screen, just one section is revealed, on a bigger screen, a second or even third section may be seen.

Inheritance

The parent characteristic in the <style> element allows you to spell out a style from which your style ought to inherit characteristics. You can make use of this to inherit characteristics from an existing style and subsequently define just the characteristics that you want to alter or add. You can inherit from styles that you’ve produced yourself or from styles that are constructed into the platform. For instance, you can inherit the Android platform’s default text appearance and then adjust it:

<style name="GreenText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00FF00</item>
    </style>

If you wish to inherit from styles that you’ve personally defined, you don’t need to make use of the parent characteristics. Rather you merely need to prefix the name of the style you wish to inherit to the name of your fresh style, divided by a period. For instance, to produce a fresh style that inherits the CodeFont style defined above, but create the color red, you can author the fresh style such as:

  <style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>

Observe that there is no parent characteristic in the <style> label, but due to the fact that the name attribute starts with theCodeFont style name (which is a style that you have produced), this style inherits all style attributes from that style. This style then overrides the android:textColor attribute to make the text red. You can make reference to this new style as @style/CodeFont.Red.

You can go on to inherit many times as you’d wish, by linking names with periods. For instance, you can broaden CodeFont.Red to be larger, with:

<style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
</style>

This inherits from both CodeFont and CodeFont.Red styles, and subsequently adds the android:textSize attribute.

This method for inheritance by linking together names is only applicable for styles defined by your own resources. You can’t inherit Android built-in styles in this manner. To refer to a built-in style, like Text Appearance, you ought to make use of the parent attribute.

Application of Styles and Themes to the UI

There are two manners to set a style:

1. To a single View, by adding the style attribute to a View element in the XML for your layout.

2. Or, to the whole Activity or application, by adding the android:theme attribute to the <activity> or <application> element in the Android manifest.

When you apply a style to a single View in the layout, the characteristics defined by the style are applied just to that View. If a style is applied to a ViewGroup, the child View elements will not inherit the style properties – just the element to which you directly apply the style will apply its properties. Nevertheless, you can make application of a style in order that it applies to every View elements -by  the application of the style as a theme.

To apply a style definition as a theme, you ought to apply the style to an Activity or application in the Android manifest. When this is done each one of the  Views inside the Activity or application will be applicable to every one of the attribute it supports. For instance, if you apply the CodeFont style from the earlier examples to an Activity, in that case, every view that does not support the text style properties will apply them. Any View that does not support the attributes will by pass them. If a View supports just a few of the attributes, in that case it will be applicable to just those properties.

Application of a theme to an Activity or application

To place a theme for every one of the activities of your application, open the AndroidManifest.xml file and edit the<application> label to include the android:theme characteristic with the style name. For instance:

<application android:theme=”@style/CustomTheme”>

If you want a theme applied to merely an Activity in your application, then add the android:theme characteristic to the<activity>  label instead.

The way android makes available other built-in resources, there are several pre-defined themes that you can make use of, to circumvent writing them yourself. For instance, you can make use of the Dialog theme and make your Activity look like a dialog box:

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

Or if you wish the background to be transparent, make use of the Translucent theme:

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

If you would love to make use of a theme, but want to twist it, merely add the theme as the parent of your customized theme. For instance, you can alter the traditional light theme to make use of your own color in this way:

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>

Be aware that the color requires to be supplied as a distinct resource here due to the fact that the android:windowBackground attribute merely supports a reference to a different resource; unlike android:colorBackground, it cannot be offered a color literal.)

At this stage make use of CustomTheme rather than Theme.Light  within the Android Manifest:

<activity android:theme="@style/CustomTheme">

OTHER INTERESTING POSTS:

Add a Comment