Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Custom theme on Nokia X

From Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
m (Croozeus - Adding to the FA list)
croozeus (Talk | contribs)
m (Croozeus -)
Line 1: Line 1:
 
[[Category:Nokia X 1.0]][[Category:Nokia X]][[Category:How To]][[Category:Tutorial]][[Category:Code Examples]]
 
[[Category:Nokia X 1.0]][[Category:Nokia X]][[Category:How To]][[Category:Tutorial]][[Category:Code Examples]]
{{FeaturedArticle|timestamp=20140414}}
+
{{FeaturedArticle|timestamp=20140413}}
 
{{Abstract|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.}}
 
{{Abstract|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.}}
  

Revision as of 04:55, 14 April 2014

Featured Article
13 Apr
2014

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 is an entry in the Nokia X Wiki Challenge 2014Q1

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


Contents

Introduction

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="http://schemas.android.com/apk/res/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>
</style>
 
</resources>

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"
parent="@android:style/Widget.Holo.ActionBar.Solid">
<!-- 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">#222</item>
<item name="android:backgroundSplit">#222</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>
</style>
 
<!-- Title text theme. -->
<style name="AppTheme.Nokia.ActionBar.TitleTextStyle"
parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@android:color/holo_blue_light</item>
</style>
<style name="AppTheme.Nokia.ActionBar.SubtitleTextStyle"
parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Subtitle">
<item name="android:textColor">@android:color/holo_blue_light</item>
</style>

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">#1a1a1a</color>
<color name="ab_tab_bg_pressed_nokia_dark">#333</color>
<color name="ab_tab_bg_focused_nokia_dark">#444</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="http://schemas.android.com/apk/res/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" />
</selector>

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="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:color="@android:color/white" />
<item android:state_selected="true" android:color="@android:color/holo_blue_light" />
</selector>

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"
parent="@android:style/Widget.Holo.ActionBar.TabBar">
<!-- Disable divider. -->
<item name="android:divider">@null</item>
</style>
<style name="AppTheme.Nokia.ActionBar.TabView"
parent="@android:style/Widget.Holo.ActionBar.TabView">
<!-- Set tab background color. -->
<item name="android:background">@drawable/ab_tab_indicator_nokia_dark</item>
</style>
<style name="AppTheme.Nokia.ActionBar.TabText"
parent="@android:style/Widget.Holo.ActionBar.TabText">
<!-- Set tab background and text color. -->
<item name="android:textColor">@color/ab_tab_text_nokia_dark</item>
</style>

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>
</style>

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>


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: This does not work in the Nokia X emulator, because the manufacturer string is not set correctly. However, you can use the Remote Device Access service to test your app on a Nokia X.

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 R.style.AppTheme 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")) {
c.setTheme(R.style.AppTheme);
} else {
c.setTheme(R.style.AppTheme_Nokia);
}
}

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 explicitely 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:

@Override
protected void onCreate(Bundle savedInstanceState) {
// Call the helper to set the correct theme.
Helpers.setTheme(this);
 
// Set up activity.
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
 
// …
}

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. Don't forget that you have to test on an actual Nokia X device or using Remote Device Access.


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 Helpers.java. 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.

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]]

2841 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×