Introduction to android themes and styles part III

download
Switching themes programmatically
This post is a continuation of android themes and styles part I and II. In this section we are going to learn to:
Dynamically set the theme of an application from existing themes whether system or custom. Reference a theme from code, I assure you, I also thought it’s so obvious.


Colors

Dynamically setting the
theme of our application
This time, we shall start our changes from the main.xml file, let’s just quickly add 3 buttons in a horizontal linear layout corresponding to our 3 themes. These buttons will be used alongside one of the initial buttons (default theme) to switch between themes at runtime. Below is our new code for main.xml
 
xml version=“1.0”
encoding=“utf-8”?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
       android:orientation=“vertical” android:layout_width=“fill_parent”
       android:layout_height=“fill_parent”>
       <TextView style=“@style/myTextView”
             android:text=“typical
             android button looks like with the
default theme”

/>
       <Button style=“@style/myButton”
android:text=“default theme” android:id=“@+id/default_theme” android:onClick=“onClick”/>
       <TextView style=“@style/myTextView”
             android:text=“typical
             android button with default theme
but we have changed textColor attribute”
/>
       <Button style=“@style/myButton”
android:text=“custom style” />
       <LinearLayout android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:weightSum=“3”>
       <Button style=“@style/myButton”
android:text=“Red” android:id=“@+id/red”
android:layout_weight=“1” android:onClick=“onClick”></Button>
       <Button style=“@style/myButton”
android:text=“Green” android:id=“@+id/green”
android:layout_weight=“1” android:onClick=“onClick”></Button>
       <Button style=“@style/myButton”
android:text=“Blue” android:id=“@+id/blue”
android:layout_weight=“1” android:onClick=“onClick”></Button>
       </LinearLayout>
 
Notice how we have referenced our onclick handler from xml,
onClick  is a
method we shall create in our main Activity class.
We now go to ThemeAndStyleActivity.java
and edit for new functionality.
package
com.simplejavan.theme;
import
android.app.Activity;
import
android.content.Intent;
import android.os.Bundle;
import android.view.View;
public class
ThemeAndStyleActivity
extends Activity{

@Override

public void onCreate(Bundle
savedInstanceState) {

Intent intent=getIntent();

if(intent!=null &&
intent.getExtras() !=
null && intent.getExtras().containsKey(“theme”)){

int theme =
getIntent().getExtras().getInt(
“theme”);

getApplication().setTheme(theme);

setTheme(theme);

}

super.onCreate(savedInstanceState);

setContentView(R.layout.
main);

}
       public void onClick(View v) {

if(v.getId() == R.id.blue){

Intent i =
new Intent(this,ThemeAndStyleActivity.class);   

i.putExtra(
“theme”, R.style.Theme_Blue);

startActivity(i);

}

if(v.getId()== R.id.green){

Intent i =
new Intent(this,ThemeAndStyleActivity.class);

i.putExtra(
“theme”, R.style.Theme_Green);

startActivity(i);

}

if(v.getId() == R.id.red){

Intent i =
new Intent(this,ThemeAndStyleActivity.class);

i.putExtra(
“theme”, R.style.Theme_Red);

startActivity(i);

}

if(v.getId() == R.id.default_theme){

Intent i =
new Intent(this,ThemeAndStyleActivity.class);

i.putExtra(
“theme”, android.R.style.Theme_Black);

startActivity(i);

}

finish();
            
       }
}
Notice a few things in the above code:
  1. ·       When referencing a system theme in
    code, we append the android namespace (check the last “if”
    block) unlike a custom theme.
  2. ·       When referencing themes in code, periods
    are replaced by underscores, thus Theme.Blue becomes Theme_Blue

One last
thing to do is to adjust the manifest
xml
. Now we would want our app to
load with the default theme and then we shall see how our app switches
themes as we wish. So just go ahead and remove the explicit definition of theme
in the manifest like so:
 
xml version=“1.0”
encoding=“utf-8”?>
<manifest xmlns:android=“http://schemas.android.com/apk/res/android”
      package=“com.simplejavan.theme”
      android:versionCode=“1”
      android:versionName=“1.0”>          

<uses-sdk android:minSdkVersion=“8”
/>

<application
       android:icon=“@drawable/icon”
       android:label=“@string/app_name”>

<activity android:name=“.ThemeAndStyleActivity”

android:label=“@string/app_name”>
            <intent-filter>
                <action android:name=“android.intent.action.MAIN”
/>
                <category android:name=“android.intent.category.LAUNCHER”
/>
            </intent-filter>

</activity>

</application>
</manifest>
 
You can now
reload the application and observe our changes, below are my screen shots:
 
Theme.Green
 
Theme.Red
Theme.Blue
 
You are now
very clear about loading themes dynamically, next we shall cover colors .xml in android and how
separating colors from styles is very helpful.
 
Android colors.xml.
Just as we
created styles.xml and themes.xml in the res/values folder, color definitions are no different, only that
the styles element in the xml is replaced by color
and the value is a hex color reference starting with #.
To
demonstrate that, we shall create res/layout/colors.xml. All our color
references in the styles will now be moved here like so:
 
