Android Phonegap :active CSS pseudo class doesn't work. A workaround..

If you're building a cross-platform Phonegap app, you may well run in to the issue that your CSS :active pseudo-classes simply don't work when running on Android. They may work on your a (link) elements, but not on div or others.

Luckily there's a simple workaround. This workaround will continue using the fast, native, JavaScript-free :active class on iOS, and drops back to using the JavaScript on Android.

• First, in your CSS, find every instance of the :active class. Add another rule that maps a class called fake-active to the same style.

E.g.

.my-button:active {

 background-color: blue;

}

Becomes:

my-button:active, .my-button.fake-active {

 background-color: blue;

}

• Now, in your document ready event, when running on Android only, attach event handlers for touchstart and touchend to all the classes that have used :active. Make these add and remove the fake-active class.

if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
    $(".my-button")
    .bind("touchstart", function () {
        $(this).addClass("fake-active");
    })
   .bind("touchend", function() {
        $(this).removeClass("fake-active");
    });
    .bind("touchcancel", function() {
        // sometimes Android fires a touchcancel event rather than a touchend. Handle this too.
        $(this).removeClass("fake-active");
    });
}

Note that you can use the $(".my-button, .my-other-element, .even-more-elements") jQuery syntax to bind the events to other classes too.

Edit AndroidManifest.xml in Android Phonegap Build App

Phonegap build is an awesome service that allows you to convert a bunch of HTML files into actual mobile apps for iPhone, Android, Blackberry, and more. It's great, so great in fact that Adobe recently bought the company behind it (Nitobi).

You can read more about the details at their site, I won't repeat it all here.

I've been playing around with the Android version of this for a client project I've been working on, and came up with a bit of a problem.  There's a file called AndroidManifest.xml that every Android app includes that sets up loads of important stuff such as the intent filters and the permissions needed to run the app.

Phonegap build allows you to change some of these settings using it's config.xml system.  But for other settings you are, it seems, stuck.  I needed to change the intent filter for one of my activities, and there was no way that the config.xml could do this. I posted on their forums and the very helpful guy said they may add the feature in a future release.

In the meantime though, I found another way.

It's possible to decompile the apk file that you download from Phonegap Build, change the AndroidManifest.xml file, re-compile, re-sign, and install it onto your device.

Getting the tools we need
I'm assuming that you have the Android SDK installed, if not install it and follow the instructions to put the build tools into your path.
First you need to download apktool.  This great tool allows you to decode and re-encode apk files. Download it and follow the instructions to install for your platform.
We're also going to use:

• jarsigner - part of the Java JVN (I have a binary at /usr/bin/jarsigner) 
• adb - part of the Android SDK installation (my binary is at ~/android/android-sdk-mac_x86/platform-tools/adb)

Extracting the APK file

• Download the apk file for your app from Phonegap build.
• Open up the terminal and type (substituting your folders for path/to and filenames where appropriate)

apktool d path/to/yourApp.apk path/to/output-folder

• This will extract the contents of the app into the folder output-folder.
• The AndroidManifest.xml file will be at the root of that folder.

Now you can make whatever changes to the AndroidManifest you need (setting intent filters etc).

Re-building the APK file

• Once you've finished making your changes, you can rebuild the APK file from the contents of the output-folder

apktool b path/to/output-folder path/to/yourAppV2.apk 

Re-signing the APK
If you try to install the new apk file you'll find that it fails with an invalid certificate error.
This is because apktool doesn't re-sign the apk.  It's pretty easy to re-sign the APK with the development certificate (which is what Eclipse uses when making APKs for testing).

Here's how:

jarsigner -verbose -keystore ~/.android/debug.keystore path/to/yourAppV2.apk androiddebugkey

By default the development certificate is in the ~/.android folder. When you run this, it'll ask for a passphrase - use android.

Your APK is now ready for installation!

adb install path/to/yourAppV2.apk

Android: Fading between two Activities

Here's the code to do a nice smooth fade between two Activities..

Create a file called fadein.xml in res/anim

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator"
   android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="2000" />

Create a file called fadeout.xml in res/anim

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator"
   android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="2000" />

If you want to fade from Activity A to Activity B, put the following in the onCreate method for Activity B before setContentView.

overridePendingTransition(R.anim.fadein, R.anim.fadeout);

If the fades are too slow for you, change android:duration in the xml files above to something smaller

iPhone-Style Buttons for Android

I recently started work on apps for android and quickly tired of the default buttons that Android provide - especially the nasty default flashes of green and orange when the button is tapped. Eurgh.

Happily, the Android SDK provides a neat way to build custom buttons, and to use them throughout your application. Here I present some vaguely iPhone-style gradient-filled buttons I created using this method.

Background Images

