Themes and styling

org.nativescript.widgets.d.ts

@@ -11,7 +11,7 @@
 
                 public row: number;
                 public column: number;
-                
+
                 public rowSpan: number;
                 public columnSpan: number;
 
@@ -143,11 +143,20 @@
                 setBorderWidth(width: number): void;
             }
 
-            export class SlidingTabLayout extends android.widget.HorizontalScrollView {
+            export class TabLayout extends android.widget.HorizontalScrollView {
                 constructor(context: android.content.Context);
+                constructor(context: android.content.Context, attrs: android.util.IAttributeSet);
+                constructor(context: android.content.Context, attrs: android.util.IAttributeSet, defStyle: number);
 
-                setDistributeEvenly(distributeEvenly: boolean): void;
+                setSelectedIndicatorColors(color: Array<number>): void;
-                setViewPager(viewPager: android.support.v4.view.ViewPager): void;
+
+                setItems(items: Array<TabItemSpec>, viewPager: android.support.v4.view.ViewPager): void;
+            }
+
+            export class TabItemSpec {
+                title: string;
+                iconId: number;
+                iconDrawable: android.graphics.drawable.Drawable;
             }
         }
     }

ui/action-bar/action-bar.android.ts

@@ -10,7 +10,6 @@ import dts = require("ui/action-bar");
 import view = require("ui/core/view");
 
 var ACTION_ITEM_ID_OFFSET = 1000;
-var API_LVL = android.os.Build.VERSION.SDK_INT;
 
 global.moduleMerge(common, exports);
 
@@ -299,11 +298,9 @@ function getIconVisibility(iconVisibility: string): boolean {
         case enums.AndroidActionBarIconVisibility.always:
             return true;
 
-        case enums.AndroidActionBarIconVisibility.never:
-            return false;
-
         case enums.AndroidActionBarIconVisibility.auto:
+        case enums.AndroidActionBarIconVisibility.never:
         default:
-            return API_LVL <= 20;
+            return false;
     }
 }

ui/page/page.android.ts

@@ -4,7 +4,6 @@ import view = require("ui/core/view");
 import trace = require("trace");
 import color = require("color");
 import actionBarModule = require("ui/action-bar");
-import types = require("utils/types");
 import gridModule = require("ui/layouts/grid-layout");
 import enums = require("ui/enums");
 

ui/tab-view/tab-view.android.ts

@@ -4,8 +4,14 @@ import dependencyObservable = require("ui/core/dependency-observable");
 import view = require("ui/core/view");
 import trace = require("trace");
 import types = require("utils/types");
+import utils = require("utils/utils");
+import imageSource = require("image-source");
 
 var VIEWS_STATES = "_viewStates";
+var ACCENT_COLOR = "colorAccent";
+var PRIMARY_COLOR = "colorPrimary";
+var DEFAULT_ELEVATION = 4;
+
 //var RESOURCE_PREFIX = "res://";
 
 global.moduleMerge(common, exports);