xml version=“1.0”
encoding=“utf-8”?>
<resources>

<color name=“red_light”>#ff0000</color>

<color name=“red”>#bb0000</color>

<color name=“green_light”>#00ff00</color>

<color name=“green”>#00bb00</color>

<color name=“blue_light”>#449def</color>

<color name=“blue”>#2f6699</color>

<color name=“white”>#ffffff</color>

<color name=“dark_fade”>#000011</color>

<color name=“black”>#000000</color>
</resources>
 
I hope the
pattern is very clear since it resembles that of styles.xml which we already covered.
Since we are
all about demonstration, this is a miniature version of a typical colors xml in
a major application. To get a more complete list, please check out this  stackoverflow question.
We can now
adjust the styles2.xml, our global
style resource, to reference its colors rather that declaring them explicitly,
the syntax is very easy and similar to the way we reference styles that I don’t
even think it’s worth explaining, here is the code:
 
version=“1.0” encoding=“utf-8”?>
<resources>
      
       <style name=“greenTheme.Button”
parent=“@android:style/Widget.Button”>

<item name=“android:textColor”>@color/green</item>
       </style>
       <style name=“greenTheme.TextView”
parent=“@android:style/Widget.TextView”>

<item name=“android:textColor”>@color/green </item>
       </style>
      
       <style name=“redTheme.Button”
parent=“@android:style/Widget.Button”>

<item name=“android:textColor”>@color/red</item>
       </style>
       <style name=“redTheme.TextView”
parent=“@android:style/Widget.TextView”>

<item name=“android:textColor”>@color/red</item>
       </style>
      
       <style name=“blueTheme.Button”
parent=“@android:style/Widget.Button”>

<item name=“android:textColor”>@color/blue</item>
       </style>
       <style name=“blueTheme.TextView”
parent=“@android:style/Widget.TextView”>

<item name=“android:textColor”>@color/blue</item>
       </style>
</resources>
We have even
made our code more maintainable by using color references rather than explicit
values. This is another classic example of separation of  concerns, very important in developing
software.
 
You can reload
your app and test that nothing has changed since we have simply moved our
colors from the styles xml to their own file and called them by reference. Nothing
changes.
 
Somebody
must be wondering if the word color in
the
@color/blue

expression refers to
the file name.

 
 The answer is NO.
 
The name of
values files don’t really matter, what matters is the resource
tag and the tag referring to what type of values these are. The common resource
type tags in res/values are:
 
  1. ·       string– for
    the string resources
  2. ·       style– for
    style resources
  3. ·       color– for
    color resources

 
The above
statement means that even if colors.xml
file was called mykala.xml or the styles.xml file was called mystyles.xml but the contents remained
the same, it would not matter.
 
Complex Colors
You might
have observed that all our demonstrations on color and themes have been leaving
out the Button view. I intended this.
 
You see, we
have been talking about simple colors and then there are complex colors. You can
understand this better with the example we are going to see shortly.
If we had
given our buttons a plain background color say green or red, they would have
looked clumsy. We all know that at one point you may click a button to execute
a function. Imagine clicking a button and you don’t see any difference in the
way it appears, you don’t know if it responded to your click or if there is
actually something happening in the background.
 
So usually,
to make our apps more responsive, we have to cater for state transitions in
such clickables as buttons. Meaning if a button is green in color, when I click
it and at the instant of clicking it appears light green and then on releasing,
it returns back to the original green, I as the user will know something is
happening. This is called “making the UI responsive”. We can achieve this in
android using complex colors.
 
Having understood
the fundamentals of complex colors, we can now make the buttons participate in
the theming party.
 
Previously,
we have been making all our texts correspond to the theme color. Since we are
going to color the button backgrounds as well, we may not be able to read the
texts on them like that, so let’s start by changing the button text colors. 
Go to
styles2.xml and change the text
colors to black.
Create 3 xml
files,  this time not in res/values but rather in res/drawables. Call them
 
  1. ·       blue_button_selector.xml
  2. ·       red_button_selector.xml
  3. ·       green_button_selector.xml

 
clear all
the autogenerated content in them and put this instead:
 
blue_button_selector.xml
xml version=“1.0”
encoding=“utf-8”?>
<selector xmlns:android=“http://schemas.android.com/apk/res/android”>
       <item android:state_pressed=“true”
android:state_focused=“false”>
             <shape>
                    <gradient android:angle=“270”
android:endColor=“@color/blue_light”
                           android:startColor=“@color/blue_light” android:centerColor=“@color/blue_light” />
                    <stroke android:width=“1dp”
android:color=“@color/blue_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
                   
             </shape>
             <inset></inset>
       </item>
       <item android:state_pressed=“true”
android:state_focused=“true”>
             <shape>
                    <gradient android:angle=“270”
android:endColor=“@color/blue_light”
                           android:startColor=“@color/blue_light” android:centerColor=“@color/blue_light” />
                    <stroke android:width=“1dp”
