Hide Android Soft Navigation in TWA (Bubblewrap)

Question

I've followed this guide ( https://developers.google.com/web/android/trusted-web-activity/quick-start ) to build a TWA app, but I need to hide the android soft navigation bar (not the URL bar).

I found this ( https://developer.android.com/training/system-ui/navigation ) but can't figure out where to put the onResume() method.

I haven't made anything in Android Studio before and I'm completely new to this. Would really appreciate the help.

Thanks

Answer 1

Update:

What you are referring to is called Immersive Mode on Android. Starting from version 1.4.0, Bubblewrap CLI evaluates the display property of the manifest when initialising an application. If the value is fullscreen , it automatically applies the Immersive Mode to your TWA. Make sure to set display to fullscreen in your web manifest.

For existing apps, update the file twa-manifest.json and add/update the display attribute to fullscreen , then run bubblewrap update and bubblewrap build .

Alternate / manual approach:

It's also possible to manually update the project created by Bubblewrap to use fullscreen / immersive mode:

1. Edit app/build.gradle to use the latest version of android-browser-helper version. The dependencies section at the bottom of the file should look like the following:

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:1.3.0'
}

Notice the minumum version for androidbrowserhelper should be 1.3.0 .

2. Edit app/src/main/AndroidManifest.xml and add a new meta-data tag with the android:name attribute set to android.support.customtabs.trusted.DISPLAY_MODE and the android:value attribute set to immersive to use immersive mode inside the activity tag:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
    android:label="@string/launcherName">

    ...

    <meta-data android:name="android.support.customtabs.trusted.FALLBACK_STRATEGY"
        android:value="@string/fallbackType" />

    <meta-data android:name="android.support.customtabs.trusted.DISPLAY_MODE"
    android:value="immersive"/>

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>

    ...
</activity>

Now, when running bubblewrap build , the application will use the extra meta-tag and launch in fullscreen / immersive mode.