Android: How to use translucent status and navigation bars

[AE1NS]

Our app uses translucent status and navigation bars in the Android implementation. So i.e. map views fills the whole viewarea and is also visible behind the transparent status bar, up to the rounded corners of new devices. This looks much better for me and is similar to native map apps.

To achieve this, you have to se this setting inside the styles.xml:
<item name="android:windowTranslucentNavigation">true</item>
Unfortunately I have discovered an issue with the keyboard here. It seems to be a general android issue, that they keyboard does not adjust the layout, when setting the translucent navigation, but overlays the bottom part of the webview. To fix this, you can do the following:

Create a file KeyboardUtil.java in the same folder as the MainActivity.java:

import android.app.Activity;
import android.graphics.Rect;
import android.os.Build;
import android.view.View;
import android.view.ViewTreeObserver;

public class KeyboardUtil {
    private View decorView;
    private View contentView;
    private int additionalSpacing = -1;

    public KeyboardUtil(Activity act, View contentView) {
        //only required on newer android versions. it was working on API level 19 (Build.VERSION_CODES.KITKAT)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            this.decorView = act.getWindow().getDecorView();
            this.contentView = contentView;
            decorView.getViewTreeObserver().addOnGlobalLayoutListener(onGlobalLayoutListener);
        }
    }

    ViewTreeObserver.OnGlobalLayoutListener onGlobalLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            //r will be populated with the coordinates of your view that area still visible.
            Rect r = new Rect();
            decorView.getWindowVisibleDisplayFrame(r);

            //get screen height and calculate the difference with the useable area from the r
            int height = decorView.getContext().getResources().getDisplayMetrics().heightPixels;

            if (additionalSpacing == -1) {
                //get additional spacing that could be caused by elements like the status bar
                additionalSpacing = (height - r.bottom) * -1;
            }

            int diff = height + additionalSpacing - r.bottom;
            if (contentView.getPaddingBottom() != diff) {
                contentView.setPadding(0, 0, 0, diff);
            }
        }
    };
}

Call it inside the MainActivity:

import android.os.Bundle;
import android.view.ViewGroup;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        new KeyboardUtil(
            MainActivity.this,
            ((ViewGroup) findViewById(android.R.id.content)).getChildAt(0)
        );
    }
}

Now the CoordinatorLayout of capacitors main layout automatically adjusts, when they keyboard is shown or hidden.

[NePheus]

I created a capacitor plugin for this: https://github.com/NePheus/capacitor-adjust-resize