Remove system menu button from PhoneGap application

adminCordova0 Comment
4 min. reading

By default your PhoneGap application will contain system menu button, even on those systems (Android 4.0+) that doesn’t support this button any more (i.e. applications written for this system should not use this button; it is handled anyway and you can use it, if you really wish to).

On most new devices user pressing this button will be simply ignored by system and nothing will happen. So, this problem reduces itself to purely aesthetic means (whether you care about seeing that unusable button on system bar, when your app is active, or not).

However, there are reports, that PhoneGap applications crashes on small group of devices, when user presses this not handled system menu button. In this case, more radical solutions must be considered.

The idea (but not support) for system menu was dropped in Android 4.x (API level 14). Most devices with this or newer version of Android should simply ignore user pressing this button. However, there are report, that certain will crash on this.

There are two ways of handling this problem.

Remove system menu button at all

According to this answer at PGB support, when you set android:minSdkVersion in your config.xml to value of 14 or higher, you will be able to build PhoneGap application without system menu.

You can set this property, either using general preferences tag:

<preference name="android-minSdkVersion" value="14"></preference>
<preference name="android-targetSdkVersion" value="21"></preference>

and these values will be copied to the usesSdk attribute in the AndroidManifest.xml file during build.

Or you can use config-file style:

<widget
    xmlns = "http://www.w3.org/ns/widgets"
    xmlns:gap = "http://phonegap.com/ns/1.0"
    xmlns:android = "http://schemas.android.com/apk/res/android"
    id = "com.lumberg.greeeaaat"
    minSdkVersion = "14"
    targetSdkVersion = "14"
    version = "1.0.0"
>

Setting android namespace (i.e. xmlns:android = "http://schemas.android.com/apk/res/android") is obligatory in this case or else your config.xml file won’t pass standard XML validation during build.

This solution will, however, completely prevent users of Android older than 4.x from installing your application! Therefore, you must carefully consider, if that matters for you.

Here you’ll find information about differences between minSdkVersion and targetSdkVersion.

We’re talking (on newest mobile devices with Android 4.x+) about virtual menu button, whereas many Android 2.x devices had hardware menu button, which must be handled somehow and couldn’t be simply “removed” by system or application itself. For this reason, there probably isn’t any other way to remove virtual menu button from applications running on Android 4.x, other than declaring, that this particular application is designed for Android 4.x at minimum and therefore can’t be installed on any older version than that. Said, but true

Handle system menu button’s press gracefully

If you want your application to support Android versions older than 4.x or you can’t implement above solutions from other reasons, then you must get used to, that you’ll see system menu button. Period.

One thing, you can do, is to simply handle presses on that button:

var app =
{
    init: function()

    {
        document.addEventListener('deviceready', app.deviceReadyHandler, false);
    },

    deviceReadyHandler: function()
    {
        document.addEventListener('menubutton', app.menuButtonHandler, false);
    },

    menuButtonHandler: function()
    {
        //Do nothing...
    }
};

app.init();

For most devices (those, that ignored user pressing on system menu button) nothing will change. While this tiny group of devices, that were crashing in this case, should now not crash anymore, since system menu’s press is handled.

And, in case of this solution, your application still can be installed on Android older than 4.x.

The idea and solution presented here is based on this Stack Overflow answer.

Leave a Reply