Implement an ActionBar 'flat' property to remove the bottom border/shadow and (on iOS) translucency (#3900)

* #2740 Feature Request: Improved ActionBar CSS Support

* Now using a dedicated 'flat' property.

tns-core-modules/ui/action-bar/action-bar-common.ts

@@ -9,7 +9,7 @@ import { profile } from "../../profiling";
 
 export * from "../core/view";
 
-import { View, ViewBase, Property, unsetValue, horizontalAlignmentProperty, verticalAlignmentProperty } from "../core/view";
+import { View, ViewBase, Property, unsetValue, booleanConverter, horizontalAlignmentProperty, verticalAlignmentProperty } from "../core/view";
 
 export module knownCollections {
     export var actionItems = "actionItems";
@@ -21,6 +21,7 @@ export class ActionBarBase extends View implements ActionBarDefinition {
     private _titleView: View;
 
     public title: string;
+    public flat: boolean;
 
     get navigationButton(): NavigationButton {
         return this._navigationButton;
@@ -330,3 +331,6 @@ iconProperty.register(ActionItemBase);
 
 let visibilityProperty = new Property({ name: "visibility", defaultValue: "visible", valueChanged: onItemChanged });
 visibilityProperty.register(ActionItemBase);
+
+export const flatProperty = new Property<ActionBarBase, boolean>({ name: "flat", defaultValue: false, valueConverter: booleanConverter });
+flatProperty.register(ActionBarBase);

tns-core-modules/ui/action-bar/action-bar.android.ts

@@ -1,5 +1,5 @@
 import { AndroidActionBarSettings as AndroidActionBarSettingsDefinition, AndroidActionItemSettings } from ".";
-import { ActionItemBase, ActionBarBase, isVisible, View, colorProperty, Color } from "./action-bar-common";
+import { ActionItemBase, ActionBarBase, isVisible, View, layout, colorProperty, flatProperty, Color } from "./action-bar-common";
 import { RESOURCE_PREFIX } from "../../utils/utils";
 import { fromFileOrResource } from "../../image-source";
 import * as application from "../../application";
@@ -8,6 +8,7 @@ export * from "./action-bar-common";
 
 const R_ID_HOME = 0x0102002c;
 const ACTION_ITEM_ID_OFFSET = 10000;
+const DEFAULT_ELEVATION = 4;
 
 let AppCompatTextView;
 let actionItemIdGenerator = ACTION_ITEM_ID_OFFSET;
@@ -386,6 +387,18 @@ export class ActionBar extends ActionBarBase {
         const color = value instanceof Color ? value.android : value;
         this.nativeView.setTitleTextColor(color);
     }
+
+    [flatProperty.setNative](value: boolean) {
+        const compat = <any>android.support.v4.view.ViewCompat;
+        if (compat.setElevation) {
+            if (value) {
+                compat.setElevation(this.nativeView, 0);
+            } else {
+                const val = DEFAULT_ELEVATION * layout.getDisplayDensity();
+                compat.setElevation(this.nativeView, val);
+            }
+        }
+    }
 }
 
 function getAppCompatTextView(toolbar: android.support.v7.widget.Toolbar): typeof AppCompatTextView {

tns-core-modules/ui/action-bar/action-bar.d.ts

@@ -25,6 +25,12 @@ export class ActionBar extends View {
      */
     navigationButton: NavigationButton;
 
+    /**
+     * Removes the shadow/border at the bottom of the ActionBar and removes translucency on iOS.
+     * Default false.
+     */
+    flat: boolean;
+
     /**
      * Gets the collection of action items.
      */

tns-core-modules/ui/action-bar/action-bar.ios.ts

@@ -144,6 +144,9 @@ export class ActionBar extends ActionBarBase {
 
         // update colors explicitly - they may have to be cleared form a previous page
         this.updateColors(navigationBar);
+
+        // the 'flat' property may have changed in between pages
+        this.updateFlatness(navigationBar);
     }
 
     private populateMenuItems(navigationItem: UINavigationItem) {
@@ -236,6 +239,18 @@ export class ActionBar extends ActionBarBase {
         navigationItem.title = this.title;
     }
 
+    private updateFlatness(navBar: UINavigationBar) {
+        if (this.flat) {
+            navBar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
+            navBar.shadowImage = UIImage.new();
+            navBar.translucent = false;
+        } else {
+            navBar.setBackgroundImageForBarMetrics(null, null);
+            navBar.shadowImage = null;
+            navBar.translucent = true;
+        }
+    }
+
     private _navigationBarHeight: number = 0;
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
         const width = layout.getMeasureSpecSize(widthMeasureSpec);