'Cordova Android app Navigation Bar and Status Bar flicker or turn solid white

We are deploying our web application to Android 8 using Cordova 9.0 on a Zebra TC-57 device, which has the soft Navigation Bar (Back, Home, Recent soft buttons) and we're seeing the areas of the screen which are normally occupied by the Status Bar (top) and Navigation Bar (bottom) rapidly flickering or blinking and sometimes turning solid white causing the both the Status Bar and Navigation bar to not render properly.

We don't want the app to consume the full screen, we just want it to properly occupy the screen space between the Status bar and Navigation bar.

Are there any solutions for this?

Solution 1:^[1]

The Fix

In the AndroidManifest.xml <activity/> element, changing the @android:theme to a value of @android:style/Theme.Translucent, fixed the issue for us:

Cordova generated AndroidManifest.xml

<manifest ...>
    ...
    <activity 
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" 
    android:label="@string/activity_name" 
    android:launchMode="singleTop" 
    android:name="MainActivity" 

    android:theme="@android:style/Theme.Translucent" 

    android:windowSoftInputMode="adjustResize">
    ...
    </activity>
    ...
</manifest>

The easiest way to automate this change so that you don't have to modify your Cordova-generated AndroidManifest.xml file is to simply add an edit-config element into your android <platform> section of your Cordova config.xml file (thanks to @simon-ludwig for this info):

Cordova config.xml platform section

    <platform name="android">
        <edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:label='@string/activity_name']" mode="merge">
            <activity android:theme="@android:style/Theme.Translucent"></activity>
        </edit-config>
        <!-- Other Android platform settings -->
    </platform>

TLDR;

On some devices, there seems to be an incompatibility with the default Android theme generated by Cordova android. The value it specifies for the android:theme attribute in the AndroidManifest.xml is @android:style/Theme.DeviceDefault.NoActionBar:

<manifest ...>
    ...
    <activity 
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" 
    android:label="@string/activity_name" 
    android:launchMode="singleTop" 
    android:name="MainActivity" 
    
    android:theme="@android:style/Theme.DeviceDefault.NoActionBar" 
    
    android:windowSoftInputMode="adjustResize">
    ...
    </activity>
    ...
</manifest>

There are a number of theme options as documented here at the Android developer website. What we've found to work for the TC-57, at least when running Android 8, is the value of android:theme="@android:style/Theme.Translucent"

Solution 2:^[2]

Set GPU Renderer to SKIA helps on TC56 - but you need access to developer options

Solution 3:^[3]

I had a similar problem, but changing to @android:style/Theme.Translucent did not help, nor did other themes. This was on A Zebra TC51 with Android 8.1. The problem seemed to be related to the keyboard since closing the keyboard triggered the blinking of the navigation bar. The solution for me was to add this in the AndroidManifest.xml.

 <activity android:name=".MainActivity"
   android:windowSoftInputMode="adjustPan">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	2Aguy
Solution 2	Thomas
Solution 3	korsvoll

'Cordova Android app Navigation Bar and Status Bar flicker or turn solid white

Solution 1:[1]