Changing Your Android App's Theme Dynamically

April 8, 2013

In this tutorial, I'll provide a brief intro into the concept of themes in Android, before showing you how to put themes to work by creating a project where the user can change the app's theme dynamically at runtime, simply by clicking a button.

Intro to Themes

In Android, 'themes' are an easy way to apply consistent formatting to your user interface (UI.) Defining a theme in advance not only saves you coding time in the long run, but it means that if you ever need to make UI adjustments, you only need to touch the code in one location. This saves you time and reduces the chances of human error.

'Themes' and 'styles' are often used almost interchangeably in Android tutorials. For the sake of clarity, we'll focus on themes in this tutorial, but in reality the only difference between a theme and a style is their scope:

A theme is a set of formatting rules applied across entire activities or applications.

A style is a set of formatting rules applied to a View.

Creating a Custom Theme

The Android platform includes some pre-defined themes, but it's easy to create your own so we'll jump straight into defining a custom theme.

When you create an Android project, Eclipse automatically generates a 'styles.xml' file in the res/layout folder. You can define themes in 'styles.xml' or if you want to keep your themes and styles separate you can create a dedicated themes file. To create a 'themes.xml' file, right click and select 'New' followed by 'Android XML File.'

Whether you're working with 'themes.xml' or 'styles.xml,' custom themes are defined in the following steps:

1) Add the opening and closing 'resources' tags:

<resources>
</resources>

2) Give your theme a unique name, and add the closing 'style' tag:

<resources>
<style name="BlackTheme" >
</style>
</resources>

3) Define the visual aspects of your theme using pairs of XML attributes and values:

<item name="android:background">#000000</item>

In this tutorial, we'll create two themes that define different background colors and text colors:

Create Your Layout

To check that the theme switching functionality is working, we'll create a layout that highlights changes of text and background color. We'll also give the user a way of toggling between the themes and of course, let them know that the app has this option in the first place!

import android.view.View.OnClickListener;

These are the import statements for the various classes and interfaces used in your app. The 'OnClickListener' is especially important as this allows a callback to be invoked when your buttons are clicked.

public class MainActivity extends Activity implements OnClickListener

{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
themeUtils.onActivityCreateSetTheme(this);
setContentView(R.layout.activity_main);

It's impossible for a theme to be black and blue simultaneously, hence the break statements (if the button that's pressed is black, there's no need for your program to run through the blue button code.)

Note, this last section will throw plenty of errors, but in the next step we'll create the themeUtils class and these warnings will disappear.

Create themeUtils.java

The next step is to create the new class that we're referring to in MainActivity.java, and create some static methods to support our theme changing functionality. To create a new class, open the src/package directory. Right-click, open the 'New' menu and select the 'Class' option. Enter the name 'themeUtils.'

Check Your Work

All the errors created by the references to themeUtils.java should now have disappeared; (if they haven't, hit the 'Save' button to force Eclipse to recognize your changes.) Now it's time to boot up the emulator, or launch the app on an attached device, and take a look at your work.

Launch the app

Click the buttons to check the theme switching functionality works.

Check the theme switching functionality

Moving On...

One of the major benefits of Java, is that there's no need to touch previously tested code when adding new functionality. If at this point you wanted to add an extra theme, you'd work your way through the different files and add a few lines of new code to each, for example:

6) Boot up the emulator or external device, and take a look at the difference a few lines of code can make:

The difference a few lines of code can make

About the Author:

Jessica Thornsby is a technical writer based in Sheffield. She spends her spare time editing the CD reviews section at www.leedsmusicscene.net, contributing to A Short Fanzine About Rocking, and researching her family tree.