Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Custom theme on Nokia X

From Wiki
Jump to: navigation, search
Featured Article
13 Apr

This article explains how to add a custom theme for Nokia X devices to your app. The theme is selected at runtime, so you can use the same codebase and even the same application package for Nokia X and other Android devices.

Note.pngNote: This article was a winning entry in the Nokia X Wiki Challenge 2014Q1

Article Metadata
Code Example
Source file: GitHub
Tested with
SDK: Nokia X software platform 1.0, 1.1, 2.0
Devices(s): Nokia X
Created: _jan_ (14 Apr 2014)
Last edited: _jan_ (25 Jun 2014)



The custom theme that is shown here is designed to resemble the style of the Nokia X platform. It focuses mainly on the action bar and doesn't change the styles of other widgets, so it should be easy to implement in most apps.

Sample app on Android …
… and on Nokia X

Creating the custom theme

Note.pngNote: The theme described in this guide uses features that are only available as of Android API level 14. If your existing app supports older versions, you have to add the resource qualifier v14 to the corresponding resource files. As the Nokia X platform is based on Android 4.1, the theme will never run on a lower API version, so this works fine.

In general, on the Android and Nokia X platforms, every UI widget can have a style applied. A theme is a set of styles for different widgets. A basic theme can be seen here:

<style name="AppTheme" parent="@android:style/Theme.Holo"></style>

This theme simply inherits from the default Holo theme that is defined in the platform framework. It is used by the sample app when running on a Android device.

Now, let's start building a custom theme for Nokia X devices. This guide describes the theme from the screenshots above, which is based on the dark holo theme. A light version and a light version with dark action bar are included in the sample project on GitHub. Modified versions for users of the action bar compatibility library are also available there.

First of all, you have to create a new XML resource file of type Values, for example named styles_nokia.xml. Then replace its contents with the following:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="">
<!-- Custom theme for Nokia X to resemble the preinstalled apps more closely. -->
<style name="AppTheme.Nokia" parent="@android:style/Theme.Holo">
<!-- Use custom back/up icon. -->
<item name="android:homeAsUpIndicator">@drawable/ic_ab_back_nokia_dark</item>
<!-- Remove background gradient. -->
<item name="android:windowBackground">@android:color/black</item>

The style named AppTheme.Nokia is the theme definition. It includes two style attributes: The window background is set to a uniform black color instead of the default gradient and the up/back icon in the action bar is changed to a custom image. For this to work, you have to download the file ic_ab_back_nokia_dark.png and add it as a Drawable resource of density xhdpi.

Action bar

Next, add styles for the action bar and the contained text. This hides the application icon and changes the background and text color to match the stock Nokia X apps. Here is the code for the styles file:

    <!-- Custom ActionBar theme. -->
<style name="AppTheme.Nokia.ActionBar"
<!-- Don't show app icon. -->
<item name="android:icon">@android:color/transparent</item>
<!-- Set backgrounds for the action bar, tabs and bottom action bar. -->
<item name="android:background">#000</item>
<item name="android:backgroundStacked">#323232</item>
<item name="android:backgroundSplit">#323232</item>
<!-- Set color for title text. -->
<item name="android:titleTextStyle">@style/AppTheme.Nokia.ActionBar.TitleTextStyle</item>
<item name="android:subtitleTextStyle">@style/AppTheme.Nokia.ActionBar.SubtitleTextStyle</item>
<!-- Title text theme. -->
<style name="AppTheme.Nokia.ActionBar.TitleTextStyle"
<item name="android:textColor">@android:color/holo_blue_light</item>
<item name="android:textSize">24sp</item>
<style name="AppTheme.Nokia.ActionBar.SubtitleTextStyle"
<item name="android:textColor">@android:color/holo_blue_light</item>

To enable the action bar style in your theme, add it to the theme definiton (AppTheme.Nokia) created earlier:

        <!-- Set custom ActionBar theme. -->
<item name="android:actionBarStyle">@style/AppTheme.Nokia.ActionBar</item>

Action bar tabs

The tabs that can be displayed within/under the actionbar are a bit more complicated. If you don't use them in your app, you can skip this part and jump to the next section.

For the tabs, you need to use state list resources that change depending on the focus and selection state of the styled widget. First, the colors for the background need to be defined, so you can create a state list drawable referencing them. Add this code to the styles file:

    <!-- Define tab colors. -->
<color name="ab_tab_bg_nokia_dark">#00000000</color>
<color name="ab_tab_bg_selected_nokia_dark">#1e1e1e</color>
<color name="ab_tab_bg_pressed_nokia_dark">#222</color>
<color name="ab_tab_bg_focused_nokia_dark">#3a3a3a</color>

Then create a new Drawable XML resource named ab_tab_indicator_nokia_dark.xml. This state list drawable references the colors you just defined. It is later used as the background for tabs.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="" >
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false"
android:drawable="@color/ab_tab_bg_nokia_dark" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false"
android:drawable="@color/ab_tab_bg_selected_nokia_dark" />
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false"
android:drawable="@color/ab_tab_bg_focused_nokia_dark" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false"
android:drawable="@color/ab_tab_bg_focused_nokia_dark" />
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true"
android:drawable="@color/ab_tab_bg_pressed_nokia_dark" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true"
android:drawable="@color/ab_tab_bg_pressed_nokia_dark" />
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true"
android:drawable="@color/ab_tab_bg_pressed_nokia_dark" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true"
android:drawable="@color/ab_tab_bg_pressed_nokia_dark" />

In addition to the background, the text color needs to be styled. Add a new Color List XML resource named ab_tab_text_nokia_dark.xml and put the following code in it:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="">
<item android:state_selected="false" android:color="@android:color/white" />
<item android:state_selected="true" android:color="@android:color/holo_blue_light" />

