Nativescript: ActionBar / StatusBar transparency

[3rror404]

I'm trying to implement an <ActionBar> that starts off with a transparent background then, as the page is scrolled a background colour is faded in. I've only attempted this in iOS so far.

I can't find a documented way of doing this with CSS or XML. After many failed attempts, I've managed to make the background transparent using the following JS:

var controller = frameModule.topmost().ios.controller;
var navBar = controller.navigationBar;
navBar.shadowImage = new UIImage();
navBar.setBackgroundImageForBarMetrics(new UIImage(), UIBarMetrics.UIBarMetricsDefault);

I then apply a background colour with alpha based on the current scroll offset:

var scrollView = page.getViewById("scrollView");
scrollView.on('scroll', function(args){
    var offset = args.object.verticalOffset;
    navBar.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20, 0.20, 0.20, (offset-50)/50);
});

This all seems to work great except that the StatusBar no longer adopts the same background colour as the ActionBar like it usually does.

A second problem that this method of creating a transparent background throws up is that after navigating back to the previous page, the ActionBar has lost its previous styles and is now transparent. I would expect the ActionBar on the first page to look exactly the same as it did before navigating to the second page.

I'd really appreciate some help achieving my goals here as I've spent quite some time trying to get this to work.

I hope that all makes sense!

Here is a gif showing both issues:

The test app used in the gif is here: https://github.com/3rror404/actionbar-test

All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 2.4.2           │ 2.4.2          │ Up to date    │
│ tns-core-modules │ 2.4.4           │ 2.4.4          │ Up to date    │
│ tns-android      │                 │ 2.4.1          │ Not installed │
│ tns-ios          │ 2.4.0           │ 2.4.0          │ Up to date    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘
Dependencies:
┌─────────────────────────┬─────────┐
│ Plugin                  │ Version │
│ nativescript-theme-core │ ^0.2.1  │
│ tns-core-modules        │ 2.4.4   │
└─────────────────────────┴─────────┘
Dev Dependencies:
┌───────────────────────────────────┬─────────┐
│ Plugin                            │ Version │
│ nativescript-dev-android-snapshot │ ^0.*.*  │
└───────────────────────────────────┴─────────┘

[jfturcot]

Thanks for sharing this, I need to implement something similar to your action-bar background color change on scroll and will check out your solution.

My solution for the style of the action-bar not changing on page navigation was to create a callback on the page's "navigatingTo" event, that callback hooks up to the action-bar and tells it to restore itself.

This is part of my callback:

actionBar.color = new Color('#000000');
UIApplication.sharedApplication.statusBarStyle = UIBarStyle.UIBarStyleDefault;
navigationBar.setBackgroundImageForBarMetrics(null, UIBarMetricsDefault);
navigationBar.shadowImage = null;

Just add something like that to your main-page and it should work when navigating back.

As for the status bar on scroll, you probably won't get the transparency animation natively. It might create some ugly code, but have you considered having an AbsoluteLayout on top there which changes background color with the navBar on scroll?

[3rror404]

Hi @jfturcot,

I did try using an AbsoluteLayout but couldn't get it to work. I also tried your method of restoring the default styles but the results are not smooth and not really usable unfortunately.

It looks like the background colour of an ActionBar is applied to a _UiVisualEffectsFilterView

However when I use the method above to set a background it is applied to the UINavigationBar which doesn't span behind the statusbar

I'm not a native developer so please excuse my ignorance, but does anyone know if the _UiVisualEffectsFilterView is accessible programatically through NativeScript?

[3rror404]

I've made some progress with this. I'm creating a new UIView and adding it to the navbar. Then setting the background colour on this view.

Works great - except now I am unable to use the NavigationButton. I'd love to know why if anyone has any ideas?

var controller = frameModule.topmost().ios.controller;

/**
* Make ActionBar background transparent
*/
var navBar = controller.navigationBar;
navBar.shadowImage = new UIImage();
navBar.setBackgroundImageForBarMetrics(new UIImage, UIBarMetrics.UIBarMetricsDefault);

/**
* Add custom view to navBar
*/
var navBounds = navBar.bounds;
var myView = UIView.alloc().init();
myView.frame = {
  origin: { x: navBounds.origin.x, y: navBounds.origin.y - 20 },
  size: { width: navBounds.size.width, height: navBounds.size.height + 20 }
};
myView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
navBar.addSubview(myView);

navBar.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20, 0.20, 0.20, 0.0);
navBar.sendSubviewToBack(myView);

/**
* Fade in myView on scroll
*/
var scrollView = page.getViewById("scrollView");
scrollView.on('scroll', function(args){
  var offset = args.object.verticalOffset;
  myView.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20, 0.20, 0.20, (offset-50)/50);
});

Here is the code if anyone is interested: https://github.com/3rror404/actionbar-test

I also have a question on StackOverflow about this: http://stackoverflow.com/questions/41699116/adding-view-to-nativescript-actionbar-breaks-navigation

[NickIliev]

Hey @3rror404 I have answered here but also posting the answer here for the community

You can disable the user interaction for your custom view, and it won't prevent the touches to propagate to your Navigation Button.

myView.userInteractionEnabled = false;
navBar.addSubview(myView);

[3rror404]

Thanks NickLiev. You were a great help on StackOverflow.

If anyone else stumbles across this thread, I have a working solution here https://github.com/3rror404/ns-fading-actionbar

It's a little hacky but seems to work well.

[kshipra-shelke]

@NickLiev Is it possible to get this view in Android?