Nativescript: [Question] Is the ActionBar customizeable enough to achieve this effect?

[NordlingDev]

I want to be able to blur the content behind the ActionBar (I think that's what the translucent setting already does to some extent), remove the bottom border, and control the opacity of the background color. Like so:

For now I am only trying to achieve this effect on iOS.

Thanks in advance.

[NordlingDev]

After a couple hours, I figured it out. In case anyone needs to do the same thing:

var frameModule = require("ui/frame");
var colorModule = require("color");

var page;
exports.navigatingTo = function(args) {
  page = args.object;
  page.bindingContext = {};
};
exports.loaded = function(args) {
  addBlurEffect();
};

function addBlurEffect() {
  var self = frameModule.topmost().ios;

  var navigationBar = self.controller.navigationBar;
  var statusBar = UIApplication.sharedApplication().valueForKey("statusBarWindow").valueForKey("statusBar");

  // SET NAVIGATION BAR COMPLETELY TRANSPARENT
  navigationBar.setBackgroundImageForBarMetrics(new UIImage, UIBarMetricsDefault);
  navigationBar.shadowImage = new UIImage;
  navigationBar.translucent = true;
  navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor()], [NSForegroundColorAttributeName]);

  // SET BLURRED NAVIGATION BAR
  var navBounds = navigationBar.bounds;
  var navEffectView = UIVisualEffectView.alloc().initWithEffect(UIBlurEffect.effectWithStyle(UIBlurEffectStyleLight));
  navEffectView.frame = {
    origin: { x: navBounds.origin.x, y: navBounds.origin.y - 20 },
    size: { width: navBounds.size.width, height: navBounds.size.height + 20 }
  };
  navEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
  navigationBar.addSubview(navEffectView);
  navigationBar.backgroundColor = color("#a1a3a5", 0.7);
  navigationBar.sendSubviewToBack(navEffectView);

  // SET STATUS BAR COMPLETELY TRANSPARENT (WHITE TEXT COLOR)
  UIApplication.sharedApplication().setStatusBarStyleAnimated(UIStatusBarStyle.UIStatusBarStyleLightContent, false);
}

function color(hex, alpha = 1) {
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });
  var regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  var hexResult = (regex ? {
    r: Math.round(((parseInt(regex[1], 16)) / 255) * 100) / 100,
    g: Math.round(((parseInt(regex[2], 16)) / 255) * 100) / 100,
    b: Math.round(((parseInt(regex[3], 16)) / 255) * 100) / 100
  } : null);

  return UIColor.colorWithRedGreenBlueAlpha(hexResult.r, hexResult.g, hexResult.b, alpha);
}

[dvh91]

@NordlingArt I made few changes so it will fit NG2 & TS. but Im facing a problem where the blur is not dynamic. means- it doesnt change when I scroll. anything im missing?
btw - any special reason you have a separate color function instead of using the color module?

[NordlingDev]

@dvh91 - Are you sure that the content which is getting blurry stretches behind the navigation bar? As for the color function, it one can be ignored as I was unaware of the regular color module's capabilities.

[dvh91]

@NordlingArt - Here's the code. Did you try to play with NG2 along with NS?

import * as frame from 'ui/frame';
import * as utils from 'utils/utils';
import { Color } from 'color';
import { Image } from 'ui/image';

declare var page:any, UIApplication:any, UIBarStyleBlack:any, UIBarMetricsDefault:any, NSForegroundColorAttributeName:any, NSDictionary:any, UIImage:any, UIColor:any, UIVisualEffectView:any, UIBlurEffect:any, UIViewAutoresizingFlexibleHeight:any, UIViewAutoresizingFlexibleWidth:any, UIBlurEffectStyleLight:any, UIStatusBarStyle:any, UIBlurEffectStyleDark: any;

addBlurEffect() {
    let self = frame.topmost().ios;
    let navigationBar = self.controller.navigationBar;

    // SET NAVIGATION BAR COMPLETELY TRANSPARENT
    navigationBar.setBackgroundImageForBarMetrics(new UIImage, UIBarMetricsDefault);
    navigationBar.shadowImage = new UIImage;
    navigationBar.translucent = true;
    // navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor()], [NSForegroundColorAttributeName]);

    // SET BLURRED NAVIGATION BAR
    let navBounds = navigationBar.bounds;
    let navEffectView = UIVisualEffectView.alloc().initWithEffect(UIBlurEffect.effectWithStyle(UIBlurEffectStyleDark));
    navEffectView.frame = {
      origin: { x: navBounds.origin.x, y: navBounds.origin.y - 20 },
      size: { width: navBounds.size.width, height: navBounds.size.height + 20 }
    };
    navEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    navEffectView.userInteractionEnabled = false;
    navigationBar.addSubview(navEffectView);
    navigationBar.backgroundColor = this.color("#a1a3a5", 0.7);
    navigationBar.sendSubviewToBack(navEffectView);

  }

[patrickpereira]

Has anybody achieved this effect on Android?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.