Sunday, 10 May 2015

Introduction to android themes and styles part I

This is my first technical blog post and somebody may wonder why I have chosen such an advanced topic… well I like to write about things as I encounter them, and what I am working on currently is themes and styles. I will be slotting in posts to cover the basics as time allows.
Please note that in this post I use eclipse indigo 3.7 for J2EE, if your environment for android development is not yet set in anyway, you may want to deal with that first and then return.


1.     You want to start creating your own visual effects in android and don't know how...
2.     You've read so many articles and posts about android themes and styles and the visual picture of the whole idea is still not that helpful...
3.     You're comfortable with android themes and styles but would casually like to find out anything knew to add to your knowledge...
well you've come to the right place.

In this blog post, I will cover:

  • what is android theme, style and the difference between the two?
  • How do I go about creating themes and styles in android?

A set of attributes whose values together define the visual representation of an android view. The way any view or widget looks in andoid is defined in a style.
Examples of attributes: background, textColor,gravity, layout_length etc.
You may not have seen this but android has various default styles which work for you in the background.
A set of styles which together define the visual representation of your app or a single activity in the app.
The difference
There is technically no difference between a style and a theme. When you look at our code shortly, you will see this more clearly.
The difference comes in scope i.e.
·       A style affects a single view while a theme affects at least an activity or the whole application.
·       A theme is normally a set of styles put together. It’s more like a parent child relationship but not quite. Because a style can be applied to any view regardless of whether it belongs to a theme or not. But a theme is only relevant when it contains styles.

As is the policy of simplejavanwe shall get right into the action and for now just do everything along with me and later, after getting the fundamentals, you will be able to tweak things around.
Create a new android project, with name ThemeAndStyle and package com.simplejavan.theme

Leave the ThemeAndStyleActivity as default and change the res/layout/main.xml to look like below:
current project structure

current screen shot

current main.xml

Notice how we have defined the same style attributes twice for both the text view and the button. Though in the button case we changed text color.
Now we are going to apply a style to remove these attributes to a different resource(xml file) so that our layout xml(main.xml) looks cleaner and secondly we will be able to share the same resource across different views.

Right click the res/values folder and navigate new->android xml or click on it and then click the android xml icon.
File name: styles.xml and under
“what type of resource would you like to create”
Values radio should be selected by default since you had earlier focused the mouse on res/values directory.
Check the following screen shots for the current main.xml and styles.xml and finally the android display.
main.xml with style reference


current screen shot

Notice how the res/layout/main.xml file has been cleaned up and all style information is hidden away in res/values/styles.xml.
we've even gone ahead to change text color of all textViews referencing our style.
Notice also that we have left the textColor attribute of our custom button still in the layout xml. We shall eliminate that in the inheritance section below.

This file mirrors the idea of cascading style sheets in normal web programming and a typical example of separation of concerns. We move all style information to it and only leave attributes applying to the specific view in the layout xml. This gives us cleaner code and helps in maintenance of our code in case you have to change an attribute which is referenced in various places.

You must also have noticed that instead of defining style information for each view we have shared style/myTextView across all TextView’s in our app, like wise all the buttons are sharing style/myButton.
This may be hard to appreciate with our small app, but when developing a non-trivial app, the number of similar view objects can increase to the hundreds and it’s not good programming practice to keep defining style attributes for each of them.

We have now learnt the basic steps in creating a style for our project. This is how you go about applying custom style for every view in android, you just have to equip yourself with the view names and attributes applying to each.
This is because some attributes are shared across most views such as layout_height and layout_width but some are mutually exclusive.
Next we are going to look at another concept called inheritance.

You must have encountered this concept in our object oriented programming. Its more or less the same;
One style can inherit information from another style. Meaning, the child style use all the attributes of the parent style.
In case the child style does not explicitly define its own attribute values, a view using it will look exactly like another which is referencing the parent child.
But in case the child style has definitions for some attributes, they will override the attribute values from the parent still retain those not defined explicitly.
Style and theme Inheritance in android goes in 2 ways;
1.     Inheriting from a style or theme the programmer has defined
2.     Inheriting from android styles and themes

By now, you have the basic understanding of how style and theme inheritance works in android, we shall now go back to our code.

First, we shall remove the textColor attribute of our custom button from the layout xml and take it to the styles xml. Keep in mind that the default style button and custom style button both share all attributes apart from the textColor. This will clear our minds on inheriting programmer created styles.

Next, we shall delve into inheriting system styles. Notice that we did not have to define all attributes for our styles.xml, this is because android uses a certain theme by default so if you don’t explicitely reference another system theme or your own theme, android still has a default theme it inherits. So we shall go ahead and make our myButton style inherit from the parent button style, which resides in the android system.

inheriting custom styles
When inheriting a style you have created yourself, you use the following notations
Append the child name to the parent name delimited by a period.
Then when referencing this child from the layout, use
Let’s see this in action:
Create 2 new styles in the styles.xml called 
from the names you can already tell what they are going to do.
Now change the references in the main.xml, this is where we now remove our explicit color attribute for the custom button style from layout xml and take it to the styles xml.
Check the screen shots for our new files and the app.
main.xml now

styles.xml with inheritance
screenshot with inheritance
We have now understood the principle of inheritance, in part II of this post, we shall complete our introduction to themes and styles with inheriting system styles and themes, colors, themes and we shall see how to create a complete theme and apply powerful visual effects to our app.
Don't forget to drop any comments or ideas in case you do have. 
In case you prefer e-mail, don't hesitate either, you could suggest ideas you think I should post about. Thanks for reading. 


No comments:

Post a Comment