Monday, March 30, 2015

How to change the Android ActionBar background from the default dark color

By default, the background color of the ActionBar in any Android App is black as shown in the example below.

I wanted to style the background to a different non-black color. After some investigation, I had to do the following:
  • Choose a color
  • Define a custom theme
  • Assign the custom theme to the application
Choose a color
  1. Decide on a color to use for the background e.g. red or #303f9f in hex.
  2. Decide on a color for the text e.g. white of #ffffff in hex.
  3. Add these colors to the Android app's XML file e.g. [app]/res/values/color.xml.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="actionbar_background">#303f9f</color>
<color name="actionbar_text">#ffffff</color>
</resources>


Define a Custom theme

  1. Open up the Android app's styles XML file e.g. [app]/res/valuess/styles.xml, in a text editor.
  2. Append in a new style e.g. CustomActionBarTheme that inherits a parent theme e.g. Theme.AppCompat.Light.DarkActionBar.
  3. Append in new styles for the action bar, title text, and tabs text, e.g. MyActionBar, MyActionBarTitleText and MyActionBarTabText.
  4. The following code shows the complete styles.xml file.

<resources>
 
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
 
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
 
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="actionMenuTextColor">@color/actionbar_text</item>
</style>
 
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse" >
<item name="android:background">@color/actionbar_background</item>
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
 
<!-- Support library compatibility -->
<item name="background">@color/actionbar_background</item>
<item name="titleTextStyle">@style/MyActionBarTitleText</item>
</style>
 
<!-- ActionBar title text -->
<style name="MyActionBarTitleText"
parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
</style>
 
<!-- ActionBar tabs text -->
<style name="MyActionBarTabText"
parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
</style>
 
</resources>


Assign the new custom theme to the Android Application

  1. Open up the AndroidManifest.xml file in a text editor.
  2. In the application tag, change the theme to the new theme e.g. @style/CustomActionBarTheme.
  3. The following code snippet shows the relevant portion of the edited AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:installLocation="auto"
package="com.dom925.demo" >
 
<application
android:name=".App"
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/CustomActionBarTheme">
 
<!-- etc -->
 
</manifest>

Now the application's ActionBar should be using the custom theme with a non-black background.

Friday, March 20, 2015

Enabling the Developer options on Xiaomi Redmi Note Android phone

If you want to develop Android apps using a Xiaomi Redmi Note mobile phone, you'd find it to be missing the developer options, as shown in the General Settings screen below.

This is not enabled by default but it can be switched on by doing the following.

  1. Open up Settings.

    The General Settings screen appears.
  2. Tap on About phone.

    The About phone screen appears.

  3. Tap Android version several times.

    The message You are now a developer appears.
  4. Close the About Phone and Settings screens.
  5. Open up Settings.

    The General Settings screen appear.

    Note: the {} Developer options are now available.

Monday, March 2, 2015

Trainsity Osaka Windows Phone App

Carry these high resolution vector maps of Osaka city's subway train network in your Windows Phone and find your way around Osaka. The maps have small file sizes and can be accessed without a data connection. The following metro rail lines are available:
  • Midosuji, 
  • Tanimachi, 
  • Yotsubashi, 
  • Chuo, 
  • Sennichimae, 
  • Sakaisuji, 
  • Nagahori-Tsurumi-ryokuchi, 
  • Imazatosuji, 
  • Newtram Nanko Port Town, 
  • Kita Osaka Kyuko, 
  • Kintetsu Keihanna, 
  • Hankyu Kyoto, 
  • Hankyu Senri, 
  • Osaka Monorail, and 
  • Kitakyu Namboku lines.
Users can click the train station labels to open the external Bing Maps app where they can use all the functions of the external app to visualize the surrounding area including querying for directions. This app has its own directions function for finding the best path from one train station to another.

On a Windows Phone handset, the app will display tiles of train lines, which when tapped will open up a detail view of the metro transit map, as shown below.
Tapping the station labels will bring up an option menu where users can choose to display the station location in Bing Maps.
If you want to find how long it takes to travel from one station to another, and the best route to take, simply swipe to the Route page. Then type in the From station and To station. As you enter the values, a drop down list will appear and a station can be selected from the list. Finally tap the Execute icon.
Tapping the more details link will display the recommended route to take.
 Click the button below to download the app from the Windows Phone store.