4

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.

screenshot from s10

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?

DrKHunter
  • 424
  • 5
  • 15
  • 1
    Samsung is always tough, they do a lot of customisation on their device. Did you try setting `fitsSystemWindows` to true on the native view of your page. – Manoj Mar 13 '20 at 18:23
  • I'll give it a go, thanks. I'll also fire up my old Google Pixel and try that instead. – DrKHunter Mar 13 '20 at 21:02

1 Answers1

6

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.

No translucent notification bar, and removed default padding if there is no ActionBar

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>

`

Aosi
  • 111
  • 2
  • 7
  • Please don't just post some tool or library as an answer. At least demonstrate [how it solves the problem](http://meta.stackoverflow.com/a/251605) in the answer itself. –  Jul 07 '20 at 16:45
  • 1
    Can you consider posting the actual XML from the screenshot? I think it will improve the answer readability – piraces Jul 07 '20 at 21:29