From c05e8bc29f4603354983a1e08365f9828eca12a6 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Mon, 9 Mar 2015 15:50:28 +0200
Subject: [PATCH 1/5] missing dep prop def added

---
 ui/segmented-bar/segmented-bar.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/segmented-bar/segmented-bar.d.ts b/ui/segmented-bar/segmented-bar.d.ts
index 4af62a85d..0806e56ba 100644
--- a/ui/segmented-bar/segmented-bar.d.ts
+++ b/ui/segmented-bar/segmented-bar.d.ts
@@ -40,6 +40,11 @@ declare module "ui/segmented-bar" {
          */
         public static selectedIndexProperty: dependencyObservable.Property;
 
+        /**
+         * Gets or sets the selected background color property of the SegmentedBar.
+         */
+        public static selectedBackgroundColorProperty: dependencyObservable.Property;
+
         /**
          * Gets or sets the items dependency property of the SegmentedBar.
          */

From 0d8f7ec0c26a8018acd2618bdca2767f6f1b0c3f Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Mon, 9 Mar 2015 15:50:57 +0200
Subject: [PATCH 2/5] initial SearchBar styling added

---
 apps/TelerikNEXT/main-page.xml      | 24 ++++++++++-----
 ui/search-bar/search-bar-common.ts  | 10 ++++++
 ui/search-bar/search-bar.android.ts | 34 ++++++++++++++++++++
 ui/search-bar/search-bar.d.ts       | 11 +++++++
 ui/search-bar/search-bar.ios.ts     | 19 +++++++++---
 ui/styling/stylers.android.ts       | 48 +++++++++++++++++++++++++++++
 ui/styling/stylers.ios.ts           | 36 ++++++++++++++++++++++
 7 files changed, 170 insertions(+), 12 deletions(-)

diff --git a/apps/TelerikNEXT/main-page.xml b/apps/TelerikNEXT/main-page.xml
index dbf50f5bc..7513cb0e2 100644
--- a/apps/TelerikNEXT/main-page.xml
+++ b/apps/TelerikNEXT/main-page.xml
@@ -23,23 +23,31 @@
     </tsb:SideBar.slideContent>
 
     <tsb:SideBar.mainContent>
-      <GridLayout rows="auto, auto, *">
+      <GridLayout rows="auto, auto, auto, *">
 
-        <SegmentedBar selectedIndex="{{ selectedIndex }}" >
+        <SegmentedBar selectedIndex="{{ selectedIndex }}"  style="background-color: transparent;color: white;" selectedBackgroundColor="#fac950">
           <SegmentedBar.items>
             <SegmentedBarItem title="MAY 3" />
             <SegmentedBarItem title="MAY 4" />
             <SegmentedBarItem title="MAY 5" />
           </SegmentedBar.items>
         </SegmentedBar>
-        
-        <StackLayout style="background-color: #fac950;padding: 5;" row="1">
-          <SearchBar text="{{ search }}" />
-        </StackLayout>
 
-        <ListView items="{{ sessions }}" row="2">
+        <Label row="1" style="horizontal-align: center;margin: 5;">
+          <Label.formattedText>
+            <FormattedString fontSize="18" foregroundColor="#fac950">
+              <FormattedString.spans>
+                <Span text="WORKSHOPS" fontAttributes="Bold" />
+              </FormattedString.spans>
+            </FormattedString>
+          </Label.formattedText>
+        </Label>
+
+        <SearchBar text="{{ search }}" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="2" />
+
+        <ListView items="{{ sessions }}" row="3">
           <ListView.itemTemplate>
-            <GridLayout columns="*, auto" style.backgroundColor="{{ canBeFavorited ? '#ffffff' : '#fffbf0' }}">
+            <GridLayout columns="*, auto">
               <StackLayout>
 
                 <Label>
diff --git a/ui/search-bar/search-bar-common.ts b/ui/search-bar/search-bar-common.ts
index 1425f57f1..fcb1f4404 100644
--- a/ui/search-bar/search-bar-common.ts
+++ b/ui/search-bar/search-bar-common.ts
@@ -2,6 +2,7 @@
 import view = require("ui/core/view");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
+import color = require("color");
 
 export module knownEvents {
     export var submit = "submit";
@@ -9,6 +10,7 @@ export module knownEvents {
 }
 
 export class SearchBar extends view.View implements definition.SearchBar {
+    public static textFieldBackgroundColorProperty = new dependencyObservable.Property("textFieldBackgroundColor", "SearchBar", new proxy.PropertyMetadata(undefined))
 
     public static textProperty = new dependencyObservable.Property(
         "text",
@@ -22,4 +24,12 @@ export class SearchBar extends view.View implements definition.SearchBar {
     set text(value: string) {
         this._setValue(SearchBar.textProperty, value);
     }
+
+    get textFieldBackgroundColor(): color.Color {
+        return this._getValue(SearchBar.textFieldBackgroundColorProperty);
+    }
+    set textFieldBackgroundColor(value: color.Color) {
+        this._setValue(SearchBar.textFieldBackgroundColorProperty,
+            value instanceof color.Color ? value : new color.Color(<any>value));
+    }
 } 
\ No newline at end of file
diff --git a/ui/search-bar/search-bar.android.ts b/ui/search-bar/search-bar.android.ts
index 14739d544..7a2b97c4e 100644
--- a/ui/search-bar/search-bar.android.ts
+++ b/ui/search-bar/search-bar.android.ts
@@ -1,6 +1,7 @@
 import common = require("ui/search-bar/search-bar-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
+import color = require("color");
 
 var SEARCHTEXT = "searchText";
 var QUERY = "query";
@@ -18,6 +19,35 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 // register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
 
+function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <SearchBar>data.object;
+    if (!bar.android) {
+        return;
+    }
+
+    if (data.newValue instanceof color.Color) {
+        _changeSearchViewBackgroundColor(bar.android, (<color.Color>data.newValue).android);
+    }
+}
+
+// register the setNativeValue callbacks
+(<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
+
+
+function _changeSearchViewBackgroundColor(view: android.view.View, color: number) {
+    if (view != null) {
+        if (view instanceof android.widget.TextView) {
+            (<android.widget.TextView> view).setBackgroundColor(color);
+            return;
+        } else if (view instanceof android.view.ViewGroup) {
+            var viewGroup = <android.view.ViewGroup> view;
+            for (var i = 0; i < viewGroup.getChildCount(); i++) {
+                _changeSearchViewBackgroundColor(viewGroup.getChildAt(i), color);
+            }
+        }
+    }
+}
+
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(common, exports);
@@ -72,6 +102,10 @@ export class SearchBar extends common.SearchBar {
                 return true;
             }
         }));
+
+        if (this.textFieldBackgroundColor instanceof color.Color) {
+            _changeSearchViewBackgroundColor(this._android, this.textFieldBackgroundColor.android);
+        }
     }
 
     get android(): android.widget.SearchView {
diff --git a/ui/search-bar/search-bar.d.ts b/ui/search-bar/search-bar.d.ts
index fd14ed271..350b8bbbf 100644
--- a/ui/search-bar/search-bar.d.ts
+++ b/ui/search-bar/search-bar.d.ts
@@ -5,6 +5,7 @@ declare module "ui/search-bar" {
     import view = require("ui/core/view");
     import observable = require("data/observable");
     import dependencyObservable = require("ui/core/dependency-observable");
+    import color = require("color");
 
     /**
      * Known event names.
@@ -30,6 +31,11 @@ declare module "ui/search-bar" {
          */
         public static textProperty: dependencyObservable.Property;
 
+        /**
+         * Gets or sets the TextField background color of the SearchBar component.
+         */
+        public static textFieldBackgroundColorProperty: dependencyObservable.Property;
+
         /**
          * Gets the native [android widget](http://developer.android.com/reference/android/widget/SearchView.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
@@ -45,6 +51,11 @@ declare module "ui/search-bar" {
          */
         text: string;
 
+        /**
+         * Gets or sets the TextField background color of the SearchBar component.
+         */
+        textFieldBackgroundColor: color.Color;
+
         on(event: string, callback: (data: observable.EventData) => void);
 
         /**
diff --git a/ui/search-bar/search-bar.ios.ts b/ui/search-bar/search-bar.ios.ts
index e65ae6de5..451cf6752 100644
--- a/ui/search-bar/search-bar.ios.ts
+++ b/ui/search-bar/search-bar.ios.ts
@@ -1,6 +1,7 @@
 import common = require("ui/search-bar/search-bar-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
+import color = require("color");
 
 function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var bar = <SearchBar>data.object;
@@ -10,6 +11,16 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 // register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
 
+function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <SearchBar>data.object;
+    if (data.newValue instanceof color.Color) {
+        (<UITextField>bar.ios.valueForKey("_searchField")).backgroundColor = data.newValue.ios;
+    }
+}
+
+// register the setNativeValue callbacks
+(<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
+
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(common, exports);
@@ -28,7 +39,7 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
         this._owner = owner;
         return this;
     }
-    
+
     public searchBarTextDidChange(searchBar: UISearchBar, searchText: string) {
         this._owner._onPropertyChangedFromNative(common.SearchBar.textProperty, searchText);
 
@@ -39,12 +50,12 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
 
         this._searchText = searchText;
     }
-    
+
     public searchBarCancelButtonClicked(searchBar: UISearchBar) {
         searchBar.resignFirstResponder();
         this._owner._emit(common.knownEvents.clear);
     }
-    
+
     public searchBarSearchButtonClicked(searchBar: UISearchBar) {
         searchBar.resignFirstResponder();
         this._owner._emit(common.knownEvents.submit);
@@ -58,7 +69,7 @@ export class SearchBar extends common.SearchBar {
     constructor() {
         super();
         this._ios = new UISearchBar();
-
+ 
         this._delegate = UISearchBarDelegateImpl.new().initWithOwner(this);
         this._ios.delegate = this._delegate;
     }
diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts
index 5a203952d..56e4b27b4 100644
--- a/ui/styling/stylers.android.ts
+++ b/ui/styling/stylers.android.ts
@@ -239,6 +239,53 @@ export class SegmentedBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class SearchBarStyler implements definition.stylers.Styler {
+
+    private static setBackgroundColorProperty(view: view.View, newValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        bar.setBackgroundColor(newValue);
+    }
+
+    private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        bar.setBackgroundColor(nativeValue);
+    }
+
+    private static setColorProperty(view: view.View, newValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        SearchBarStyler._changeSearchViewTextColor(bar, newValue);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        SearchBarStyler._changeSearchViewTextColor(bar, nativeValue);
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setBackgroundColorProperty,
+            SearchBarStyler.resetBackgroundColorProperty), "SearchBar");
+
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setColorProperty,
+            SearchBarStyler.resetColorProperty), "SearchBar");
+    }
+
+    private static _changeSearchViewTextColor(view: android.view.View, color: number) {
+        if (view != null) {
+            if (view instanceof android.widget.TextView) {
+                (<android.widget.TextView> view).setTextColor(color);
+                return;
+            } else if (view instanceof android.view.ViewGroup) {
+                var viewGroup = <android.view.ViewGroup> view;
+                for (var i = 0; i < viewGroup.getChildCount(); i++) {
+                    SearchBarStyler._changeSearchViewTextColor(viewGroup.getChildAt(i), color);
+                }
+            }
+        }
+    }
+}
+
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
     DefaultStyler.registerHandlers();
@@ -246,4 +293,5 @@ export function _registerDefaultStylers() {
     TextViewStyler.registerHandlers();
     ActivityIndicatorStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
+    SearchBarStyler.registerHandlers();
 }
diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts
index 25f783d53..01f74799c 100644
--- a/ui/styling/stylers.ios.ts
+++ b/ui/styling/stylers.ios.ts
@@ -489,6 +489,41 @@ export class SegmentedBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class SearchBarStyler implements definition.stylers.Styler {
+
+    private static setBackgroundColorProperty(view: view.View, newValue: any) {
+        var bar = <UISearchBar>view.ios;
+        bar.barTintColor = newValue;
+    }
+
+    private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+        var bar = <UISearchBar>view.ios;
+        bar.barTintColor = nativeValue;
+    }
+
+    private static setColorProperty(view: view.View, newValue: any) {
+        var bar = <UISearchBar>view.ios;
+
+        (<UITextField>bar.valueForKey("_searchField")).textColor = newValue;
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var bar = <UISearchBar>view.ios;
+
+        (<UITextField>bar.valueForKey("_searchField")).textColor = nativeValue;
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setBackgroundColorProperty,
+            SearchBarStyler.resetBackgroundColorProperty), "SearchBar");
+
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setColorProperty,
+            SearchBarStyler.resetColorProperty), "SearchBar");
+    }
+}
+
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
     DefaultStyler.registerHandlers();
@@ -497,4 +532,5 @@ export function _registerDefaultStylers() {
     TextFieldStyler.registerHandlers();
     TextViewStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
+    SearchBarStyler.registerHandlers();
 }

From b5269348b1a7c5d398a52a4f25d120ad82a1dd29 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Tue, 10 Mar 2015 09:40:36 +0200
Subject: [PATCH 3/5] styling for android search bar fixed

---
 ui/search-bar/search-bar.android.ts | 17 ++++-------------
 ui/styling/stylers.android.ts       | 24 ++++++++++++------------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/ui/search-bar/search-bar.android.ts b/ui/search-bar/search-bar.android.ts
index 7a2b97c4e..a09e857ac 100644
--- a/ui/search-bar/search-bar.android.ts
+++ b/ui/search-bar/search-bar.android.ts
@@ -33,19 +33,10 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr
 // register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
 
-
-function _changeSearchViewBackgroundColor(view: android.view.View, color: number) {
-    if (view != null) {
-        if (view instanceof android.widget.TextView) {
-            (<android.widget.TextView> view).setBackgroundColor(color);
-            return;
-        } else if (view instanceof android.view.ViewGroup) {
-            var viewGroup = <android.view.ViewGroup> view;
-            for (var i = 0; i < viewGroup.getChildCount(); i++) {
-                _changeSearchViewBackgroundColor(viewGroup.getChildAt(i), color);
-            }
-        }
-    }
+function _changeSearchViewBackgroundColor(bar: android.widget.SearchView, color: number) {
+    var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+    var textView = <android.widget.TextView> bar.findViewById(id);
+    textView.setBackgroundColor(color);
 }
 
 // merge the exports of the common file with the exports of this file
diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts
index 56e4b27b4..fd96070dd 100644
--- a/ui/styling/stylers.android.ts
+++ b/ui/styling/stylers.android.ts
@@ -244,11 +244,13 @@ export class SearchBarStyler implements definition.stylers.Styler {
     private static setBackgroundColorProperty(view: view.View, newValue: any) {
         var bar = <android.widget.SearchView>view.android;
         bar.setBackgroundColor(newValue);
+        SearchBarStyler._changeSearchViewPlateBackgroundColor(bar, newValue);
     }
 
     private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
         var bar = <android.widget.SearchView>view.android;
         bar.setBackgroundColor(nativeValue);
+        SearchBarStyler._changeSearchViewPlateBackgroundColor(bar, nativeValue);
     }
 
     private static setColorProperty(view: view.View, newValue: any) {
@@ -271,18 +273,16 @@ export class SearchBarStyler implements definition.stylers.Styler {
             SearchBarStyler.resetColorProperty), "SearchBar");
     }
 
-    private static _changeSearchViewTextColor(view: android.view.View, color: number) {
-        if (view != null) {
-            if (view instanceof android.widget.TextView) {
-                (<android.widget.TextView> view).setTextColor(color);
-                return;
-            } else if (view instanceof android.view.ViewGroup) {
-                var viewGroup = <android.view.ViewGroup> view;
-                for (var i = 0; i < viewGroup.getChildCount(); i++) {
-                    SearchBarStyler._changeSearchViewTextColor(viewGroup.getChildAt(i), color);
-                }
-            }
-        }
+    private static _changeSearchViewTextColor(bar: android.widget.SearchView, color: number) {
+        var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+        var textView = <android.widget.TextView> bar.findViewById(id);
+        textView.setTextColor(color);
+    }
+
+    private static _changeSearchViewPlateBackgroundColor(bar: android.widget.SearchView, color: number) {
+        var id = bar.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
+        var textView = <android.view.View> bar.findViewById(id);
+        textView.setBackgroundColor(color);
     }
 }
 

From 4fcaabcfece8d551598ccba9562cbd4e897e3aba Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Tue, 10 Mar 2015 09:46:11 +0200
Subject: [PATCH 4/5] search-bar for android is opened by default

---
 ui/search-bar/search-bar.android.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/search-bar/search-bar.android.ts b/ui/search-bar/search-bar.android.ts
index a09e857ac..3508ddb03 100644
--- a/ui/search-bar/search-bar.android.ts
+++ b/ui/search-bar/search-bar.android.ts
@@ -49,6 +49,8 @@ export class SearchBar extends common.SearchBar {
     public _createUI() {
         this._android = new android.widget.SearchView(this._context);
 
+        this._android.setIconified(false);
+
         var that = new WeakRef(this);
         this._android.setOnQueryTextListener(new android.widget.SearchView.OnQueryTextListener({
             get owner() {

From 2d984022ef83167866540bff2ddf97d0f91eea01 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Tue, 10 Mar 2015 10:10:23 +0200
Subject: [PATCH 5/5] stylers fixed

---
 ui/styling/stylers.android.ts | 38 +++++++++++++++++++++++++++++------
 ui/styling/stylers.ios.ts     | 32 +++++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts
index fd96070dd..058113cc1 100644
--- a/ui/styling/stylers.android.ts
+++ b/ui/styling/stylers.android.ts
@@ -241,6 +241,11 @@ export class SegmentedBarStyler implements definition.stylers.Styler {
 
 export class SearchBarStyler implements definition.stylers.Styler {
 
+    private static getBackgroundColorProperty(view: view.View): any {
+        var bar = <android.widget.SearchView>view.android;
+        return bar.getDrawingCacheBackgroundColor();
+    }
+
     private static setBackgroundColorProperty(view: view.View, newValue: any) {
         var bar = <android.widget.SearchView>view.android;
         bar.setBackgroundColor(newValue);
@@ -253,6 +258,17 @@ export class SearchBarStyler implements definition.stylers.Styler {
         SearchBarStyler._changeSearchViewPlateBackgroundColor(bar, nativeValue);
     }
 
+    private static getColorProperty(view: view.View): any {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+
+        if (textView) {
+            return textView.getCurrentTextColor();
+        }
+
+        return undefined;
+    }
+
     private static setColorProperty(view: view.View, newValue: any) {
         var bar = <android.widget.SearchView>view.android;
         SearchBarStyler._changeSearchViewTextColor(bar, newValue);
@@ -266,23 +282,33 @@ export class SearchBarStyler implements definition.stylers.Styler {
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setBackgroundColorProperty,
-            SearchBarStyler.resetBackgroundColorProperty), "SearchBar");
+            SearchBarStyler.resetBackgroundColorProperty,
+            SearchBarStyler.getBackgroundColorProperty), "SearchBar");
 
         style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setColorProperty,
-            SearchBarStyler.resetColorProperty), "SearchBar");
+            SearchBarStyler.resetColorProperty,
+            SearchBarStyler.getColorProperty), "SearchBar");
+    }
+
+    private static _getSearchViewTextView(bar: android.widget.SearchView): android.widget.TextView {
+        var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+        return <android.widget.TextView> bar.findViewById(id);
     }
 
     private static _changeSearchViewTextColor(bar: android.widget.SearchView, color: number) {
-        var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
-        var textView = <android.widget.TextView> bar.findViewById(id);
-        textView.setTextColor(color);
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+        if (textView) {
+            textView.setTextColor(color);
+        }
     }
 
     private static _changeSearchViewPlateBackgroundColor(bar: android.widget.SearchView, color: number) {
         var id = bar.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
         var textView = <android.view.View> bar.findViewById(id);
-        textView.setBackgroundColor(color);
+        if (textView) {
+            textView.setBackgroundColor(color);
+        }
     }
 }
 
diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts
index 01f74799c..029b9b970 100644
--- a/ui/styling/stylers.ios.ts
+++ b/ui/styling/stylers.ios.ts
@@ -496,31 +496,55 @@ export class SearchBarStyler implements definition.stylers.Styler {
         bar.barTintColor = newValue;
     }
 
+    private static getBackgroundColorProperty(view: view.View): any {
+        var bar = <UISearchBar>view.ios;
+        return bar.barTintColor;
+    }
+
     private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
         var bar = <UISearchBar>view.ios;
         bar.barTintColor = nativeValue;
     }
 
+    private static getColorProperty(view: view.View): any {
+        var bar = <UISearchBar>view.ios;
+
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            return sf.textColor;
+        }
+
+        return undefined;
+    }
+
     private static setColorProperty(view: view.View, newValue: any) {
         var bar = <UISearchBar>view.ios;
 
-        (<UITextField>bar.valueForKey("_searchField")).textColor = newValue;
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            sf.textColor = newValue;
+        }
     }
 
     private static resetColorProperty(view: view.View, nativeValue: any) {
         var bar = <UISearchBar>view.ios;
 
-        (<UITextField>bar.valueForKey("_searchField")).textColor = nativeValue;
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            sf.textColor = nativeValue;
+        }
     }
 
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setBackgroundColorProperty,
-            SearchBarStyler.resetBackgroundColorProperty), "SearchBar");
+            SearchBarStyler.resetBackgroundColorProperty,
+            SearchBarStyler.getBackgroundColorProperty), "SearchBar");
 
         style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setColorProperty,
-            SearchBarStyler.resetColorProperty), "SearchBar");
+            SearchBarStyler.resetColorProperty,
+            SearchBarStyler.getColorProperty), "SearchBar");
     }
 }