@@ -142,7 +148,7 @@ class PageChangedListener extends android.support.v4.view.ViewPager.SimpleOnPage
 
 export class TabView extends common.TabView {
     private _grid: org.nativescript.widgets.GridLayout;
-    private _tabLayout: org.nativescript.widgets.SlidingTabLayout;
+    private _tabLayout: org.nativescript.widgets.TabLayout;
     private _viewPager: android.support.v4.view.ViewPager;
     private _pagerAdapter: android.support.v4.view.PagerAdapter;
     private _androidViewId: number;
@@ -160,10 +166,21 @@ export class TabView extends common.TabView {
         this._grid.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
         this._grid.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
 
-        this._tabLayout = new org.nativescript.widgets.SlidingTabLayout(this._context);
+        this._tabLayout = new org.nativescript.widgets.TabLayout(this._context);
-        this._tabLayout.setDistributeEvenly(true);
         this._grid.addView(this._tabLayout);
 
+        this.setElevation();
+
+        let accentColor = utils.ad.resources.getPalleteColor(ACCENT_COLOR, this._context);
+        if (accentColor) {
+            this._tabLayout.setSelectedIndicatorColors([accentColor]);
+        }
+
+        let primaryColor = utils.ad.resources.getPalleteColor(PRIMARY_COLOR, this._context);
+        if (primaryColor) {
+            this._tabLayout.setBackgroundColor(primaryColor);
+        }
+
         this._viewPager = new android.support.v4.view.ViewPager(this._context);
         var lp = new org.nativescript.widgets.CommonLayoutParams()
         lp.row = 1;
@@ -179,26 +196,39 @@ export class TabView extends common.TabView {
         (<any>this._viewPager).addOnPageChangeListener(this._pageChagedListener);
     }
 
+    private setElevation() {
+        var compat = <any>android.support.v4.view.ViewCompat;
+        if (compat.setElevation) {
+            let val = DEFAULT_ELEVATION * utils.layout.getDisplayDensity();
+            compat.setElevation(this._grid, val);
+            compat.setElevation(this._tabLayout, val);
+        }
+    }
+
     public _onItemsPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
         trace.write("TabView._onItemsPropertyChangedSetNativeValue(" + data.oldValue + " ---> " + data.newValue + ");", common.traceCategory);
 
         if (data.oldValue) {
             this._viewPager.setAdapter(null);
             this._pagerAdapter = null;
-            this._tabLayout.setViewPager(null);
+            this._tabLayout.setItems(null, null);
         }
 
         if (data.newValue) {
             var items: Array<definition.TabViewItem> = data.newValue;
+            var tabItems = new Array<org.nativescript.widgets.TabItemSpec>();
             items.forEach((item, idx, arr) => {
                 if (types.isNullOrUndefined(item.view)) {
                     throw new Error("View of TabViewItem at index " + idx + " is " + item.view);
                 }
+
+                tabItems.push(this.createTabItem(item));
             });
 
             this._pagerAdapter = new PagerAdapterClass(this, data.newValue);
             this._viewPager.setAdapter(this._pagerAdapter);
-            this._tabLayout.setViewPager(this._viewPager);
+
+            this._tabLayout.setItems(tabItems, this._viewPager);
         }
 
         this._updateSelectedIndexOnItemsPropertyChanged(data.newValue);
@@ -221,4 +251,24 @@ export class TabView extends common.TabView {
         var args = { eventName: TabView.selectedIndexChangedEvent, object: this, oldIndex: data.oldValue, newIndex: data.newValue };
         this.notify(args);
     }
+
+    private createTabItem(item: definition.TabViewItem): org.nativescript.widgets.TabItemSpec {
+        var result = new org.nativescript.widgets.TabItemSpec();
+        result.title = item.title;
+
+        if (item.iconSource) {
+
+            if (item.iconSource.indexOf(utils.RESOURCE_PREFIX) === 0) {
+                result.iconId = utils.ad.resources.getDrawableId(item.iconSource.substr(utils.RESOURCE_PREFIX.length));
+            }
+            else {
+                var is = imageSource.fromFileOrResource(item.iconSource);
+                if (is) {
+                    result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android);
+                }
+            }
+        }
+
+        return result;
+    }
 }

utils/utils.android.ts

@@ -1,4 +1,5 @@
 import common = require("utils/utils-common");
+import trace = require("trace");
 
 global.moduleMerge(common, exports);
 
@@ -76,6 +77,9 @@ export module ad {
     }
 
     export module resources {
+        var attr;
+        var attrCache = new Map<string, number>();
+
         export function getDrawableId(name) {
             return getId(":drawable/" + name);
         }
@@ -90,6 +94,37 @@ export module ad {
             var uri = packageName + name;
             return resources.getIdentifier(uri, null, null);
         }
+
+        export function getPalleteColor(name: string, context: android.content.Context): number {
+            if (attrCache.has(name)) {
+                return attrCache.get(name);
+            }
+
+            var result = 0;
+            try {
+                if (!attr) {
+                    attr = java.lang.Class.forName("android.support.v7.appcompat.R$attr")
+                }
+
+                let colorID = 0;
+                let field = attr.getField(name);
+                if (field) {
+                    colorID = field.getInt(null);
+                }
+
+                if (colorID) {
+                    let typedValue = new android.util.TypedValue();
+                    context.getTheme().resolveAttribute(colorID, typedValue, true);
+                    result = typedValue.data;
+                }
+            }
+            catch (ex) {
+                trace.write("Cannot get pallete color: " + name, trace.categories.Error, trace.messageType.error);
+            }
+
+            attrCache.set(name, result);
+            return result;
+        }
     }
 }
 

utils/utils.d.ts

@@ -88,11 +88,18 @@
              * @param name - Name of the resource.
              */
             export function getStringId(name)
+
             /**
              * Gets the id from a given name.
              * @param name - Name of the resource.
              */
             export function getId(name: string): number;
+
+            /**
+             * Gets a color from the current theme.
+             * @param name - Name of the color resource.
+             */
+            export function getPalleteColor(name: string, context: android.content.Context): number;
         }
 
         export function async<T>(doInBackground: () => T, callback: (result: T) => void);