Now you can finally add the style definitions for the action bar tabs to the styles file, referencing the state list resources.

    <!-- Custom ActionBar tab theme. -->
<style name="AppTheme.Nokia.ActionBar.TabBar"
<!-- Disable divider. -->
<item name="android:divider">@null</item>
<style name="AppTheme.Nokia.ActionBar.TabView"
<!-- Set tab background color. -->
<item name="android:background">@drawable/ab_tab_indicator_nokia_dark</item>
<style name="AppTheme.Nokia.ActionBar.TabText"
<!-- Set tab background and text color. -->
<item name="android:textColor">@color/ab_tab_text_nokia_dark</item>

Then add references to these styles to your theme definition (AppTheme.Nokia):

        <!-- Set custom ActionBar tab theme. -->
<item name="android:actionBarTabBarStyle">@style/AppTheme.Nokia.ActionBar.TabBar</item>
<item name="android:actionBarTabStyle">@style/AppTheme.Nokia.ActionBar.TabView</item>
<item name="android:actionBarTabTextStyle">@style/AppTheme.Nokia.ActionBar.TabText</item>

List views

If you look at the preinstalled Nokia X apps, you'll notice that lists don't have separator lines. This is easily reproduced in by the following style:

    <!-- ListView theme. -->
<style name="AppTheme.Nokia.ListView" parent="@android:style/Widget.Holo.ListView">
<!-- Disable list divider. -->
<item name="android:divider">@null</item>

After you have added the style, you have to reference it in your custom theme by adding the following code to it:

        <!-- Set custom ListView theme. -->
<item name="android:listViewStyle">@style/AppTheme.Nokia.ListView</item>

Overflow button

The action bar overflow button can be replaced with a custom version that fits better to the theme. Download ic_ab_overflow_nokia_dark.png and add it as a Drawable of density xhdpi.

Then add the following style:

    <!-- Overflow button style. -->
<style name="AppTheme.Nokia.ActionButton.Overflow"
<item name="android:src">@drawable/ic_ab_overflow_nokia_dark</item>

Now you can reference it in your theme using this code:

        <!-- Use custom overflow icon. -->
<item name="android:actionOverflowButtonStyle">@style/AppTheme.Nokia.ActionButton.Overflow</item>

Implementing runtime theme selection

If you added all the resource files correctly, your app should compile fine, but you can't see any visual changes yet. This section shows you how to actually apply the theme depending on the device.

The attribute Build.MANUFACTURER can be used to read the manufacturer of the device the app is running on.

Note.pngNote: The manufacturer string is not set correctly in the first versions of the Nokia X emulator. If you want to test using the emulator, check that you have the latest version.

Add the following static method to your app. In the sample project a class named Helpers is used for this purpose, but you can put it somewhere else in your own app. You have to change the reference to to the theme you used before, it will continue to be used on other Android devices.

public static void setTheme(Context c) {
if (!Build.MANUFACTURER.toLowerCase(Locale.US).contains("nokia")) {
} else {

For your theme to take effect, you have to actually call the method. There are two different ways to do this. One is to call it once in the application object (which is not explicitly defined by default). The other one is to call it once for every activity in your app. The second approach is shown here.

Add the method call to the beginning of the onCreate method for all activities in your app. The theme should be set before you call any other method to work correctly. This will look similar to the following:

protected void onCreate(Bundle savedInstanceState) {
// Call the helper to set the correct theme.
// Set up activity.
// …

Now you are done and can test your app! If you have followed the instructions, you should now see the custom theme on Nokia X devices while the app is unchanged on any other devices.

Improved layout with disabled up indicator

In activities without up indicator you'll notice that there is a big margin before the title text. This is because the Android framework only hides the up indicator when it is disabled, but doesn't change the layout.

The app project on GitHub contains an additional narrow version of the up indicator that eliminates the unwanted margin, but doesn't look as nice. The layout can be improved by dynamically switching between this one and the wider variant depending on whether the up indicator is needed at the moment.

Simple method

If you don't change the visibility of the up indicator within any activity of your app, the easiest way to remove the margin is by creating a seperate theme that is going to be used only for the activities that have the up indicator disabled.

    <style name="AppTheme.Nokia.NarrowUp" parent="@style/Theme.Todo.Nokia">
<item name="android:homeAsUpIndicator">@drawable/ic_ab_back_nokia_dark_narrow</item>

Then you can extend the helper method that chooses the theme similar to the following code sample:

// …
if (c instanceof MainActivity) {
} else {
// …

Flexible method

If you use fragments in your main activity, or otherwise change the visibility of the up indicator in an activity, there is a bit more work to do. You'll need the ActionBar compatibility library in order to use this method on Nokia X platform 1.x.

Instead of calling ActionBar.setDisplayHomeAsUpEnabled directly, you can call a helper method that also changes the icon:

public static void setUpIndicatorEnabled(ActionBarActivity activity, boolean enable) {
ActionBar ab = activity.getSupportActionBar();
if (Build.MANUFACTURER.toLowerCase(Locale.US).contains("nokia")) {
if (enable) {
} else {

Further information

A sample app is available on GitHub. In addition to the dark theme shown here, it also includes different light colored variants. If you want to try these themes out, simply uncomment the corresponding lines in In the assets folder, you can find the icon source files and versions of the themes that work with the action bar compatibility library.

If you want to see an actual app that uses this technique, download Snake from the Nokia Store. (You have to open the link on the device itself, it doesn't work on desktop browsers currently.)

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

This page was last modified on 25 June 2014, at 15:59.
1849 page views in the last 30 days.