Tranparent action bar


#1

Hello

I’m struggling for a long time to get my action bar transparent, with content scrolling behind it, but I can’t succeed to make it work.

I tried to follow these instructions without any effect. The only way I have found to style my action bar is with css, when I set opacity to 0, action bar and status bar are completely white (I guess transparent) but content is not shown under it.

Here is my code :

ngAfterViewInit() {
        let navBar = frame.topmost().ios.controller.navigationBar as UINavigationBar;
        console.log("after View init")
        if (navBar) {
            console.log("nav bar set")
            navBar.translucent = true;
            navBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
            navBar.shadowImage = UIImage.new();
            navBar.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(1.0, 0, 0, 0.2);
        }
    }

Does anyone has an idea to have an action bar transparent with {N} Angular projects ?


#2

onLoad or navigateTo function or in your xml file, try to set

page.backgroundSpanUnderStatusBar = true;

maybe that will work


#3

Hello, thanks for your answer, but the page variable is not available with projects running angular,
So I cannot set this property on my view …


#4

not sure I follow what you mean, but look here for example https://stackoverflow.com/a/46827846


#5

This actually is not accurate. In any Angular component you can do:

constructor(private page: Page) {}

To get access to the current page instance associated to that component. Do note that things like changing UI should be done in the ngAfterViewInit life-cycle hook as when the app bootstraps the component constructor will fire BEFORE the view renders.


#6

Ok thank you, I didn’t know that the Page was available that way ! :slight_smile:
But I still can’t get this working, here is my new code

ngAfterViewInit() {
        let navBar = frame.topmost().ios.controller.navigationBar as UINavigationBar;
        console.log("after View init")
        this.page.style.marginTop = -20;
        this.page.actionBarHidden = false;
        this.page.backgroundSpanUnderStatusBar = true;
        if (navBar && isIOS) {
            console.log("nav bar set")
            navBar.translucent = true;
            navBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
            navBar.shadowImage = UIImage.new();
            navBar.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(1.0, 0, 0, 0.2);
        }
    }

I set the background opacity to 0 in the css, I also tried to apply a negative margin to the page element, but the action bar is still white. I guess some code might be missing for android to work, but I don’t think so for iOS, so I don’t understand why it doesn’t work on android nor on iOS