diff --git a/apps/app/ui-tests-app/css/background.ts b/apps/app/ui-tests-app/button/background.ts
similarity index 100%
rename from apps/app/ui-tests-app/css/background.ts
rename to apps/app/ui-tests-app/button/background.ts
diff --git a/apps/app/ui-tests-app/css/background.xml b/apps/app/ui-tests-app/button/background.xml
similarity index 100%
rename from apps/app/ui-tests-app/css/background.xml
rename to apps/app/ui-tests-app/button/background.xml
diff --git a/apps/app/ui-tests-app/css/border-playground.css b/apps/app/ui-tests-app/button/border-playground.css
similarity index 100%
rename from apps/app/ui-tests-app/css/border-playground.css
rename to apps/app/ui-tests-app/button/border-playground.css
diff --git a/apps/app/ui-tests-app/css/border-playground.ts b/apps/app/ui-tests-app/button/border-playground.ts
similarity index 100%
rename from apps/app/ui-tests-app/css/border-playground.ts
rename to apps/app/ui-tests-app/button/border-playground.ts
diff --git a/apps/app/ui-tests-app/css/border-playground.xml b/apps/app/ui-tests-app/button/border-playground.xml
similarity index 100%
rename from apps/app/ui-tests-app/css/border-playground.xml
rename to apps/app/ui-tests-app/button/border-playground.xml
diff --git a/apps/app/ui-tests-app/button/btn-wrap-text-alignment-4266.xml b/apps/app/ui-tests-app/button/btn-wrap-text-alignment-4266.xml
index 232aa475e..f5f59d6a0 100644
--- a/apps/app/ui-tests-app/button/btn-wrap-text-alignment-4266.xml
+++ b/apps/app/ui-tests-app/button/btn-wrap-text-alignment-4266.xml
@@ -4,10 +4,10 @@
             <NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
         </ActionBar>
     </Page.actionBar>
-    <GridLayout rows="*,*,*,*">
-        <Button text="This a test of a wrapping button [CENTER]" textWrap="true" style="text-align:center;width:100" />
+    <StackLayout>
+        <Button text="This a test of a wrapping button [CENTER]" textWrap="true" style="text-align:center; margin-left:10" />
         <Button row="1" text="This a test of a wrapping button [RIGHT]" textWrap="true" style="text-align:right;width:100" />
         <Button row="2" text="This a test of a wrapping button [LEFT]" textWrap="true" style="text-align:left;width:100" />
         <Button row="3" text="&#xf8ff; This a test of a wrapping button [CENTER ICON]" textWrap="true" style="text-align:center;width:100" />