android:color=“@color/blue_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“false”
android:state_focused=“false”>
             <shape>
                    <gradient android:angle=“90”
android:startColor=“@color/dark_fade”
                           android:endColor=“@color/blue_light”/>
                    <stroke android:width=“1dp”
android:color=“@color/dark_fade” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“false”
android:state_focused=“true”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/blue_light”
                           android:startColor=“@color/dark_fade” />
                    <stroke android:width=“1dp”
android:color=“@color/blue_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
</selector>
 
red_button_selector.xml
xml version=“1.0”
encoding=“utf-8”?>
<selector xmlns:android=“http://schemas.android.com/apk/res/android”>
       <item android:state_pressed=“true”
android:state_focused=“false”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/red_light”
                           android:startColor=“@color/red_light” android:centerColor=“@color/red_light” />
                    <stroke android:width=“1dp”
android:color=“@color/red_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“true”
android:state_focused=“true”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/red_light”
                           android:startColor=“@color/red_light” android:centerColor=“@color/red_light” />
                    <stroke android:width=“1dp”
android:color=“@color/red_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“false”
android:state_focused=“false”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/red”
                           android:startColor=“@color/dark_fade”/>
                    <stroke android:width=“1dp”
android:color=“@color/red” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“false”
android:state_focused=“true”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/red_light”
                           android:startColor=“@color/dark_fade” />
                    <stroke android:width=“1dp”
android:color=“@color/red_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
</selector>
green_button_selector.xml
xml version=“1.0”
encoding=“utf-8”?>
<selector xmlns:android=“http://schemas.android.com/apk/res/android”>
       <item android:state_pressed=“true”
android:state_focused=“false”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/green_light”
                           android:startColor=“@color/green_light” android:centerColor=“@color/green_light” />
                    <stroke android:width=“1dp”
android:color=“@color/green_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“true”
android:state_focused=“true”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/green_light”
                           android:startColor=“@color/green_light” android:centerColor=“@color/green_light” />
                    <stroke android:width=“1dp”
android:color=“@color/green_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“false”
android:state_focused=“false”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/green”
                           android:startColor=“@color/dark_fade” />
                    <stroke android:width=“1dp”
android:color=“@color/green” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
       <item android:state_pressed=“false”
android:state_focused=“true”>
             <shape>
                    <gradient android:angle=“90”
android:endColor=“@color/green_light”
                           android:startColor=“@color/dark_fade”/>
                    <stroke android:width=“1dp”
android:color=“@color/green_light” />
                    <corners android:radius=“3dp”
/>
                    <padding android:bottom=“10dp”
android:left=“10dp”
                           android:right=“10dp” android:top=“10dp”
/>
             </shape>
       </item>
</selector>
If you have
never dealt with drawables before, just take it easy, I have posts prepared
already to tackle them indepth.
Just notice
the item  tags
under the selector   tags. Each
describes a state of the button during user interaction. The selector
  property switches the properties of the view
to which this drawable resource is applied according to the view’s current
state. For a button, the states are:
 
  1. ·       pressed and not focused
  2. ·       pressed and focused
  3. ·       not pressed and not focused
  4. ·       not pressed and focused

 
Everything
else you can ignore for now incase you are not yet familiar with them.
I can now
show you the new styles2.xml with
the changed text colors and now references to these drawable resources for the
button backgrounds:
 
Styles2.xml
xml version=“1.0”
encoding=“utf-8”?>
<resources>
      
       <style name=“greenTheme.Button”
parent=“@android:style/Widget.Button”>
             <item name=“android:textColor”>@color/white</item>
             <item name=“android:textSize”>15sp</item>           
             <item name=“android:background”>@drawable/green_button_selector</item>
       </style>
       <style name=“greenTheme.TextView”
parent=“@android:style/Widget.TextView”>
             <item name=“android:textColor”>@color/green</item>
       </style>
      
       <style name=“redTheme.Button”
parent=“@android:style/Widget.Button”>
             <item name=“android:textColor”>@color/white</item>
             <item name=“android:textSize”>15sp</item>
             <item name=“android:background”>@drawable/red_button_selector</item>
       </style>
       <style name=“redTheme.TextView”
parent=“@android:style/Widget.TextView”>
             <item name=“android:textColor”>@color/red</item>
       </style>
      
       <style name=“blueTheme.Button”
parent=“@android:style/Widget.Button”>
             <item name=“android:textColor”>@color/white</item>
             <item name=“android:textSize”>15sp</item>
             <item name=“android:background”>@drawable/blue_button_selector</item>
       </style>
       <style name=“blueTheme.TextView”
parent=“@android:style/Widget.TextView”>
             <item name=“android:textColor”>@color/blue</item>
       </style>
</resources>
just incase
you need to see how our current res folder looks currently, here is a screen
shot of mine:
 
current resources
 
We can now
reload our app and here are my screen shots:
 
 
Theme.Red now
Theme.Green now
Theme.Blue now
 
 
Now you have
a comfortable grip of themes and colors in android.
In the next
tutorial, I will be covering android drawables.

 

Thanks for
reading this post.