selectedBackgroundColor implemented

apps/tests/xml-declaration/mainPage.xml

@@ -7,7 +7,7 @@
         <TabEntry.view>
           <StackLayout>
             
-            <SegmentedBar selectedIndex="1" style="background-color: red; color: white">
+            <SegmentedBar selectedIndex="1" style="background-color: red; color: white" selectedBackgroundColor="green">
               <SegmentedBar.items>
                 <SegmentedBarEntry title="MAY 3" />
                 <SegmentedBarEntry title="MAY 4" />

ui/segmented-bar/segmented-bar-common.ts

@@ -2,6 +2,7 @@
 import view = require("ui/core/view");
 import proxy = require("ui/core/proxy");
 import dependencyObservable = require("ui/core/dependency-observable");
+import color = require("color");
 
 export module knownCollections {
     export var items = "items";
@@ -34,7 +35,15 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
         this._setValue(SegmentedBar.itemsProperty, value);
     }
 
-    public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(0))
+    get selectedBackgroundColor(): color.Color {
+        return this._getValue(SegmentedBar.selectedBackgroundColorProperty);
+    }
+    set selectedBackgroundColor(value: color.Color) {
+        this._setValue(SegmentedBar.selectedBackgroundColorProperty, 
+            value instanceof color.Color ? value : new color.Color(<any>value));
+    }
 
+    public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined))
+    public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(0))
     public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined))
 }

ui/segmented-bar/segmented-bar.android.ts

@@ -57,10 +57,44 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 
         view.android.setOnTabChangedListener(null);
         view.android.setOnTabChangedListener(view._listener);
+
+        if (view.selectedBackgroundColor) {
+            var tabHost = <android.widget.TabHost>view.android;
+
+            for (var tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
+                var vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
+
+                var stateDrawable = new android.graphics.drawable.StateListDrawable();
+
+                var arr = java.lang.reflect.Array.newInstance(java.lang.Integer.class.getField("TYPE").get(null), 1);
+                arr[0] = (<any>android).R.attr.state_selected;
+
+                var colorDrawable = new SegmentedBarColorDrawable(view.selectedBackgroundColor.android)
+                stateDrawable.addState(arr, colorDrawable);
+                stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom());
+
+                vg.setBackgroundDrawable(stateDrawable);
+            }
+        }
     }
 }
 (<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
 
+class SegmentedBarColorDrawable extends android.graphics.drawable.ColorDrawable {
+    constructor(arg: any) {
+        super(arg);
+
+        return global.__native(this);
+    }
+
+    public draw(canvas: android.graphics.Canvas): void {
+        var p = new android.graphics.Paint();
+        p.setColor(this.Color);
+        p.setStyle(android.graphics.Paint.Style.FILL);
+        canvas.drawRect(0, this.Bounds.height() - 15, this.Bounds.width(), this.Bounds.height(), p);
+    }
+}
+
 export class SegmentedBar extends common.SegmentedBar {
     private _android: OurTabHost;
     public _listener: android.widget.TabHost.OnTabChangeListener;

ui/segmented-bar/segmented-bar.d.ts

@@ -4,6 +4,7 @@
 declare module "ui/segmented-bar" {
     import view = require("ui/core/view");
     import dependencyObservable = require("ui/core/dependency-observable");
+    import color = require("color");
 
     /**
      * Represents a SegmentedBar entry.
@@ -24,6 +25,11 @@ declare module "ui/segmented-bar" {
          */
         selectedIndex: number;
 
+        /**
+         * Gets or sets the selected background color of the SegmentedBar component.
+         */
+        selectedBackgroundColor: color.Color;
+
         /**
          * Gets or sets the items of the SegmentedBar.
          */

ui/segmented-bar/segmented-bar.ios.ts

@@ -2,6 +2,7 @@
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 import types = require("utils/types");
+import color = require("color");
 
 // merge the exports of the common file with the exports of this file
 declare var exports;
@@ -40,6 +41,18 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 }
 (<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
 
+function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <SegmentedBar>data.object;
+    if (!view.ios) {
+        return;
+    }
+
+    if (data.newValue instanceof color.Color) {
+        view.ios.tintColor = (<color.Color>data.newValue).ios;
+    }
+}
+(<proxy.PropertyMetadata>common.SegmentedBar.selectedBackgroundColorProperty.metadata).onSetNativeValue = onSelectedBackgroundColorPropertyChanged;
+
 export class SegmentedBar extends common.SegmentedBar {
     private _ios: UISegmentedControl;
     private _selectionHandler: NSObject;