Thursday 23 June 2016

Designing Android Interface : Themes

Android provides various built in themes that can be applied by adding the :theme attibute to Activity together with name of Activity or to Application label in the manifest file.  Adding the theme attribute to the Activity only changes the theme for an Activity where as Adding to the Application changes theme to all those activities except the activities that has :theme attribute.

You can choose to use your own theme or the them in android:style libraries. Choosing the theme is a very difficult as we have to apply the theme each time and see it by running the app.

Let us make it Simple and Effective
The normal themes are:
1. @android:style/Theme.Dialog is the theme name that make the activity appear as a dialog box.
2. @android:style/Theme,Translucent is also a theme name that makes you activity transparent. The background is visible.
3.@:style/yourTheme is the theme that you have create in the and place in style.

So what is a Style in Android:
Style defines the look and format of the view or the window. It is composed of collection of properties like
1. Height
2. Padding
3. Font Color
4. Font Size
and more
Style once defined can be linked to other views so that you should not write the properties already described in style for in each view in layout file.

Okay thats a Syle, the what is Theme ?
The answer is simple, the theme is a other name of the style if it is applied to the whole activity and all its views. Style is also the xml file with the views name like <TextView and its properties. So all the text views in Activity will have the properties of <TextView defined in the style and their additional properties like hint.
Below is the example that will show how to create style and Apply to the specific view in layout file or to the whole Activity(ie such style is called Theme)

#Defining Style: A style is a xml file that contains a view like<TextView> and its properties. It may contain only one view or collection of views and their properties.The xml file should be placed inside res/values, Example:

Right Click in the directory res/values the style xml file then chose the filename for xml, then you get,
<?xml version="1.0" encoding="utf-8"?>
<resources></resources>
inside <resources> </resources> place the <style></style> and provide the name and parent of the style and other properties as follows.
<?xml version="1.0" encoding="utf-8"?><resources>
    <style name="myStyleEditText" parent="@style/TextAppearance.AppCompat.Title">
          <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:textColor">@android:color/holo_blue_light</item>
        <item name="android:typeface">serif</item>
        <item name="android:layout_marginLeft">10dp</item>
    </style>
</resources>
Here the name is required/must and parent is the style from which our style "myStlyeEditText" inherit the properties i.e parent="@style/TextAppearance.AppCompat.Title"or it may be also be parent="@style/TextAppearance.AppCompat.Light" or any other you like.

That's all, a style is created with a name "myStlyeEditText" . To use this style we will do something like this in the view like <TextView> in the layout file.
<EditText    android:id="@+id/editText"   
 android:hint="@string/search"    
  android:layout_marginLeft="10dp"   
 android:layout_marginRight="10dp"    
style="@style/myStyleEditText"     />
Here in the View ie <EditText> style attribute is added which is reference to the style  "myStyleEditText" which we made. We can even include <item name="android:layout_marginLeft">10dp</item> in the style and remove the android:layout_marginLeft="10dp" from<EditText> and so on for other properties like hint,layout_marginRight.

Further more this style that we made now can also be used as a parent as

<style name="myStyleEditText.Red">
    <item name="android:textColor">@android:color/holo_red_dark</item>
</style>

This style is same as "myStyleEditText" but overrides the @android:color/holo_red_dark to Red color.

#Defining Theme:
To apply the theme for whole application include in<Application together with label as
android:theme="Theme.AppCompat.Light.DarkActionBar">
Or parent="Theme.AppCompat.Light.NoActionBar"
Also you may use the your theme which is defined like
<style name="myTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowBackground">@android:color/holo_blue_light</item>
    <item name="android:colorBackground">@android:color/black</item>
</style>
And use it as android:theme="@style/myTheme"> in the manifest file. for <Application> or<Activity>

That's all, you have created your theme which is inherited from parent theme.

More at: https://developer.android.com/guide/topics/ui/themes.html#DefiningStyles

2 comments:

  1. नमस्ते, awesome tutorial, it helped me a lot. Thanks!

    ReplyDelete
    Replies
    1. Namaste Sir, I am pleased that you liked my post.

      Delete