Nativescript Action Bar underneath status bar

Question

I'm attempting to create a Nativescript Vue app and when testing on my Android 10 device (Samsung S10+) the status bar partially covers the Action Bar.

The effect can be seen even in the playground app.

The issue can be resolved by removing the transparent status bar option in the android config. But that means that the colour of the status bar won't be dynamic.

Any one experiencing this?

Answer 1

Nativescript has default configuration added under APP_resources/Android/src/main/res/values-21/styles.xml there you can change the behavior of the notification bar, and how it should handle specific devices screen cutouts.

This means that you can set No translucent notification bar, and remove default padding if there is no ActionBar (actionBarHidding = true).

Please refer to this link for more information.

https://github.com/NativeScript/NativeScript/issues/6795

PS1: I do not know why it is required code here, it is a simple change, but here you go:

`

<!-- Application theme -->
<style name="AppThemeBase21" parent="AppThemeBase">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
    <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
    <item name="android:windowLayoutInDisplayCutoutMode">default</item>
</style>

<style name="AppTheme" parent="AppThemeBase21">
</style>

<!-- Default style for DatePicker - in spinner mode -->
<style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
    <item name="android:datePickerMode">spinner</item>
</style>

<!-- Default style for TimePicker - in spinner mode -->
<style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
    <item name="android:timePickerMode">spinner</item>
</style>

<style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
    <item name="android:elevation">4dp</item>
    <!-- <item name="android:paddingTop">24dp</item> -->
</style>

`