Remove system menu button from PhoneGap Build application

Question

All my PhoneGap Build applications contains system menu button:

It is unusable (tapping it brings no effect) on all my devices, so up to now I simply ignored it.

But, today I've received feedback that on certain Android devices pressing this button simply blows my app with a nasty system error. Therefore, this has become not only an UI issue, but a real pain.

How can I permanently remove this button, when building application with PhoneGap Build?

Note, that this question isn't a duplicate of this one, because given answer does not answers my question. This is PhoneGap Build only question and when I'm building my apps with PhoneGap Build, I have no access to .java files and therefore I can't apply suggested solution.

Answer 1

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 name="android-targetSdkVersion" value="21" />

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.