First up you need to create the button background images themselves. You need separate images for at least the normal and selected states, and optionally the 'highlighted' state too. Highlighted is when the user selects the button using the (in my opinion entirely pointless) trackpad. Here I've been a bit lazy and used the selected state for highlighted rather than making a whole new image.

You need to make versions of the image for hi-res devices like the Nexus One or HTC Desire (hdpi), and medium res versions for other devices like the HTC Legend (mdpi). So far I've used the same images for medium res and low res, and it seems fine.

Here are the images I created (right-click to download).

Hi-res png. Normal and Tapped

Medium res png. Normal and tapped

Making the images stretchable using draw9patch

Next you need to tell Android how these images can be stretched to make buttons of different sizes.

Run the draw9patch.jar application (in your android sdk's tools/lib folder).

The official instructions for the draw9patch tool are rather vague, so here's what I did.

• Drag-and-drop one of the button images onto the tool.
• The image will appear in the left panel.
• Choose an edge. I start with the top.
• Decide on which part of the image should contain the button content. For a button like this one you'd choose the largest possible straight bit of the edge you're currently working on.
• The image is displayed with an extra one-pixel gap around the edge. You're going to be drawing in the one-pixel gap to mark up the edges.
• Click and drag the mouse over the one-pixel gap to draw in black pixels to mark the largest possible straight part - make sure you don't miss any pixels.
• In the image above I've coloured in roughly the middle third of the top edge. If you make a mistake, hold shift and click to erase pixels.
• Repeat with the other edges.
• If all has gone well, you'll see a preview on the right of what the button looks like stretched.
• Repeat for each edge.
• Save the file. When you give it a name, don't provide the extension. The file will be saved as a 'name.9.png' file.
• Repeat for each image.
• My filenames were button_black.9.png and button_black_tap.9.png. Make sure you give the medium and high res images the equivalent names. This is important later!

Copy the .9.png files to your project

Copy the high-res .9.png images into your res/drawable-hdpi folder (make it if it doesn't exist), and the medium-res into res/drawable-mdpi AND res/drawable-ldpi. If you omit the ldpi image Android appears to use the high-res image on low-res devices.

Create the drawable to define normal, tapped, and highlighted states

Now we can create our custom button style. We're going to define a 'drawable' called black_button that will use the black_button and black_button_tap images we made above.

Put this in an xml file called 'black_button.xml' inside the res/drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector android="http://schemas.android.com/apk/res/android">
<item state_focused="true" state_pressed="false" drawable="@drawable/button_black_tap">
<item state_focused="true" state_pressed="true" drawable="@drawable/button_black_tap">
<item state_focused="false" state_pressed="true" drawable="@drawable/button_black_tap">
<item drawable="@drawable/button_black">
</item></item></item></item></selector>

This document tells android to use the tap image for the focused and pressed states when you use the drawable called 'black_button'.

Create the style

Next we need to define a style which we can use for the button. Android styles are a powerful way to collect together images, font, and layout settings that are common to widgets in your app. Making a style now will make it super-simple to make 'black_button' styled buttons later on.

Place this in the res/values folder in a file called styles.xml (or add the 'style' part to your existing styles if you have them). Note that we've set the background property to point to the drawable 'button_black' we just defined.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="button_black">
<item name="android:background">@drawable/black_button</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:typeface">sans</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">20sp</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">3sp</item>
</style>
</resources>

Using the style on your buttons

Now we are ready to apply this style to buttons in our app. All you need to do is to set the 'style' attribute on the Button definition in your layout.xml files to point to the style we just defined.

Here's an example.

<Button android:text="Add from URL" android:id="@+id/addButton"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:drawableLeft="@drawable/menu_add"
style="@style/button_black"
></Button>

Android: Adding a new Activity using Eclipse

To add a new screen to your android app you'll want to add a new activity. This is a slightly manual process however, so I've noted down here for future reference.

This example will add a new activity called 'Foo'.

Step 1 - Add the activity class

• In the Package Explorer, right click your main package (e.g. com.calvium.myApp) and select New / Class
• Set the new class Name (e.g. Foo.java), and set it the superclass to android.app.Activity
• Add an override for the onCreate method.
• Easy method: Open the new file and place your cursor inside the main { } block. Press CTRL-SPACE and up pops a list of possibilities. Type 'onCreate' and hit enter to generate the method stub.
• After super.onCreate add:

setContentView(R.layout.foo);

Step 2 - Create the Activity Layout File

• Back in the package explorer, right-click res / layout.
• Select New / Other / Android / Android XML File
• Call the new file foo.xml
• Add whatever controls you want to the xml file using the designer tool in eclipse, or by typing stuff manually.

Step 3 - Register the new activity in the AndroidManifest.xml file

• Open AndroidManifest.xml
• Just before the closing tag insert:

<activity android:name=".Foo">activity>