Transparent ActionBar: using NativeScript in combination with Angular

Question

Hi Nativescript Community,

I can`t get the transparency to work on the ActionBar using Nativescript in combination with Angular. I have found serval topics like this one, but no one has a working example using Angular. Would somebody like to send me a working example of a transparent ActionBar background using Angular? Finally i would like to be able to change the transparency upon scrolling.

Some relevant topics (but without working angular example):

Regards,

Timber

I swear this is making me go crazy, I've looked at every link and article, it still is translucent. I'm glad I'm not the only one who is struggling with this. — David Rees, Apr 09 '18 at 03:05
Well apparently no one seems to have the correct answer to this, multiple view but no answers:( — Timber, Apr 10 '18 at 08:06
I think you should hide the action bar as shown in example https://play.nativescript.org/?template=play-tsc&id=Y4fVGt&v=16 by which the action bar would be transparent. You can customise the top of the page to have any buttons or labels. — Rakesh, Mar 18 '19 at 13:42

score 0 · Answer 1 · answered Jul 10 '18 at 06:39

0

You can use anything as a action-bar. Put a label on top 7% of a gridlayout and there you go. I don't know if actionbar tools would work or not but you can try it out.

answered Jul 10 '18 at 06:39

emrexyz

1
2

Does this work with actionbar buttons? I have the same problem now. – ppulwey Aug 01 '18 at 06:46

zarax · Answer 2 · 2019-03-18T13:32:53.370

Here is an example for iOS.

import { topmost, Color } from "tns-core-modules/ui/frame";

declare let UIBarMetrics, UIBarStyle, UIImage;

makeActionBarTransparent() : void {
    let navbar = topmost().ios.controller.navigationBar;
    navbar.barStyle = UIBarStyle.BlackTranslucent;
    navbar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
    navbar.shadowImage = UIImage.new();
    navbar.translucent = true;
    navbar.tintColor = new Color('white').ios;
}

But it seems that when you modify the action bar in a page, action bar is modified in other pages too. If this is not the desired behavior for you, you can hide the action bar and use custom elements. For example, create a transparent stack-layout with action icons on it.

You can hide the actionbar like this:

import { Page } from "tns-core-modules/ui/page";

constructor(
    private page : Page
) {}

ngAfterViewInit() : void {
    this.page.actionBarHidden = true;
}

Transparent ActionBar: using NativeScript in combination with Angular

2 Answers2