.ellipsistext {
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 }

Everything should work great right?! Well not exactly, we all know that Android’s browser, and especially the built in WebView have many quirks. If you happen to have the following CSS rule in your stylesheet:

* {
 text-rendering: optimizeLegibility;
 }

Android will render the ellipsis AND the text they should be covering up. Really annoying bug, with a really simple fix!

An example of the RGBa syntax is as follows:

.modal_background {
    background: rgba(0, 0, 0, 0.5);
}

The first three values are the colors and the last is the alpha value. Its on a scale of 0-1 and accepts decimals such as 0.5 or 0.55.

Browser Support:

Blackberry: BBOS 6+
Android: 2.1 +
iOS: 3.2 +
IE: 9+
Other Desktop: Everything

As you can see almost any current browser with the exception of IE supports RGBa color values. This means we can use them without worrying about compatibility.

Here’s a little preview of some of the things you can do!

Heres the code for the examples above:

.dark{
    background: rgba(0, 0, 0, 0.75);
}
.lighter{
    background: rgba(0, 0, 0, 0.5);
}
. lighest {
    background: rgba(0, 0, 0, 0.25);
}

Add a comment if you have questions!

System.getProperty("os.name").equals("qnx");

There we go, we just need to add a static method to a utility class so we can easily check if our app is running on a QNX device.

public class Consts
{
    public static boolean isPlaybook()
    {
        return System.getProperty("os.name").equals("qnx");
    }
}

As an app developer there are many scenarios where I want to launch other apps on the device. This is almost always accomplished using Androids wonderful intent system, but there are scenarios where you can improve the experience for your users. Lets look at an example of this flow.

I have Facebook installed on my phone and try to access the Instagram application from the sidebar. Since I don’t have the app installed Facebook opens the Play Store and directs me to the  download page for Instagram.

This is all sounding great so far right? Now for whatever reason I get distracted and hit the home button or take a call etc. Lets take a look at what happens next time I hit the Facebook icon on my home screen:

Boom just like that I’m right back where I left off, but I’m in the Play Store. Wait what?! That’s likely the reaction of many of your users, especially if they have been gone for a long time. Even though they clicked on the Facebook icon they are in the Play Store looking at the Instagram listing. Now Android is doing its job here, exactly what we asked it to do but in this case I don’t think its the best experience for our users. It would be better for them to always end up in our app when they launch it from the home screen.

Luckily there’s a really easy fix. Whenz creating our intent we just need to set a flag FLAG_ACTIVITY_CLEAR_WHEN_TASK_RESET so that android knows this is a break in the flow of our app. We are telling the system the next time a user resets ( or reopens ) our app please clear this activity off the stack.

Quick example of the code to set a flag on our intent:

Intent testIntent = new Intent( Intent.ACTION_VIEW, Uri.parse("market://details?id=packagename"));
testIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_WHEN_TASK_RESET);
startActivity(testIntent);

This is really easy to accomplish and you should consider updating your apps if they fall into this trap! Let us know what you think in the comments.

Lets take a look at an example of the problem and then I’ll explain an easy fix. I have an existing activity that is using the no title bar theme:

<activity
android:name="com.example.main"
    android:theme="@android:style/Theme.NoTitleBar"
    android:label="@string/app_name"
    />

I can’t simply change to the new holo theme as follows because it will break compatibilty with 1.X and 2.X phones:

<activity
    android:name="com.example.main"
    android:theme="@android:style/Theme.Holo.NoActionBar"
    android:label="@string/app_name"
    />

Luckily there is an easy solution to this problem! We just need to create our own themes that inherit from the standard android ones. We can then place the files into folders using resource qualifiers to make sure the correct theme gets applied on the correct device.

Your application will already have a values folder in its res directory, we can add a new one called values-v11. If you know about version qualifiers already feel free to skip ahead, otherwise I’ll quickly explain them here. We can qualify the items in a resource folder by adding qualifiers. These can be based on the android platform version, the screen density or many other options. For this example we need to apply different styles for devices running android versions 1.X and 2.X and devices running 3.X and 4.X. When using resource qualifiers you have to use the platform version. You can look them up here. The qualifiers work on a best-match system that is beyond the scope of this post but any version greater than 11 will use our new values-v11 folder. You should end up with something that looks like this:

You will need to start by creating a themes.xml file in the values folder and add the following text:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="Theme.Default" parent="@android:style/Theme"></style>
    <style name="Theme.NoTitle" parent="@android:style/Theme.NoTitleBar"></style>
    <style name="Theme.FullScreen" parent="@android:style/Theme.NoTitleBar.Fullscreen"></style>
</resources>

What we have done here is created three custom themes called Theme.Default, Theme.NoTitle and Theme.FullScreen and used the standard android themes as the parents. Now you can create a new themes.xml or copy this one into the values-v11 folder you created earlier. Edit it as follows:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="Theme.Default" parent="@android:style/Theme.Holo"></style>
    <style name="Theme.NoTitle" parent="@android:style/Theme.Holo.NoActionBar"></style>
    <style name="Theme.FullScreen" parent="@android:style/Theme.Holo.NoActionBar.Fullscreen"></style>
</resources>

Now we need to go back to our application manifest and update the activities theme to one of our new custom ones:

<activity
    android:name="com.example.main"
    android:theme="@style/Theme.NoTitle"
    android:label="@string/app_name"
    />

We’re all done. If the user is using an older version of android they will get the old no title bar theme and if they are using a new one they will see the new Holo theme. You may think this doesn’t really matter but if you set the theme to NoTitleBar and the user is running the app on a new device the will see dialogs from the older android versions. This can confuse users because its not what they are used to seeing, or leave them wondering why your app doesn’t work properly on their phone.

Feel free to post any questions below and make sure you use the right themes!!