Status bar transparent on android with nativescript

Question

I would like to know how can I set the status bar on transparent on Android with Nativescript ?

I read many post (How do I create a transparent Activity on Android?, https://blog.mindorks.com/how-to-create-a-transparent-activity-in-android...) but the status bar is always Grey or not transparence.

In values/styles.xml I added this :

<style name="Theme.AppCompat.Transparent.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

In AndroidManifest.xml

<activity
            android:name="com.tns.NativeScriptActivity"
            android:label="@string/title_activity_kimera"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
            android:theme="@style/Theme.AppCompat.Transparent.NoActionBar">

I'm confuse because it's like very easy. Maybe it's different on nativescript ?

I look this video https://www.youtube.com/watch?v=NroxMDGOJ_E but if I set this color "#00000000" or "@android:color/transparent" on ns_primaryDark it doesn't work.

Just setting `android:windowIsTranslucent` to `true` in styles xml works perfectly on my end. If you have issues, please share a git repo. — Manoj, May 01 '20 at 02:25

score 0 · Answer 1 · edited May 07 '20 at 10:56

0

page.xml
page.js
page.css

Tested in Nativescript 6, Try this in your page's corresponding nativescript CSS file:

ActionBar {
   opacity: 0;
}

0 here is complete transparency, where 0.5 is half transparent, and 1 is show the Actionbar completely.

A clean way to hide the actionbar is to just go to the javascript page, though:

exports.loaded = function (args) {
    page = args.object;
    page.actionBarHidden = true;
}

and in your XML page we add the loaded function that will receive the event, and the page, and hide that pages actionbar based on the attribute of "actionBarHidden":

<Page loaded="loaded">
<Page>

edited May 07 '20 at 10:56

halfer

19,824
17
99
186

answered Apr 30 '20 at 19:47

gnu_byte

41
1
5

Thank you @gnu_byte, but I would like to set the satus bar on transparent and not the actionbar :-) – Jérémie Chazelle Apr 30 '20 at 19:53
@JérémieChazelle are you referring to the phone UI's status bar that normally lives above the action bar? – gnu_byte Apr 30 '20 at 21:57
@gnu_bytes yes ! – Jérémie Chazelle Apr 30 '20 at 22:18

score 0 · Answer 2 · answered Apr 30 '20 at 22:03

0

Maybe this might be of some help then?

https://github.com/PeterStaev/NativeScript-Status-Bar

// Get reference to the Status Bar plugin module
import statusBar = require("nativescript-status-bar");

exports.loaded = function() {
    statusBar.hide();
}

answered Apr 30 '20 at 22:03

gnu_byte

41
1
5

I would like to have a background transparent and no hide the status bar – Jérémie Chazelle Apr 30 '20 at 22:18
@JérémieChazelle Did you find any solution? – saibbyweb Dec 26 '20 at 19:20

Status bar transparent on android with nativescript

2 Answers2