From 9fc143ee0304d66200200cdc78251def97ad3cf3 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Mon, 24 Oct 2016 11:10:15 +0300
Subject: [PATCH] Add support for TabView CSS

TabView {
    tab-text-color: green;
    tab-background-color: yellow;
    selected-tab-text-color: red;
    android-selected-tab-highlight-color: orange;
    text-transform: uppercase;
}
---
 apps/app/ui-tests-app/css/main-page.ts        |   1 +
 apps/app/ui-tests-app/css/tab-view.ts         |  13 ++
 apps/app/ui-tests-app/css/tab-view.xml        |  32 ++++
 tns-core-modules/ui/styling/style.d.ts        |  11 ++
 tns-core-modules/ui/styling/style.ts          |  49 ++++-
 tns-core-modules/ui/styling/styling.d.ts      |  21 +++
 .../ui/tab-view/tab-view-common.ts            |  65 +++++--
 .../ui/tab-view/tab-view.android.ts           | 178 ++++++++++++------
 tns-core-modules/ui/tab-view/tab-view.d.ts    |  30 ++-
 tns-core-modules/ui/tab-view/tab-view.ios.ts  | 136 +++++++++----
 tns-core-modules/utils/utils.android.ts       |   2 +-
 tns-core-modules/utils/utils.d.ts             |   1 +
 .../android/org.nativescript.widgets.d.ts     |   5 +
 13 files changed, 427 insertions(+), 117 deletions(-)
 create mode 100644 apps/app/ui-tests-app/css/tab-view.ts
 create mode 100644 apps/app/ui-tests-app/css/tab-view.xml

diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index 4a6eaabc0..27a848600 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -36,6 +36,7 @@ export function pageLoaded(args: EventData) {
     examples.set("all-uniform-border", "css/all-uniform-border");
     examples.set("all-non-uniform-border", "css/all-non-uniform-border");
     //examples.set("border-playground", "css/border-playground");
+    examples.set("tab-view", "css/tab-view");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;
diff --git a/apps/app/ui-tests-app/css/tab-view.ts b/apps/app/ui-tests-app/css/tab-view.ts
new file mode 100644
index 000000000..5de5cf1a8
--- /dev/null
+++ b/apps/app/ui-tests-app/css/tab-view.ts
@@ -0,0 +1,13 @@
+import view = require("ui/core/view");
+import pages = require("ui/page");
+
+export function applyTap(args) {
+    var page = <pages.Page>(<view.View>args.object).page;
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
+}
+
+export function resetTap(args) {
+    var page = <pages.Page>(<view.View>args.object).page;
+    page.css = "";
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/tab-view.xml b/apps/app/ui-tests-app/css/tab-view.xml
new file mode 100644
index 000000000..6cb199fd4
--- /dev/null
+++ b/apps/app/ui-tests-app/css/tab-view.xml
@@ -0,0 +1,32 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+  <TabView id="test-element">
+    <TabView.items>
+      <TabViewItem title="IteM onE">
+        <TabViewItem.view>
+          <StackLayout>
+              <Button text="tab-text-color: green;" tap="applyTap" tag="tab-text-color: green;" style.fontSize="8"/>
+              <Button text="tab-background-color: yellow;" tap="applyTap" tag="tab-background-color: yellow;" style.fontSize="8"/>
+              <Button text="selected-tab-text-color: red;" tap="applyTap" tag="selected-tab-text-color: red;" style.fontSize="8"/>
+              <Button text="android-selected-tab-highlight-color: orange;" tap="applyTap" tag="android-selected-tab-highlight-color: orange;" style.fontSize="8"/>
+              <Button text="text-transform: uppercase;" tap="applyTap" tag="text-transform: uppercase;" style.fontSize="8"/>
+              <Button text="text-transform: lowercase;" tap="applyTap" tag="text-transform: lowercase;" style.fontSize="8"/>
+              <Button text="text-transform: capitalize;" tap="applyTap" tag="text-transform: capitalize;" style.fontSize="8"/>
+              <Button text="text-transform: none;" tap="applyTap" tag="text-transform: none;" style.fontSize="8"/>
+              <Button text="all" tap="applyTap" tag="tab-text-color: green; tab-background-color: yellow; selected-tab-text-color: red; android-selected-tab-highlight-color: orange; text-transform: uppercase;" style.fontSize="8"/>
+              <Button text="reset" tap="resetTap" style.fontSize="8"/>
+          </StackLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="IteM twO">
+        <TabViewItem.view>
+            <Label text="Item 2"/>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="IteM threE">
+        <TabViewItem.view>
+            <Label text="Item 3"/>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>
diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts
index fdd70db61..3d09a955e 100644
--- a/tns-core-modules/ui/styling/style.d.ts
+++ b/tns-core-modules/ui/styling/style.d.ts
@@ -101,6 +101,12 @@ declare module "ui/styling/style" {
         public whiteSpace: string;
         public letterSpacing: number;
         public zIndex: number;
+        
+        // TabView-specific props
+        public tabTextColor: Color;
+        public tabBackgroundColor: Color;
+        public selectedTabTextColor: Color;
+        public androidSelectedTabHighlightColor: Color;
 
         constructor(parentView: View);
 
@@ -166,6 +172,11 @@ declare module "ui/styling/style" {
     export var letterSpacingProperty: styleProperty.Property;
     export var zIndexProperty: styleProperty.Property;
 
+    export var tabTextColorProperty: styleProperty.Property;
+    export var tabBackgroundColorProperty: styleProperty.Property;
+    export var selectedTabTextColorProperty: styleProperty.Property;
+    export var androidSelectedTabHighlightColorProperty: styleProperty.Property;
+
     // Helper property holding most layout related properties available in CSS.
     // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
     export var nativeLayoutParamsProperty: styleProperty.Property;
diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts
index 7a5bee76a..2dc6a8ea5 100644
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -835,6 +835,35 @@ export class Style extends DependencyObservable implements styling.Style {
         this._setValue(zIndexProperty, value);
     }
 
+    // TabView-specific properties
+    get tabTextColor(): Color {
+        return this._getValue(tabTextColorProperty);
+    }
+    set tabTextColor(value: Color) {
+        this._setValue(tabTextColorProperty, value);
+    }
+
+    get tabBackgroundColor(): Color {
+        return this._getValue(tabBackgroundColorProperty);
+    }
+    set tabBackgroundColor(value: Color) {
+        this._setValue(tabBackgroundColorProperty, value);
+    }
+
+    get selectedTabTextColor(): Color {
+        return this._getValue(selectedTabTextColorProperty);
+    }
+    set selectedTabTextColor(value: Color) {
+        this._setValue(selectedTabTextColorProperty, value);
+    }
+
+    get androidSelectedTabHighlightColor(): Color {
+        return this._getValue(androidSelectedTabHighlightColorProperty);
+    }
+    set androidSelectedTabHighlightColor(value: Color) {
+        this._setValue(androidSelectedTabHighlightColorProperty, value);
+    }
+
     public _updateTextDecoration() {
         if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
             this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@@ -1086,6 +1115,23 @@ export var letterSpacingProperty = new styleProperty.Property("letterSpacing", "
 export var zIndexProperty = new styleProperty.Property("zIndex", "z-index",
     new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), converters.floatConverter);
 
+//TabView-specific props
+export var tabTextColorProperty = new styleProperty.Property("tabTextColor", "tab-text-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
+    converters.colorConverter);
+
+export var tabBackgroundColorProperty = new styleProperty.Property("tabBackgroundColor", "tab-background-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
+    converters.colorConverter);
+
+export var selectedTabTextColorProperty = new styleProperty.Property("selectedTabTextColor", "selected-tab-text-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
+    converters.colorConverter);
+
+export var androidSelectedTabHighlightColorProperty = new styleProperty.Property("androidSelectedTabHighlightColor", "android-selected-tab-highlight-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
+    converters.colorConverter);
+
 // Helper property holding most layout related properties available in CSS.
 // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
 export var nativeLayoutParamsProperty = new styleProperty.Property("nativeLayoutParams", "nativeLayoutParams",
@@ -1702,4 +1748,5 @@ function onBorderRadiusChanged(value: any): Array<styleProperty.KeyValuePair<sty
 
 styleProperty.registerShorthandCallback("border-color", onBorderColorChanged);
 styleProperty.registerShorthandCallback("border-width", onBorderWidthChanged);
-styleProperty.registerShorthandCallback("border-radius", onBorderRadiusChanged);
\ No newline at end of file
+styleProperty.registerShorthandCallback("border-radius", onBorderRadiusChanged);
+
diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts
index feb651c13..b2909c455 100644
--- a/tns-core-modules/ui/styling/styling.d.ts
+++ b/tns-core-modules/ui/styling/styling.d.ts
@@ -297,6 +297,27 @@
          */
         letterSpacing: number;
 
+        // TabView-specific props
+        /**
+         * Gets or sets the tab text color TabView style property 
+         */
+        tabTextColor: color.Color;
+
+        /**
+         * Gets or sets the tab background color TabView style property 
+         */
+        tabBackgroundColor: color.Color;
+
+        /**
+         * Gets or sets the selected tab text color TabView style property 
+         */
+        selectedTabTextColor: color.Color;
+
+        /**
+         * Gets or sets the selected tab highlight color TabView style property for Android 
+         */
+        androidSelectedTabHighlightColor: color.Color;
+
         //@private
         public _beginUpdate();
         public _endUpdate();
diff --git a/tns-core-modules/ui/tab-view/tab-view-common.ts b/tns-core-modules/ui/tab-view/tab-view-common.ts
index 5be9b6af6..c964c777e 100644
--- a/tns-core-modules/ui/tab-view/tab-view-common.ts
+++ b/tns-core-modules/ui/tab-view/tab-view-common.ts
@@ -62,8 +62,6 @@ export class TabViewItem extends Bindable implements definition.TabViewItem {
 var TAB_VIEW = "TabView";
 var ITEMS = "items";
 var SELECTED_INDEX = "selectedIndex";
-var SELECTED_COLOR = "selectedColor";
-var TABS_BACKGROUND_COLOR = "tabsBackgroundColor";
 
 export module knownCollections {
     export var items = "items";
@@ -71,8 +69,6 @@ export module knownCollections {
 
 var itemsProperty = new Property(ITEMS, TAB_VIEW, new PropertyMetadata(undefined, AffectsLayout));
 var selectedIndexProperty = new Property(SELECTED_INDEX, TAB_VIEW, new PropertyMetadata(undefined, AffectsLayout));
-var selectedColorProperty = new Property(SELECTED_COLOR, TAB_VIEW, new PropertyMetadata(undefined));
-var tabsBackgroundColorProperty = new Property(TABS_BACKGROUND_COLOR, TAB_VIEW, new PropertyMetadata(undefined));
 
 (<PropertyMetadata>selectedIndexProperty.metadata).onSetNativeValue = function (data: PropertyChangeData) {
     var tabView = <TabView>data.object;
@@ -87,8 +83,6 @@ var tabsBackgroundColorProperty = new Property(TABS_BACKGROUND_COLOR, TAB_VIEW,
 export class TabView extends View implements definition.TabView, AddArrayFromBuilder {
     public static itemsProperty = itemsProperty;
     public static selectedIndexProperty = selectedIndexProperty;
-    public static selectedColorProperty = selectedColorProperty;
-    public static tabsBackgroundColorProperty = tabsBackgroundColorProperty;
     public static selectedIndexChangedEvent = "selectedIndexChanged";
 
     public _addArrayFromBuilder(name: string, value: Array<any>) {
@@ -180,20 +174,67 @@ export class TabView extends View implements definition.TabView, AddArrayFromBui
         this._setValue(TabView.selectedIndexProperty, value);
     }
 
+    // [Deprecated. Please use `selectedTabTextColor` to color the titles of the tabs on both platforms and `androidSelectedTabHighlightColor` to color the horizontal line at the bottom of the tab on Android.]
     get selectedColor(): color.Color {
-        return this._getValue(TabView.selectedColorProperty);
+        // Avoid breaking changes and keep the old behavior until we remove this prop
+        if (isAndroid){
+            return this.style.androidSelectedTabHighlightColor;
+        }
+        else {
+            return this.style.selectedTabTextColor;
+        }
     }
     set selectedColor(value: color.Color) {
-        this._setValue(TabView.selectedColorProperty,
-            value instanceof color.Color ? value : new color.Color(<any>value));
+        // Avoid breaking changes and keep the old behavior until we remove this prop
+        if (isAndroid){
+            this.style.androidSelectedTabHighlightColor = value;;
+        }
+        else {
+            this.style.selectedTabTextColor = value;
+        }
     }
 
+    // [Deprecated. Please use `tabBackgroundColor` instead]
     get tabsBackgroundColor(): color.Color {
-        return this._getValue(TabView.tabsBackgroundColorProperty);
+        return this.style.tabBackgroundColor;
     }
     set tabsBackgroundColor(value: color.Color) {
-        this._setValue(TabView.tabsBackgroundColorProperty,
-            value instanceof color.Color ? value : new color.Color(<any>value));
+        this.style.tabBackgroundColor = value;
+    }
+
+    get tabTextColor(): color.Color {
+        return this.style.tabTextColor;
+    }
+    set tabTextColor(value: color.Color) {
+        this.style.tabTextColor = value;
+    }
+
+    get tabBackgroundColor(): color.Color {
+        return this.style.tabBackgroundColor;
+    }
+    set tabBackgroundColor(value: color.Color) {
+        this.style.tabBackgroundColor = value;
+    }
+
+    get selectedTabTextColor(): color.Color {
+        return this.style.selectedTabTextColor;
+    }
+    set selectedTabTextColor(value: color.Color) {
+        this.style.selectedTabTextColor = value;
+    }
+
+    get androidSelectedTabHighlightColor(): color.Color {
+        return this.style.androidSelectedTabHighlightColor;
+    }
+    set androidSelectedTabHighlightColor(value: color.Color) {
+        this.style.androidSelectedTabHighlightColor = value;
+    }
+
+    get textTransform(): string {
+        return this.style.textTransform;
+    }
+    set textTransform(value: string) {
+        this.style.textTransform = value;
     }
 
     public _onSelectedIndexPropertyChangedSetNativeValue(data: PropertyChangeData) {
diff --git a/tns-core-modules/ui/tab-view/tab-view.android.ts b/tns-core-modules/ui/tab-view/tab-view.android.ts
index 983351311..b0468a6f9 100644
--- a/tns-core-modules/ui/tab-view/tab-view.android.ts
+++ b/tns-core-modules/ui/tab-view/tab-view.android.ts
@@ -5,8 +5,6 @@ import view = require("ui/core/view");
 import trace = require("trace");
 import types = require("utils/types");
 import utils = require("utils/utils");
-import proxy = require("ui/core/proxy");
-import color = require("color");
 import style = require("ui/styling/style");
 import font = require("ui/styling/font");
 import * as imageSourceModule from "image-source";
@@ -174,22 +172,6 @@ function ensurePageChangedListenerClass() {
     PageChangedListenerClass = PageChangedListener;
 }
 
-function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var tabLayout = (<TabView>data.object)._getAndroidTabView();
-    if (tabLayout && data.newValue instanceof color.Color) {
-        tabLayout.setSelectedIndicatorColors([data.newValue.android]);
-    }
-}
-(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
-
-function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var tabLayout = (<TabView>data.object)._getAndroidTabView();
-    if (tabLayout && data.newValue instanceof color.Color) {
-        tabLayout.setBackgroundColor(data.newValue.android);
-    }
-}
-(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
-
 export class TabView extends common.TabView {
     private _grid: org.nativescript.widgets.GridLayout;
     private _tabLayout: org.nativescript.widgets.TabLayout;
@@ -353,44 +335,6 @@ export class TabView extends common.TabView {
 }
 
 export class TabViewStyler implements style.Styler {
-    // color
-    private static setColorProperty(v: view.View, newValue: any) {
-        var tab = <definition.TabView>v;
-        if (tab.items && tab.items.length > 0) {
-            var tabLayout = tab._getAndroidTabView();
-
-            for (var i = 0; i < tab.items.length; i++) {
-                tabLayout.getTextViewForItemAt(i).setTextColor(newValue);
-            }
-        }
-    }
-
-    private static resetColorProperty(v: view.View, nativeValue: any) {
-        if (types.isNullOrUndefined(nativeValue)) {
-            return;
-        }
-
-        var tab = <definition.TabView>v;
-
-        if (tab.items && tab.items.length > 0) {
-            var tabLayout = tab._getAndroidTabView();
-
-            for (var i = 0; i < tab.items.length; i++) {
-                tabLayout.getTextViewForItemAt(i).setTextColor(nativeValue);
-            }
-        }
-    }
-
-    private static getColorProperty(v: view.View): any {
-        var tab = <definition.TabView>v;
-        var tv: android.widget.TextView = tab._getAndroidTabView().getTextViewForItemAt(0);
-        if (tv) {
-            return tv.getTextColors().getDefaultColor();
-        }
-        else {
-            return null;
-        }
-    }
 
     // font
     private static setFontInternalProperty(v: view.View, newValue: any, nativeValue?: any) {
@@ -448,17 +392,129 @@ export class TabViewStyler implements style.Styler {
         }
     }
 
+    // tab-text-color
+    private static setTabTextColorProperty(v: view.View, newValue: any) {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        tabLayout.setTabTextColor(types.isNumber(newValue) ? new java.lang.Integer(newValue) : newValue);
+    }
+
+    private static resetTabTextColorProperty(v: view.View, nativeValue: any) {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        tabLayout.setTabTextColor(types.isNumber(nativeValue) ? new java.lang.Integer(nativeValue) : nativeValue);
+    }
+
+    private static getTabTextColorProperty(v: view.View): any {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        return tabLayout.getTabTextColor();
+    }
+
+    //tab-background-color
+    private static setTabBackgroundColorProperty(v: view.View, newValue: any) {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        tabLayout.setBackgroundColor(newValue);
+    }
+
+    private static resetTabBackgroundColorProperty(v: view.View, nativeValue: any) {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        tabLayout.setBackgroundColor(nativeValue);
+    }
+
+    private static getTabBackgroundColorProperty(v: view.View): any {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        let background = tabLayout.getBackground();
+        if (background instanceof android.graphics.drawable.ColorDrawable){
+            return (<android.graphics.drawable.ColorDrawable>background).getColor();
+        }
+        return null; 
+    }
+
+    //selected-tab-text-color
+    private static setSelectedTabTextColorProperty(v: view.View, newValue: any) {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        tabLayout.setSelectedTabTextColor(types.isNumber(newValue) ? new java.lang.Integer(newValue) : newValue);
+    }
+
+    private static resetSelectedTabTextColorProperty(v: view.View, nativeValue: any) {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        tabLayout.setSelectedTabTextColor(types.isNumber(nativeValue) ? new java.lang.Integer(nativeValue) : nativeValue);
+    }
+
+    private static getSelectedTabTextColorProperty(v: view.View): any {
+        var tabLayout = (<definition.TabView>v)._getAndroidTabView();
+        return tabLayout.getSelectedTabTextColor();
+    }
+
+    // android-selected-tab-highlight-color-property
+    private static setAndroidSelectedTabHighlightColorProperty(v: view.View, newValue: any) {
+        let tabLayout = (<TabView>v)._getAndroidTabView();
+        tabLayout.setSelectedIndicatorColors([newValue]);
+    }
+
+    private static resetAndroidSelectedTabHighlightColorProperty(v: view.View, nativeValue: any) {
+        let tabLayout = (<TabView>v)._getAndroidTabView();
+        tabLayout.setSelectedIndicatorColors([nativeValue]);
+    }
+
+    private static getAndroidSelectedTabHighlightColorProperty(v: view.View): any {
+        let tabLayout = (<TabView>v)._getAndroidTabView();
+        let selectedIndicatorColors = tabLayout.getSelectedIndicatorColors();
+        return selectedIndicatorColors.length > 0 ? selectedIndicatorColors[0] : null;
+    }
+    
+    // text-transform
+    private static setTextTransformProperty(v: view.View, newValue: any) {
+        let tabView = <TabView>v;
+        let tabLayout = tabView._getAndroidTabView();
+        for (let i = 0; i < tabView.items.length; i++) {
+            let textView = tabLayout.getTextViewForItemAt(i);
+            let str = tabView.items[i].title;
+            let result = utils.ad.getTransformedString(newValue, textView, str);
+            textView.setText(result);
+        }
+    }
+
+    private static resetTextTransformProperty(v: view.View, nativeValue: any) {
+        let tabView = <TabView>v;
+        let tabLayout = tabView._getAndroidTabView();
+        for (let i = 0; i < tabView.items.length; i++) {
+            let textView = tabLayout.getTextViewForItemAt(i);
+            let str = tabView.items[i].title;
+            let result = utils.ad.getTransformedString(nativeValue, textView, str);
+            textView.setText(result);
+        }
+    }
+
     public static registerHandlers() {
-        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
-            TabViewStyler.setColorProperty,
-            TabViewStyler.resetColorProperty,
-            TabViewStyler.getColorProperty), "TabView");
 
         style.registerHandler(style.fontInternalProperty, new style.StylePropertyChangedHandler(
             TabViewStyler.setFontInternalProperty,
             TabViewStyler.resetFontInternalProperty,
             TabViewStyler.getNativeFontInternalValue), "TabView");
+        
+        style.registerHandler(style.tabTextColorProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setTabTextColorProperty,
+            TabViewStyler.resetTabTextColorProperty,
+            TabViewStyler.getTabTextColorProperty), "TabView");
+
+        style.registerHandler(style.tabBackgroundColorProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setTabBackgroundColorProperty,
+            TabViewStyler.resetTabBackgroundColorProperty,
+            TabViewStyler.getTabBackgroundColorProperty), "TabView");
+        
+        style.registerHandler(style.selectedTabTextColorProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setSelectedTabTextColorProperty,
+            TabViewStyler.resetSelectedTabTextColorProperty,
+            TabViewStyler.getSelectedTabTextColorProperty), "TabView");
+        
+        style.registerHandler(style.androidSelectedTabHighlightColorProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setAndroidSelectedTabHighlightColorProperty,
+            TabViewStyler.resetAndroidSelectedTabHighlightColorProperty,
+            TabViewStyler.getAndroidSelectedTabHighlightColorProperty), "TabView");
+
+        style.registerHandler(style.textTransformProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setTextTransformProperty,
+            TabViewStyler.resetTextTransformProperty), "TabView");
     }
 }
 
-TabViewStyler.registerHandlers();
+TabViewStyler.registerHandlers();
\ No newline at end of file
diff --git a/tns-core-modules/ui/tab-view/tab-view.d.ts b/tns-core-modules/ui/tab-view/tab-view.d.ts
index 2a0d71224..15fbf5e5d 100644
--- a/tns-core-modules/ui/tab-view/tab-view.d.ts
+++ b/tns-core-modules/ui/tab-view/tab-view.d.ts
@@ -49,7 +49,6 @@ declare module "ui/tab-view" {
     class TabView extends view.View {
         public static itemsProperty: dependencyObservable.Property;
         public static selectedIndexProperty: dependencyObservable.Property;
-        public static selectedColorProperty: dependencyObservable.Property;
 
         /**
          * Gets or sets the items of the TabView.
@@ -62,15 +61,40 @@ declare module "ui/tab-view" {
         selectedIndex: number;
 
         /**
-         * Gets or sets the color used for selected item.
+         * [Deprecated. Please use `selectedTabTextColor` to color the titles of the tabs on both platforms and `androidSelectedTabHighlightColor` to color the horizontal line at the bottom of the tab on Android.] Gets or sets the color used for selected item.
          */
         selectedColor: color.Color;
 
         /**
-         * Gets or sets the color used for background of the tab items.
+         * [Deprecated. Please use `tabBackgroundColor` instead] Gets or sets the color used for background of the tab items.
          */
         tabsBackgroundColor: color.Color;
 
+        /**
+         * Gets or sets the text color of the tabs titles.
+         */
+        tabTextColor: color.Color;
+        
+        /**
+         * Gets or sets the background color of the tabs.
+         */
+        tabBackgroundColor: color.Color;
+        
+        /**
+         * Gets or sets the text color of the selected tab title.
+         */
+        selectedTabTextColor: color.Color;
+       
+        /**
+         * Gets or sets the color of the horizontal line drawn below the currently selected tab on Android.
+         */
+        androidSelectedTabHighlightColor: color.Color;
+        
+        /**
+         * Gets or sets the text transform of the tab titles. 
+         */
+        textTransform: string;
+
         /**
          * Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
diff --git a/tns-core-modules/ui/tab-view/tab-view.ios.ts b/tns-core-modules/ui/tab-view/tab-view.ios.ts
index 53afa0a39..3d1897c72 100644
--- a/tns-core-modules/ui/tab-view/tab-view.ios.ts
+++ b/tns-core-modules/ui/tab-view/tab-view.ios.ts
@@ -4,12 +4,10 @@ import dependencyObservable = require("ui/core/dependency-observable");
 import trace = require("trace");
 import view = require("ui/core/view");
 import types = require("utils/types");
-import proxy = require("ui/core/proxy");
 import color = require("color");
 import * as imageSourceModule from "image-source";
 import style = require("ui/styling/style");
 import { Page } from "ui/page";
-
 import * as utils from "utils/utils";
 import getter = utils.ios.getter;
 
@@ -145,20 +143,6 @@ export class TabViewItem extends common.TabViewItem {
     }
 }
 
-function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var tabView = <TabView>data.object;
-    tabView._updateIOSTabBarColorsAndFonts();
-}
-(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
-
-function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var tabView = <TabView>data.object;
-    if (data.newValue instanceof color.Color) {
-        tabView.ios.tabBar.barTintColor = data.newValue.ios;
-    }
-}
-(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
-
 export class TabView extends common.TabView {
     public _ios: UITabBarControllerImpl;
     private _delegate: UITabBarControllerDelegateImpl;
@@ -416,27 +400,42 @@ export class TabView extends common.TabView {
         }
 
         var tabBar = this.ios.tabBar;
-
-        tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null;
         var states = getTitleAttributesForStates(this);
-
         for (var i = 0; i < tabBar.items.count; i++) {
             var item = <UITabBarItem>tabBar.items[i];
             item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
             item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
         }
     }
+
+    public _updateIOSTabBarTextTransform(newValue: string): void {
+        if (!this.items) {
+            return;
+        }
+
+        var tabBar = this.ios.tabBar;
+        for (let i = 0; i < tabBar.items.count; i++) {
+            let item = <UITabBarItem>tabBar.items[i];
+            if (types.isNullOrUndefined(newValue)){
+                // Reset to original
+                item.title = this.items[i].title;
+            }
+            else {
+                item.title = utils.ios.getTransformedText({text: this.items[i].title}, this.items[i].title, newValue);
+            }
+        }
+    }
 }
 
 function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } {
     var normalState = {};
-    if (tabView.color instanceof color.Color) {
-        normalState[UITextAttributeTextColor] = tabView.color.ios;
+    if (tabView.tabTextColor instanceof color.Color) {
+        normalState[UITextAttributeTextColor] = tabView.tabTextColor.ios;
     }
 
     var selectedState = {};
-    if (tabView.selectedColor instanceof color.Color) {
-        selectedState[UITextAttributeTextColor] = tabView.selectedColor.ios;
+    if (tabView.selectedTabTextColor instanceof color.Color) {
+        selectedState[UITextAttributeTextColor] = tabView.selectedTabTextColor.ios;
     }
     else {
         selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor;
@@ -454,17 +453,6 @@ function getTitleAttributesForStates(tabView: TabView): { normalState: any, sele
 }
 
 export class TabViewStyler implements style.Styler {
-    // color
-    private static setColorProperty(v: view.View, newValue: any) {
-        var tab = <definition.TabView>v;
-        tab._updateIOSTabBarColorsAndFonts();
-    }
-
-    private static resetColorProperty(v: view.View, nativeValue: any) {
-        var tab = <definition.TabView>v;
-        tab._updateIOSTabBarColorsAndFonts();
-    }
-
     // font
     private static setFontInternalProperty(v: view.View, newValue: any, nativeValue?: any) {
         var tab = <definition.TabView>v;
@@ -495,16 +483,86 @@ export class TabViewStyler implements style.Styler {
         return currentFont;
     }
 
-    public static registerHandlers() {
-        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
-            TabViewStyler.setColorProperty,
-            TabViewStyler.resetColorProperty), "TabView");
+    // tab-text-color
+    private static setTabTextColorProperty(v: view.View, newValue: any) {
+        var tabView = <definition.TabView>v;
+        tabView._updateIOSTabBarColorsAndFonts();
+    }
 
+    private static resetTabTextColorProperty(v: view.View, nativeValue: any) {
+        var tabView = <definition.TabView>v;
+        tabView._updateIOSTabBarColorsAndFonts();
+    }
+
+    // tab-background-color
+    private static setTabBackgroundColorProperty(v: view.View, newValue: any) {
+        let tabView = <TabView>v;
+        tabView.ios.tabBar.barTintColor = newValue;
+    }
+
+    private static resetTabBackgroundColorProperty(v: view.View, nativeValue: any) {
+        let tabView = <TabView>v;
+        tabView.ios.tabBar.barTintColor = nativeValue;
+    }
+
+    private static getTabBackgroundColorProperty(v: view.View): any {
+        let tabView = <TabView>v;
+        return tabView.ios.tabBar.barTintColor;
+    }
+
+    // selected-tab-text-color
+    private static setSelectedTabTextColorProperty(v: view.View, newValue: any) {
+        var tabView = <definition.TabView>v;
+        tabView.ios.tabBar.tintColor = newValue;
+        tabView._updateIOSTabBarColorsAndFonts();
+    }
+
+    private static resetSelectedTabTextColorProperty(v: view.View, nativeValue: any) {
+        var tabView = <definition.TabView>v;
+        tabView.ios.tabBar.tintColor = nativeValue;
+        tabView._updateIOSTabBarColorsAndFonts();
+    }
+
+    private static getSelectedTabTextColorProperty(v: view.View) {
+        var tabView = <definition.TabView>v;
+        return tabView.ios.tabBar.tintColor;
+    }
+
+    // text-transform
+    private static setTextTransformProperty(v: view.View, newValue: any) {
+        var tabView = <TabView>v;
+        tabView._updateIOSTabBarTextTransform(newValue);
+    }
+
+    private static resetTextTransformProperty(v: view.View, nativeValue: any) {
+        var tabView = <TabView>v;
+        tabView._updateIOSTabBarTextTransform(nativeValue);
+    }
+
+    public static registerHandlers() {
         style.registerHandler(style.fontInternalProperty, new style.StylePropertyChangedHandler(
             TabViewStyler.setFontInternalProperty,
             TabViewStyler.resetFontInternalProperty,
             TabViewStyler.getNativeFontValue), "TabView");
+
+        style.registerHandler(style.tabTextColorProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setTabTextColorProperty,
+            TabViewStyler.resetTabTextColorProperty), "TabView");
+        
+        style.registerHandler(style.tabBackgroundColorProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setTabBackgroundColorProperty,
+            TabViewStyler.resetTabBackgroundColorProperty,
+            TabViewStyler.getTabBackgroundColorProperty), "TabView");
+
+        style.registerHandler(style.selectedTabTextColorProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setSelectedTabTextColorProperty,
+            TabViewStyler.resetSelectedTabTextColorProperty,
+            TabViewStyler.getSelectedTabTextColorProperty), "TabView");
+
+        style.registerHandler(style.textTransformProperty, new style.StylePropertyChangedHandler(
+            TabViewStyler.setTextTransformProperty,
+            TabViewStyler.resetTextTransformProperty), "TabView");
     }
 }
 
-TabViewStyler.registerHandlers();
+TabViewStyler.registerHandlers();
\ No newline at end of file
diff --git a/tns-core-modules/utils/utils.android.ts b/tns-core-modules/utils/utils.android.ts
index 9242d3695..1cc8a3a45 100644
--- a/tns-core-modules/utils/utils.android.ts
+++ b/tns-core-modules/utils/utils.android.ts
@@ -99,7 +99,7 @@ export module ad {
         }
     }
 
-    function getTransformedString(textTransform: string, view, stringToTransform: string): string {
+    export function getTransformedString(textTransform: string, view, stringToTransform: string): string {
         let result: string;
 
         switch (textTransform) {
diff --git a/tns-core-modules/utils/utils.d.ts b/tns-core-modules/utils/utils.d.ts
index 056ae5ebb..bccc2768d 100644
--- a/tns-core-modules/utils/utils.d.ts
+++ b/tns-core-modules/utils/utils.d.ts
@@ -81,6 +81,7 @@
         export function setTextTransform(view, value: string);
         export function setWhiteSpace(view, value: string);
         export function setTextDecoration(view, value: string);
+        export function getTransformedString(textTransform: string, view, stringToTransform: string): string;
 
         /**
          * Gets the native Android application instance.
diff --git a/tns-platform-declarations/android/org.nativescript.widgets.d.ts b/tns-platform-declarations/android/org.nativescript.widgets.d.ts
index 8429f8609..0ff9ed7e1 100644
--- a/tns-platform-declarations/android/org.nativescript.widgets.d.ts
+++ b/tns-platform-declarations/android/org.nativescript.widgets.d.ts
@@ -343,6 +343,11 @@
                 constructor(context: android.content.Context, attrs: android.util.IAttributeSet, defStyle: number);
 
                 setSelectedIndicatorColors(color: Array<number>): void;
+                getSelectedIndicatorColors(): Array<number>;
+                setTabTextColor(color: java.lang.Integer): void;
+                getTabTextColor(): java.lang.Integer;
+                setSelectedTabTextColor(color: java.lang.Integer): void;
+                getSelectedTabTextColor(): java.lang.Integer;
 
                 setItems(items: Array<TabItemSpec>, viewPager: android.support.v4.view.ViewPager): void;
                 updateItemAt(position: number, itemSpec: TabItemSpec): void;