-    </GridLayout>
+    </StackLayout>
 </Page> 
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/issue-4287.xml b/apps/app/ui-tests-app/button/issue-4287.xml
similarity index 100%
rename from apps/app/ui-tests-app/issues/issue-4287.xml
rename to apps/app/ui-tests-app/button/issue-4287.xml
diff --git a/apps/app/ui-tests-app/button/main-page.ts b/apps/app/ui-tests-app/button/main-page.ts
index d15bac4c6..2b3f7b06f 100644
--- a/apps/app/ui-tests-app/button/main-page.ts
+++ b/apps/app/ui-tests-app/button/main-page.ts
@@ -14,5 +14,8 @@ export function loadExamples() {
     examples.set("btn-wrap-text-alignment-4266", "button/btn-wrap-text-alignment-4266");
     examples.set("button-border", "button/button-border");
     examples.set("styles", "button/styles");
+    examples.set("background", "button/background");
+    examples.set("border-playground","button/border-playground");
+    examples.set("issue-4287","button/issue-4287");
     return examples;
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index 715fe715c..a5bf105c0 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -11,14 +11,13 @@ export function pageLoaded(args: EventData) {
 
 export function loadExamples() {
     const examples = new Map<string, string>();
-    examples.set("background", "css/background");
     examples.set("formatted", "css/decoration-transform-formattedtext");
     examples.set("radius", "css/radius");
     examples.set("spacing", "css/letter-spacing");
     examples.set("decoration", "css/text-decoration");
     examples.set("transform", "css/text-transform");
     examples.set("whitespace", "css/white-space");
-    examples.set("switch", "css/views");
+    examples.set("progress-switch", "css/progress-switch");
     examples.set("zindex", "css/zindex");
     examples.set("clipPath", "css/clip-path");
     examples.set("clipPathInset", "css/clip-path-inset");
@@ -36,8 +35,6 @@ export function loadExamples() {
     examples.set("all-non-uniform-border", "css/all-non-uniform-border");
     examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
     examples.set("padding-and-border", "css/padding-and-border");
-    examples.set("border-playground", "css/border-playground");
-    examples.set("hint-text-color", "css/hint-text-color");
     examples.set("combinators", "css/combinators");
     examples.set("styled-formatted-text", "css/styled-formatted-text");
     
diff --git a/apps/app/ui-tests-app/css/views.xml b/apps/app/ui-tests-app/css/progress-switch.xml
similarity index 100%
rename from apps/app/ui-tests-app/css/views.xml
rename to apps/app/ui-tests-app/css/progress-switch.xml
diff --git a/apps/app/ui-tests-app/issues/main-page.ts b/apps/app/ui-tests-app/issues/main-page.ts
index bec90e2c1..0fd0458ac 100644
--- a/apps/app/ui-tests-app/issues/main-page.ts
+++ b/apps/app/ui-tests-app/issues/main-page.ts
@@ -24,7 +24,6 @@ export function loadExamples() {
     examples.set("1657-ios", "issues/issue-1657-ios");
     examples.set("tabview-with-scrollview_4022","issues/tabview-with-scrollview_4022");
     examples.set("3354-ios", "issues/issue-3354");
-    examples.set("4287", "issues/issue-4287");
 
     return examples;
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/main-page-view-model.ts b/apps/app/ui-tests-app/main-page-view-model.ts
index f1e3c5186..1565022f9 100644
--- a/apps/app/ui-tests-app/main-page-view-model.ts
+++ b/apps/app/ui-tests-app/main-page-view-model.ts
@@ -3,13 +3,11 @@ import { TestExample } from "./test-example-model";
 import { TestPageMainViewModel } from "./test-page-main-view-model";
 import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
 import { ListView } from "tns-core-modules/ui/list-view";
-import * as frame from "tns-core-modules/ui/frame";
-import * as dialogs from "tns-core-modules/ui/dialogs";
 
 export class MainPageViewModel extends TestPageMainViewModel {
 
     private _exampleName: string;
-    private _allExamples: ObservableArray<TestExample>;
+    private _filteredListOfExamples: ObservableArray<TestExample>;
     public static ALL_EXAMPLES: ObservableArray<TestExample>;
     public static _examplesDictionary: Map<string, TestExample>;
 
@@ -18,13 +16,12 @@ export class MainPageViewModel extends TestPageMainViewModel {
         if (MainPageViewModel.ALL_EXAMPLES === undefined || MainPageViewModel.ALL_EXAMPLES.length === 0) {
             MainPageViewModel.ALL_EXAMPLES = new ObservableArray<TestExample>();
             MainPageViewModel._examplesDictionary = new Map<string, TestExample>();
-            this._allExamples = new ObservableArray<TestExample>();
-            this.loadAllExamplesRecursive(this.examples);
-            let listView = <ListView>buttonsPanel.page.getViewById("allExamplesListView");
-            listView.visibility = "hidden";
+            this._filteredListOfExamples = new ObservableArray<TestExample>();
+            this.loadFilteredListOfExamplesRecursive(this.examples);
+            this.getFilteredExamplesContainer().visibility = "hidden";
         }
         this.filterListView(this.exampleName);
-        this.toggleExamplePanels(this.allExamples);
+        this.toggleExamplePanels(this.filteredListOfExamples);
     }
 
     get exampleName(): string {
@@ -39,49 +36,49 @@ export class MainPageViewModel extends TestPageMainViewModel {
         }
     }
 
-    get allExamples(): ObservableArray<TestExample> {
-        return this._allExamples;
+    get filteredListOfExamples(): ObservableArray<TestExample> {
+        return this._filteredListOfExamples;
     }
 
-    set allExamples(array: ObservableArray<TestExample>) {
-        if (this._allExamples !== array) {
-            this._allExamples = array
-            this.notifyPropertyChange("allExamples", array);
+    set filteredListOfExamples(array: ObservableArray<TestExample>) {
+        if (this._filteredListOfExamples !== array) {
+            this._filteredListOfExamples = array
+            this.notifyPropertyChange("filteredListOfExamples", array);
             this.toggleExamplePanels(array);
         }
     }
 
-    public loadExampleFromListView(example) {
-        let exmaplePath = this.allExamples.getItem(example.index).path;
-        frame.topmost().navigate(MainPageViewModel.APP_NAME + "/" + exmaplePath);
+    public static checkIfStringIsNullEmptyOrUndefined(value: string): boolean {
+        return value === "" || value === null || value === undefined;
     }
 
-    public loadExmaple() {
-        if (this.exampleName === "" || this.exampleName === null || this.exampleName === undefined) {
+    public static stringContains(value: string, searchString: string): boolean {
+        return value.indexOf(searchString) >= 0;
+    }
+
+    public loadExampleFromTextField() {
+        super.loadExample(this.exampleName);
+    }
+
+    public loadExampleFromListView(example) {
+        let examplePath = this.filteredListOfExamples.getItem(example.index).path;
+        this.exampleName = examplePath;
+        if (MainPageViewModel.checkIfStringIsNullEmptyOrUndefined(this.exampleName)) {
             return;
         }
-        let selectedExample = this.exampleName.toLocaleLowerCase().trim();
-        this.exampleName = selectedExample;
-        if (selectedExample.indexOf("/") > 0) {
-            try {
-                frame.topmost().navigate(MainPageViewModel.APP_NAME + "/" + selectedExample);
-            } catch (error) {
-                dialogs.alert("Cannot find example: " + selectedExample);
-            }
-        } else {
-            this.selectExample(this.exampleName.toLocaleLowerCase());
-        }
+
+        super.navigateToExample(this.exampleName);
     }
 
     private filterListView(value: string) {
-        if (value !== "" && value !== undefined) {
+        if (!MainPageViewModel.checkIfStringIsNullEmptyOrUndefined(value)) {
             let array = MainPageViewModel.ALL_EXAMPLES.filter((testExample, index, array) => {
-                return testExample.path.toLowerCase().indexOf(value.toLowerCase()) >= 0
-                    || testExample.name.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+                return MainPageViewModel.stringContains(testExample.path.toLowerCase(), value.toLowerCase())
+                    || MainPageViewModel.stringContains(testExample.name.toLowerCase(), value.toLowerCase());
             });
-            this.allExamples = new ObservableArray(array);
+            this.filteredListOfExamples = new ObservableArray(array);
         } else {
-            this.allExamples = null;
+            this.filteredListOfExamples = null;
         }
     }
 
@@ -94,7 +91,7 @@ export class MainPageViewModel extends TestPageMainViewModel {
     }
 
     private toggleExamplePanels(array: ObservableArray<TestExample>) {
-        let listView = <ListView>this.buttonsPanel.page.getViewById("allExamplesListView");
+        let listView = this.getFilteredExamplesContainer();
         if (array !== null && array !== undefined && array.length > 0) {
             this.buttonsPanel.visibility = "hidden";
             listView.visibility = "visible";
@@ -104,17 +101,17 @@ export class MainPageViewModel extends TestPageMainViewModel {
         }
     }
 
-    private loadAllExamplesRecursive(examples: Map<string, string>) {
+    private loadFilteredListOfExamplesRecursive(examples: Map<string, string>) {
         examples.forEach((value, key, map) => {
             let requiredExample = "~/" + MainPageViewModel.APP_NAME + "/" + value;
-            if (value.indexOf("main") > 0) {
+            if (MainPageViewModel.stringContains(value, "main")) {
                 try {
                     let module = require(requiredExample);
                     if (module.loadExamples !== undefined) {
                         var currentExamples = new Map<string, string>();
                         currentExamples = module.loadExamples();
                         currentExamples.forEach((v, key, map) => {
-                            this.loadAllExamplesRecursive(currentExamples);
+                            this.loadFilteredListOfExamplesRecursive(currentExamples);
                         });
                     }
                 } catch (error) {
@@ -123,11 +120,15 @@ export class MainPageViewModel extends TestPageMainViewModel {
             } else {
                 if (!this.checkIfExampleAlreadyExists(MainPageViewModel._examplesDictionary, value)) {
                     const testExample = new TestExample(key, value);
-                    this._allExamples.push(testExample);
+                    this.filteredListOfExamples.push(testExample);
                     MainPageViewModel.ALL_EXAMPLES.push(testExample);
                     MainPageViewModel._examplesDictionary.set(value, testExample)
                 }
             }
         });
     }
+
+    private getFilteredExamplesContainer() {
+        return <ListView>this.buttonsPanel.page.getViewById("filteredListOfExamplesListView");
+    }
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/mainPage.xml b/apps/app/ui-tests-app/mainPage.xml
index 868bac842..2a8c9c917 100644
--- a/apps/app/ui-tests-app/mainPage.xml
+++ b/apps/app/ui-tests-app/mainPage.xml
@@ -3,15 +3,15 @@
   <GridLayout rows="auto, *">
     <StackLayout id="parentLayout" row="0" >
       <TextView automationText="tv" id="textView" text="{{ exampleName }}" />
-      <Button automationText="Run" id="btnRun" text="Run" tap="{{ loadExmaple }}" />
+      <Button automationText="Run" id="btnRun" text="Run" tap="{{ loadExampleFromTextField }}" />
     </StackLayout>
     <ScrollView row="1">
       <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
-    <ListView items="{{ allExamples }}" row="1" itemTap="{{ loadExampleFromListView }}" id="allExamplesListView" >
+    <ListView items="{{ filteredListOfExamples }}" row="1" itemTap="{{ loadExampleFromListView }}" id="filteredListOfExamplesListView" >
       <ListView.itemTemplate>
         <GridLayout columns="*,2*" >
-          <Label text="{{ name }}" />
+          <Label text="{{ name }}" textWrap="true" />
           <Label text="{{ path }}" textWrap="true" col="1"/>
         </GridLayout>
       </ListView.itemTemplate>
diff --git a/apps/app/ui-tests-app/search-bar/issue-4147.xml b/apps/app/ui-tests-app/search-bar/issue-4147.xml
index 7f6e9e2d6..32e905be3 100644
--- a/apps/app/ui-tests-app/search-bar/issue-4147.xml
+++ b/apps/app/ui-tests-app/search-bar/issue-4147.xml
@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Page >
     <Page.actionBar>
-        <ActionBar title="Searchbar">
+        <ActionBar title="issue-4147">
             <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onNavBtnTap"/>
         </ActionBar>
     </Page.actionBar>
     <StackLayout>
+        <!--The background-color shouldn't be inherit but in Android it is-->
         <SearchBar id="bg-color" hint="bg-color" text="" textFieldHintColor="green" />
         <SearchBar class="color" hint="color" text="color" />
         <SearchBar hint="Hint Text" id="searchBar" textFieldHintColor="#FFFFFF" style="color:#FFFFFF;background-color: #795548;height:60" />
+        <SearchBar hint="Hint Text" textFieldHintColor="#FFFFFF" textFieldBackgroundColor="red" style="background-color:green;" />
     </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/test-page-main-view-model.ts b/apps/app/ui-tests-app/test-page-main-view-model.ts
index 87717cf44..ea476add8 100644
--- a/apps/app/ui-tests-app/test-page-main-view-model.ts
+++ b/apps/app/ui-tests-app/test-page-main-view-model.ts
@@ -26,12 +26,21 @@ export class TestPageMainViewModel extends Observable {
         console.log(" EXAMPLE: " + selectedExample);
 
         if (this.examples.has(selectedExample)) {
-            frame.topmost().navigate(TestPageMainViewModel.APP_NAME + "/" + this.basePath + "/" + this.examples.get(selectedExample));
+            this.navigateToExample(this.examples.get(selectedExample));
         } else {
             dialogs.alert("Cannot find example: " + selectedExample);
         }
     }
 
+    protected navigateToExample(exampleFullPath: string) {
+        try {
+            frame.topmost().navigate(TestPageMainViewModel.APP_NAME + "/" + exampleFullPath);
+        } catch (error) {
+            dialogs.alert("Cannot find example: " + exampleFullPath);
+
+        }
+    }
+
     protected loadExample(exampleName: string) {
         console.log("exampleName EXAMPLE: " + exampleName);
         this.selectExample(exampleName);
diff --git a/apps/app/ui-tests-app/css/hint-text-color.ts b/apps/app/ui-tests-app/text-field/hint-text-color.ts
similarity index 100%
rename from apps/app/ui-tests-app/css/hint-text-color.ts
rename to apps/app/ui-tests-app/text-field/hint-text-color.ts
diff --git a/apps/app/ui-tests-app/css/hint-text-color.xml b/apps/app/ui-tests-app/text-field/hint-text-color.xml
similarity index 100%
rename from apps/app/ui-tests-app/css/hint-text-color.xml
rename to apps/app/ui-tests-app/text-field/hint-text-color.xml
diff --git a/apps/app/ui-tests-app/text-field/main-page.ts b/apps/app/ui-tests-app/text-field/main-page.ts
index d3ced649a..f50fd95ba 100644
--- a/apps/app/ui-tests-app/text-field/main-page.ts
+++ b/apps/app/ui-tests-app/text-field/main-page.ts
@@ -14,5 +14,6 @@ export function loadExamples() {
     examples.set("secured-text-field", "text-field/secured-text-field-4135");
     examples.set("max-length", "text-field/max-length");
     examples.set("text-field-border", "text-field/text-field-border");
+    examples.set("hint-text-color", "text-field/hint-text-color");
     return examples;
 }