How to make SideDrawer go behind StatusBar in NativeScript Android

Category: #nativescript

Here’s how to go from sidebar below status bar to sidebar behind status bar

Before => After

Just follow these 3 simple steps

Step 1:

Open

App_Resources/Android/values-v21/styles.xml

Step 2:

Add this inside AppTheme style

<item name="android:windowTranslucentStatus">true</item>

Step 3:

Add this inside NativeScriptToolbarStyle style

<item name="android:paddingTop">24dp</item>

And that’s all you need to do, rebuild the project, and now the side drawer should go below the status bar.

Note: But the downside is, you lose the ability to color the status bar. because now the status bar is transparent. The ActionBar also goes below status bar (hence we add paddingTop to the NativeScriptToolbarStyle)

Written on November 22, 2017