From befb494a505c7e4c0758cf397f4ce554c5a211cc Mon Sep 17 00:00:00 2001
From: Hristo Hristov <Hristo.Hristov@telerik.com>
Date: Thu, 8 Dec 2016 18:20:25 +0200
Subject: [PATCH] up to segmented-bar.ios

---
 tns-core-modules/ui/border/border.d.ts        |  11 -
 tns-core-modules/ui/button/button.android.ts  |  38 +-
 tns-core-modules/ui/button/button.d.ts        |   3 +-
 tns-core-modules/ui/core/properties.ts        |  76 ++--
 tns-core-modules/ui/core/view-base.ts         | 357 ++++++++++++++-
 tns-core-modules/ui/core/view-common.ts       | 417 ++----------------
 tns-core-modules/ui/core/view.android.ts      |  21 +-
 tns-core-modules/ui/core/view.d.ts            |  54 +--
 .../ui/date-picker/date-picker.android.ts     |   7 +-
 tns-core-modules/ui/definitions.d.ts          |  51 ++-
 tns-core-modules/ui/dialogs/dialogs-common.ts |  21 +-
 .../editable-text-base.android.ts             |  76 ++--
 tns-core-modules/ui/enums/enums.ts            |   2 +-
 tns-core-modules/ui/frame/frame.android.ts    |   5 +-
 tns-core-modules/ui/frame/frame.d.ts          |   3 +-
 tns-core-modules/ui/frame/frame.ios.ts        |   3 +-
 .../ui/gestures/gestures-common.ts            |   4 +-
 .../ui/gestures/gestures.android.ts           |   4 +-
 tns-core-modules/ui/gestures/gestures.ios.ts  |  11 +-
 tns-core-modules/ui/image/image.android.ts    |   8 +-
 .../ui/list-picker/list-picker.android.ts     |  58 +--
 .../ui/list-picker/list-picker.ios.ts         |  94 +---
 .../ui/list-view/list-view.android.ts         |  43 +-
 tns-core-modules/ui/page/page-common.ts       |   8 +-
 tns-core-modules/ui/page/page.android.ts      |  12 +-
 tns-core-modules/ui/page/page.d.ts            |   4 +-
 tns-core-modules/ui/page/page.ios.ts          |   2 +-
 .../ui/progress/progress-common.ts            |  14 +-
 .../ui/progress/progress.android.ts           |   6 +-
 tns-core-modules/ui/progress/progress.ios.ts  |  18 +-
 .../proxy-view-container.ts                   |   4 +-
 .../ui/segmented-bar/segmented-bar-common.ts  |  97 ++--
 .../ui/segmented-bar/segmented-bar.android.ts | 262 +++++------
 .../ui/segmented-bar/segmented-bar.d.ts       |  11 +-
 .../ui/segmented-bar/segmented-bar.ios.ts     |   4 +-
 .../ui/styling/background.android.ts          |  16 +-
 tns-core-modules/ui/styling/background.ios.ts |   9 +-
 tns-core-modules/ui/styling/font.android.ts   |   6 +-
 tns-core-modules/ui/styling/style-scope.d.ts  |  10 +-
 tns-core-modules/ui/styling/style-scope.ts    |  14 +-
 tns-core-modules/ui/styling/style.ts          |  18 +-
 tns-core-modules/ui/text-base/text-base.d.ts  |   7 +-
 .../ui/time-picker/time-picker.android.ts     |   2 +-
 43 files changed, 847 insertions(+), 1044 deletions(-)

diff --git a/tns-core-modules/ui/border/border.d.ts b/tns-core-modules/ui/border/border.d.ts
index 747772e41..5fc5e47b6 100644
--- a/tns-core-modules/ui/border/border.d.ts
+++ b/tns-core-modules/ui/border/border.d.ts
@@ -2,7 +2,6 @@
  * Contains the Border class, which represents a UI border component.
  */
 declare module "ui/border" {
-    import { Color } from "color";
     import { ContentView } from "ui/content-view";
 
     /**
@@ -13,15 +12,5 @@ declare module "ui/border" {
          * Gets or sets the corner radius of the border component.
          */
         cornerRadius: number;
-
-        /**
-         * Gets or sets the border width of the border component.
-         */
-        borderWidth: string | number;
-
-        /**
-         * Gets or sets the border color of the border component.
-         */
-        borderColor: string | Color;
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/button/button.android.ts b/tns-core-modules/ui/button/button.android.ts
index 5f89ee573..0ef33f524 100644
--- a/tns-core-modules/ui/button/button.android.ts
+++ b/tns-core-modules/ui/button/button.android.ts
@@ -1,5 +1,7 @@
-import { ButtonBase, textProperty, formattedTextProperty } from "./button-common";
-import { FormattedString } from "text/formatted-string";
+import {
+    ButtonBase, textProperty, formattedTextProperty, TouchGestureEventData, FormattedString, GestureTypes, TouchAction,
+    PseudoClassHandler
+} from "./button-common";
 
 export * from "./button-common";
 
@@ -17,32 +19,11 @@ class ClickListener implements android.view.View.OnClickListener {
     }
 }
 
-@Interfaces([android.view.View.OnTouchListener])
-class TouchListener implements android.view.View.OnTouchListener {
-    constructor(public owner: WeakRef<Button>) { 
-        return global.__native(this);
-    }
-
-    public onTouch(v: android.view.View, event: android.view.MotionEvent): boolean {
-        let btn = this.owner.get();
-        if (!btn) {
-            return false;
-        }
-
-        if (event.getAction() === 0) { // down
-            btn._goToVisualState("highlighted");
-        }
-        else if (event.getAction() === 1) { // up
-            btn._goToVisualState("normal");
-        }
-        return false;
-    }
-}
-
 export class Button extends ButtonBase {
     nativeView: android.widget.Button;
-    private _isPressed: boolean = false;
+    private _isPressed: boolean;
     private _transformationMethod;
+    private _highlightedHandler: (args: TouchGestureEventData) => void;
 
     get android(): android.widget.Button {
         return this.nativeView;
@@ -52,7 +33,6 @@ export class Button extends ButtonBase {
         let weakRef = new WeakRef(this);
         this.nativeView = new android.widget.Button(this._context);
         this.nativeView.setOnClickListener(new ClickListener(weakRef));
-        this.nativeView.setOnTouchListener(new TouchListener(weakRef));
     }
 
     public _setFormattedTextPropertyToNative(value: FormattedString) {
@@ -70,13 +50,12 @@ export class Button extends ButtonBase {
 
         this.nativeView.setText(newText);
     }
-}
 
     @PseudoClassHandler("normal", "highlighted", "pressed", "active")
     _updateHandler(subscribe: boolean) {
         if (subscribe) {
             this._highlightedHandler = this._highlightedHandler || ((args: TouchGestureEventData) => {
-                switch(args.action) {
+                switch (args.action) {
                     case TouchAction.up:
                         this._goToVisualState("normal");
                         break;
@@ -90,5 +69,4 @@ export class Button extends ButtonBase {
             this.off(GestureTypes.touch, this._highlightedHandler);
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/button/button.d.ts b/tns-core-modules/ui/button/button.d.ts
index b567ee76a..bfc54484b 100644
--- a/tns-core-modules/ui/button/button.d.ts
+++ b/tns-core-modules/ui/button/button.d.ts
@@ -2,8 +2,7 @@
  * Contains the Button class, which represents a standard button widget.
  */
 declare module "ui/button" {
-    import { TextBase, Property, EventData } from "ui/text-base";
-    import { FormattedString, FormattedStringView } from "text/formatted-string";
+    import { TextBase, Property, EventData, FormattedString, FormattedStringView } from "ui/text-base";
 
     /**
      * Represents a standard Button widget.
diff --git a/tns-core-modules/ui/core/properties.ts b/tns-core-modules/ui/core/properties.ts
index a1a2c8c93..029b58868 100644
--- a/tns-core-modules/ui/core/properties.ts
+++ b/tns-core-modules/ui/core/properties.ts
@@ -27,7 +27,7 @@ export interface PropertyOptions<T, U> {
 }
 
 export interface CoerciblePropertyOptions<T, U> extends PropertyOptions<T, U> {
-    coerceValue(T, U): U
+    readonly coerceValue: (T, U) => U;
 }
 
 export interface ShorthandPropertyOptions {
@@ -95,6 +95,10 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
                     this[key] = unboxedValue;
                 }
 
+                if (this.nativeView) {
+                    this[native] = unboxedValue;
+                }
+
                 if (valueChanged) {
                     valueChanged(this, currentValue, unboxedValue);
                 }
@@ -108,10 +112,6 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
                     });
                 }
 
-                if (this.nativeView) {
-                    this[native] = unboxedValue;
-                }
-
                 if (affectsLayout) {
                     this.requestLayout();
                 }
@@ -201,6 +201,10 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
                     this[key] = unboxedValue;
                 }
 
+                if (this.nativeView) {
+                    this[native] = unboxedValue;
+                }
+
                 if (valueChanged) {
                     valueChanged(this, currentValue, unboxedValue);
                 }
@@ -214,10 +218,6 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
                     });
                 }
 
-                if (this.nativeView) {
-                    this[native] = unboxedValue;
-                }
-
                 if (affectsLayout) {
                     this.requestLayout();
                 }
@@ -378,6 +378,15 @@ export class CssProperty<T extends Style, U> {
                     this[key] = value;
                 }
 
+                let view = this.view;
+                if (view.nativeView) {
+                    view[native] = value;
+                    if (dependentPropertyNativeKey) {
+                        // Call the native setter for dependent property. 
+                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
+                    }
+                }
+
                 if (valueChanged) {
                     valueChanged(this, currentValue, value);
                 }
@@ -391,15 +400,6 @@ export class CssProperty<T extends Style, U> {
                     });
                 }
 
-                let view = this.view;
-                if (view.nativeView) {
-                    view[native] = value;
-                    if (dependentPropertyNativeKey) {
-                        // Call the native setter for dependent property. 
-                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
-                    }
-                }
-
                 if (affectsLayout) {
                     view.requestLayout();
                 }
@@ -435,6 +435,15 @@ export class CssProperty<T extends Style, U> {
                     this[key] = value;
                 }
 
+                let view = this.view;
+                if (view.nativeView) {
+                    view[native] = value;
+                    if (dependentPropertyNativeKey) {
+                        // Call the native setter for dependent property. 
+                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
+                    }
+                }
+
                 if (valueChanged) {
                     valueChanged(this, currentValue, value);
                 }
@@ -448,15 +457,6 @@ export class CssProperty<T extends Style, U> {
                     });
                 }
 
-                let view = this.view;
-                if (view.nativeView) {
-                    view[native] = value;
-                    if (dependentPropertyNativeKey) {
-                        // Call the native setter for dependent property. 
-                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
-                    }
-                }
-
                 if (affectsLayout) {
                     view.requestLayout();
                 }
@@ -568,6 +568,15 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                     this[key] = newValue;
                 }
 
+                let nativeView = view.nativeView;
+                if (nativeView) {
+                    view[native] = value;
+                    if (dependentPropertyNativeKey) {
+                        // Call the native setter for dependent property. 
+                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
+                    }
+                }
+
                 if (valueChanged) {
                     valueChanged(this, currentValue, newValue);
                 }
@@ -581,15 +590,6 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                     });
                 }
 
-                let nativeView = view.nativeView;
-                if (nativeView) {
-                    view[native] = value;
-                    if (dependentPropertyNativeKey) {
-                        // Call the native setter for dependent property. 
-                        view[dependentPropertyNativeKey] = this[dependentPropertyKey];
-                    }
-                }
-
                 if (affectsLayout) {
                     view.requestLayout();
                 }
@@ -752,7 +752,7 @@ function inheritableCssPropertiesOn(style: Object): Array<InheritedCssProperty<a
 }
 
 export function applyNativeSetters(view: ViewBase): void {
-    let symbols = Object.getOwnPropertySymbols(view);
+    let symbols = (<any>Object).getOwnPropertySymbols(view);
     for (let symbol of symbols) {
         let property: Property<any, any> = symbolPropertyMap[symbol];
         if (!property) {
@@ -767,7 +767,7 @@ export function applyNativeSetters(view: ViewBase): void {
     }
 
     let style = view.style;
-    symbols = Object.getOwnPropertySymbols(style);
+    symbols = (<any>Object).getOwnPropertySymbols(style);
     for (let symbol of symbols) {
         let property: CssProperty<any, any> = cssSymbolPropertyMap[symbol];
         if (!property) {
diff --git a/tns-core-modules/ui/core/view-base.ts b/tns-core-modules/ui/core/view-base.ts
index efebdb20c..1d346abb6 100644
--- a/tns-core-modules/ui/core/view-base.ts
+++ b/tns-core-modules/ui/core/view-base.ts
@@ -1,11 +1,15 @@
 import { ViewBase as ViewBaseDefinition } from "ui/core/view-base";
 import { Observable, EventData } from "data/observable";
-import { Property, InheritedProperty, CssProperty, Style } from "./properties";
+import { Property, InheritedProperty, CssProperty, Style, clearInheritedProperties, propagateInheritedProperties } from "./properties";
 import { Binding, BindingOptions, Bindable } from "ui/core/bindable";
 import { isIOS } from "platform";
 import { fromString as gestureFromString } from "ui/gestures";
+import { CssState, StyleScope, applyInlineSyle } from "ui/styling/style-scope";
+import { KeyframeAnimation } from "ui/animation/keyframe-animation";
 
-export { Observable, EventData, Binding, BindingOptions, Bindable, isIOS, gestureFromString };
+import { enabled as traceEnabled, write as traceWrite, categories as traceCategories, notifyEvent as traceNotifyEvent } from "trace";
+
+export { KeyframeAnimation, Observable, EventData, Binding, BindingOptions, Bindable, isIOS, gestureFromString, traceEnabled, traceWrite, traceCategories, traceNotifyEvent };
 export * from "./properties";
 
 let defaultBindingSource = {};
@@ -46,12 +50,19 @@ export function isEventOrGesture(name: string, view: ViewBaseDefinition): boolea
 export class ViewBase extends Observable implements ViewBaseDefinition {
     private _updatingJSPropertiesDict = {};
     private _style: Style;
+    private _isLoaded: boolean;
+    private _registeredAnimations: Array<KeyframeAnimation>;
+    private _visualState: string;
 
     public bindingContext: any;
     public nativeView: any;
     public parent: ViewBase;
     public isCollapsed;
 
+    public id: string;
+    public className: string;
+
+    public _cssState: CssState;
     constructor() {
         super();
         this._style = new Style(this);
@@ -69,6 +80,200 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
         return undefined;
     }
 
+    get isLoaded(): boolean {
+        return this._isLoaded;
+    }
+
+    get page(): ViewBaseDefinition {
+        if (this.parent) {
+            return this.parent.page;
+        }
+
+        return null;
+    }
+
+    protected onLoaded() {
+        this._isLoaded = true;
+        this._loadEachChildView();
+        this._applyStyleFromScope();
+        this._emit("loaded");
+    }
+
+    get _childrenCount(): number {
+        return 0;
+    }
+
+    public _loadEachChildView() {
+        if (this._childrenCount > 0) {
+            this.eachChild((child) => {
+                child.onLoaded();
+                return true;
+            });
+        }
+    }
+
+    protected onUnloaded() {
+        this._setCssState(null);
+        this._unloadEachChildView();
+        this._isLoaded = false;
+        this._emit("unloaded");
+    }
+
+    private _unloadEachChildView() {
+        if (this._childrenCount > 0) {
+            this.eachChild((child) => {
+                if (child.isLoaded) {
+                    child.onUnloaded();
+                }
+
+                return true;
+            });
+        }
+    }
+
+    private _applyStyleFromScope() {
+        let rootPage = this.page;
+        if (!rootPage || !rootPage.isLoaded) {
+            return;
+        }
+        let scope: StyleScope = (<any>rootPage)._getStyleScope();
+        scope.applySelectors(this);
+    }
+
+    // TODO: Make sure the state is set to null and this is called on unloaded to clean up change listeners...
+    _setCssState(next: CssState): void {
+        const previous = this._cssState;
+        this._cssState = next;
+
+        if (!this._invalidateCssHandler) {
+            this._invalidateCssHandler = () => {
+                if (this._invalidateCssHandlerSuspended) {
+                    return;
+                }
+                this.applyCssState();
+            };
+        }
+
+        try {
+            this._invalidateCssHandlerSuspended = true;
+
+            if (next) {
+                next.changeMap.forEach((changes, view) => {
+                    if (changes.attributes) {
+                        changes.attributes.forEach(attribute => {
+                            view.addEventListener(attribute + "Change", this._invalidateCssHandler)
+                        });
+                    }
+                    if (changes.pseudoClasses) {
+                        changes.pseudoClasses.forEach(pseudoClass => {
+                            let eventName = ":" + pseudoClass;
+                            view.addEventListener(":" + pseudoClass, this._invalidateCssHandler);
+                            if (view[eventName]) {
+                                view[eventName](+1);
+                            }
+                        });
+                    }
+                });
+            }
+
+            if (previous) {
+                previous.changeMap.forEach((changes, view) => {
+                    if (changes.attributes) {
+                        changes.attributes.forEach(attribute => {
+                            view.removeEventListener("onPropertyChanged:" + attribute, this._invalidateCssHandler)
+                        });
+                    }
+                    if (changes.pseudoClasses) {
+                        changes.pseudoClasses.forEach(pseudoClass => {
+                            let eventName = ":" + pseudoClass;
+                            view.removeEventListener(eventName, this._invalidateCssHandler)
+                            if (view[eventName]) {
+                                view[eventName](-1);
+                            }
+                        });
+                    }
+                });
+            }
+
+        } finally {
+            this._invalidateCssHandlerSuspended = false;
+        }
+
+        this.applyCssState();
+    }
+
+    private notifyPseudoClassChanged(pseudoClass: string): void {
+        this.notify({ eventName: ":" + pseudoClass, object: this });
+    }
+
+    /**
+     * Notify that some attributes or pseudo classes that may affect the current CssState had changed.
+     */
+    private _invalidateCssHandler;
+    private _invalidateCssHandlerSuspended: boolean;
+
+    private applyCssState(): void {
+        if (!this._cssState) {
+            return;
+        }
+
+        // this.style._beginUpdate();
+        this._cssState.apply();
+        // this.style._endUpdate();
+    }
+
+    private pseudoClassAliases = {
+        'highlighted': [
+            'active',
+            'pressed'
+        ]
+    };
+
+    public cssClasses: Set<string> = new Set();
+    public cssPseudoClasses: Set<string> = new Set();
+
+    private getAllAliasedStates(name: string): Array<string> {
+        let allStates = [];
+        allStates.push(name);
+        if (name in this.pseudoClassAliases) {
+            for (let i = 0; i < this.pseudoClassAliases[name].length; i++) {
+                allStates.push(this.pseudoClassAliases[name][i]);
+            }
+        }
+        return allStates;
+    }
+
+    public addPseudoClass(name: string): void {
+        let allStates = this.getAllAliasedStates(name);
+        for (let i = 0; i < allStates.length; i++) {
+            if (!this.cssPseudoClasses.has(allStates[i])) {
+                this.cssPseudoClasses.add(allStates[i]);
+                this.notifyPseudoClassChanged(allStates[i]);
+            }
+        }
+    }
+
+    public deletePseudoClass(name: string): void {
+        let allStates = this.getAllAliasedStates(name);
+        for (let i = 0; i < allStates.length; i++) {
+            if (this.cssPseudoClasses.has(allStates[i])) {
+                this.cssPseudoClasses.delete(allStates[i]);
+                this.notifyPseudoClassChanged(allStates[i]);
+            }
+        }
+    }
+
+    private _applyInlineStyle(inlineStyle) {
+        if (typeof inlineStyle === "string") {
+            try {
+                // this.style._beginUpdate();
+                applyInlineSyle(this, inlineStyle);
+            } finally {
+                // this.style._endUpdate();
+            }
+        }
+    }
+
     private bindings = new Map<string, Binding>();
     public bind(options: BindingOptions, source: Object = defaultBindingSource): void {
         let binding: Binding = this.bindings.get(options.targetProperty);
@@ -126,6 +331,125 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
     public eachChild(callback: (child: ViewBase) => boolean) {
         //
     }
+
+    public _addView(view: ViewBase, atIndex?: number) {
+        if (traceEnabled) {
+            traceWrite(`${this}._addView(${view}, ${atIndex})`, traceCategories.ViewHierarchy);
+        }
+
+        if (!view) {
+            throw new Error("Expecting a valid View instance.");
+        }
+        if (!(view instanceof ViewBase)) {
+            throw new Error(view + " is not a valid View instance.");
+        }
+        if (view.parent) {
+            throw new Error("View already has a parent. View: " + view + " Parent: " + view.parent);
+        }
+
+        view.parent = this;
+        this._addViewCore(view, atIndex);
+        view._parentChanged(null);
+    }
+
+    protected _addViewCore(view: ViewBase, atIndex?: number) {
+        // TODO: Discuss this.
+        if (this._isLoaded) {
+            view.onLoaded();
+        }
+
+        propagateInheritedProperties(this);
+    }
+
+    /**
+    * Core logic for removing a child view from this instance. Used by the framework to handle lifecycle events more centralized. Do not outside the UI Stack implementation.
+    */
+    public _removeView(view: ViewBase) {
+        if (traceEnabled) {
+            traceWrite(`${this}._removeView(${view})`, traceCategories.ViewHierarchy);
+        }
+        if (view.parent !== this) {
+            throw new Error("View not added to this instance. View: " + view + " CurrentParent: " + view.parent + " ExpectedParent: " + this);
+        }
+
+        this._removeViewCore(view);
+        view.parent = undefined;
+        view._parentChanged(this);
+    }
+
+    /**
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    public _removeViewCore(view: ViewBase) {
+        // TODO: Discuss this.
+        if (view.isLoaded) {
+            view.onUnloaded();
+        }
+
+        // view.unsetInheritedProperties();
+    }
+
+    public _goToVisualState(state: string) {
+        if (traceEnabled) {
+            traceWrite(this + " going to state: " + state, traceCategories.Style);
+        }
+        if (state === this._visualState) {
+            return;
+        }
+
+        this.deletePseudoClass(this._visualState);
+        this._visualState = state;
+        this.addPseudoClass(state);
+    }
+
+    public _applyXmlAttribute(attribute, value): boolean {
+        if (attribute === "style") {
+            this._applyInlineStyle(value);
+            return true;
+        }
+
+        return false;
+    }
+
+    public setInlineStyle(style: string): void {
+        if (typeof style !== "string") {
+            throw new Error("Parameter should be valid CSS string!");
+        }
+
+        this._applyInlineStyle(style);
+    }
+
+    public _parentChanged(oldParent: ViewBase): void {
+        //Overridden
+        if (oldParent) {
+            // Move these method in property class.
+            clearInheritedProperties(this);
+        }
+    }
+
+    public _registerAnimation(animation: KeyframeAnimation) {
+        if (this._registeredAnimations === undefined) {
+            this._registeredAnimations = new Array<KeyframeAnimation>();
+        }
+        this._registeredAnimations.push(animation);
+    }
+
+    public _unregisterAnimation(animation: KeyframeAnimation) {
+        if (this._registeredAnimations) {
+            let index = this._registeredAnimations.indexOf(animation);
+            if (index >= 0) {
+                this._registeredAnimations.splice(index, 1);
+            }
+        }
+    }
+
+    public _cancelAllAnimations() {
+        if (this._registeredAnimations) {
+            for (let animation of this._registeredAnimations) {
+                animation.cancel();
+            }
+        }
+    }
 }
 
 export const visibilityProperty = new CssProperty<Style, "visible" | "hidden" | "collapse" | "collapsed">({
@@ -139,5 +463,30 @@ export const visibilityProperty = new CssProperty<Style, "visible" | "hidden" |
 });
 visibilityProperty.register(Style);
 
-export let bindingContextProperty = new InheritedProperty<ViewBase, any>({ name: "bindingContext" });
-bindingContextProperty.register(ViewBase);
\ No newline at end of file
+export const bindingContextProperty = new InheritedProperty<ViewBase, any>({ name: "bindingContext" });
+bindingContextProperty.register(ViewBase);
+
+
+function onCssClassPropertyChanged(view: ViewBase, oldValue: string, newValue: string) {
+    let classes = view.cssClasses;
+    classes.clear();
+    if (typeof newValue === "string") {
+        newValue.split(" ").forEach(c => classes.add(c));
+    }
+}
+
+export const classNameProperty = new Property<ViewBase, string>({ name: "className", valueChanged: onCssClassPropertyChanged });
+classNameProperty.register(ViewBase);
+
+function resetStyles(view: ViewBase): void {
+    // view.style._resetCssValues();
+    // view._applyStyleFromScope();
+    view.eachChild((child) => {
+        // TODO.. Check old implementation....
+        resetStyles(child);
+        return true;
+    });
+}
+
+export const idProperty = new Property<ViewBase, string>({ name: "id", valueChanged: (view, oldValue, newValue) => resetStyles(view) });
+idProperty.register(ViewBase);
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 46f97bcfa..40779fe83 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -1,14 +1,12 @@
 import { View as ViewDefinition, Point, Size } from "ui/core/view";
-import { CssState, StyleScope, applyInlineSyle } from "ui/styling/style-scope";
 import { Color } from "color";
 import { Animation, AnimationPromise } from "ui/animation";
-import { KeyframeAnimation } from "ui/animation/keyframe-animation";
 import { Source } from "utils/debug";
 import { Background } from "ui/styling/background";
 import {
-    ViewBase, getEventOrGestureName, Observable, EventData, Style, propagateInheritedProperties, clearInheritedProperties,
+    ViewBase, getEventOrGestureName, Observable, EventData, Style,
     Property, InheritedProperty, CssProperty, ShorthandProperty, InheritedCssProperty,
-    gestureFromString, isIOS
+    gestureFromString, isIOS, traceEnabled, traceWrite, traceCategories, traceNotifyEvent
 } from "./view-base";
 import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData } from "ui/gestures";
 import { Font, parseFont } from "ui/styling/font";
@@ -16,15 +14,14 @@ import { fontSizeConverter } from "../styling/converters";
 
 // TODO: Remove this and start using string as source (for android).
 import { fromFileOrResource, fromBase64, fromUrl } from "image-source";
-
-import { enabled as traceEnabled, write as traceWrite, categories as traceCategories, notifyEvent as traceNotifyEvent } from "trace";
 import { isDataURI, isFileOrResourcePath } from "utils/utils";
 
 export * from "./view-base";
 
 export {
-    Color, GestureTypes, GesturesObserver, GestureEventData, Animation, AnimationPromise, KeyframeAnimation,
-    Background, Font, traceEnabled, traceWrite, traceCategories, traceNotifyEvent
+    GestureTypes, GesturesObserver, GestureEventData,
+    Animation, AnimationPromise, 
+    Background, Font, Color
 }
 
 // registerSpecialProperty("class", (instance: ViewDefinition, propertyValue: string) => {
@@ -192,22 +189,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 
     private _parent: ViewCommon;
 
-    private _visualState: string;
-    private _isLoaded: boolean;
+    
     private _isLayoutValid: boolean;
     private _cssType: string;
 
     private _updatingInheritedProperties: boolean;
-    private _registeredAnimations: Array<KeyframeAnimation>;
+
 
     public _domId: number;
     public _isAddedToNativeVisualTree: boolean;
     public _gestureObservers = {};
 
-    public cssClasses: Set<string> = new Set();
-    public cssPseudoClasses: Set<string> = new Set();
-
-    public _cssState: CssState;
     public parent: ViewCommon;
 
     constructor() {
@@ -560,22 +552,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 
     //END Style property shortcuts
 
-
-    get page(): ViewDefinition {
-        if (this.parent) {
-            return this.parent.page;
-        }
-
-        return null;
-    }
-
-    public id: string;
     public automationText: string;
     public originX: number;
     public originY: number;
     public isEnabled: boolean;
     public isUserInteractionEnabled: boolean;
-    public className: string;
+
 
     get isLayoutValid(): boolean {
         return this._isLayoutValid;
@@ -592,49 +574,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return true;
     }
 
-    get isLoaded(): boolean {
-        return this._isLoaded;
-    }
-
-    public onLoaded() {
-        this._isLoaded = true;
-        this._loadEachChildView();
-        this._applyStyleFromScope();
-        this._emit("loaded");
-    }
-
-    public _loadEachChildView() {
-        if (this._childrenCount > 0) {
-            // iterate all children and call onLoaded on them first
-            let eachChild = function (child: ViewCommon): boolean {
-                child.onLoaded();
-                return true;
-            }
-            this._eachChildView(eachChild);
-        }
-    }
-
-    public onUnloaded() {
-        this._setCssState(null);
-
-        this._unloadEachChildView();
-
-        this._isLoaded = false;
-        this._emit("unloaded");
-    }
-
-    public _unloadEachChildView() {
-        if (this._childrenCount > 0) {
-            this._eachChildView((child: ViewCommon) => {
-                if (child.isLoaded) {
-                    child.onUnloaded();
-                }
-
-                return true;
-            });
-        }
-    }
-
     // public _onPropertyChanged(property: Property, oldValue: any, newValue: any) {
     //     super._onPropertyChanged(property, oldValue, newValue);
 
@@ -721,44 +660,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     public abstract onLayout(left: number, top: number, right: number, bottom: number): void;
     public abstract layoutNativeView(left: number, top: number, right: number, bottom: number): void;
 
-    private pseudoClassAliases = {
-        'highlighted': [
-            'active',
-            'pressed'
-        ]
-    };
-
-    private getAllAliasedStates(name: string): Array<string> {
-        let allStates = [];
-        allStates.push(name);
-        if (name in this.pseudoClassAliases) {
-            for (let i = 0; i < this.pseudoClassAliases[name].length; i++) {
-                allStates.push(this.pseudoClassAliases[name][i]);
-            }
-        }
-        return allStates;
-    }
-
-    public addPseudoClass(name: string): void {
-        let allStates = this.getAllAliasedStates(name);
-        for (let i = 0; i < allStates.length; i++) {
-            if (!this.cssPseudoClasses.has(allStates[i])) {
-                this.cssPseudoClasses.add(allStates[i]);
-                this.notifyPseudoClassChanged(allStates[i]);
-            }
-        }
-    }
-
-    public deletePseudoClass(name: string): void {
-        let allStates = this.getAllAliasedStates(name);
-        for (let i = 0; i < allStates.length; i++) {
-            if (this.cssPseudoClasses.has(allStates[i])) {
-                this.cssPseudoClasses.delete(allStates[i]);
-                this.notifyPseudoClassChanged(allStates[i]);
-            }
-        }
-    }
-
     public static resolveSizeAndState(size: number, specSize: number, specMode: number, childMeasuredState: number): number {
         let result = size;
         switch (specMode) {
@@ -975,26 +876,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return { boundsChanged, sizeChanged };
     }
 
-    private _applyStyleFromScope() {
-        let rootPage = this.page;
-        if (!rootPage || !rootPage.isLoaded) {
-            return;
-        }
-        let scope: StyleScope = (<any>rootPage)._getStyleScope();
-        scope.applySelectors(this);
-    }
-
-    private _applyInlineStyle(inlineStyle) {
-        if (typeof inlineStyle === "string") {
-            try {
-                // this.style._beginUpdate();
-                applyInlineSyle(this, inlineStyle);
-            } finally {
-                // this.style._endUpdate();
-            }
-        }
-    }
-
     // TODO: We need to implement some kind of build step that includes these members only when building for Android
     //@android
     public _context: android.content.Context;
@@ -1019,9 +900,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     // TODO: We need to implement some kind of build step that includes these members only when building for iOS
 
     //@endios
-    get _childrenCount(): number {
-        return 0;
-    }
+
 
     public _eachChildView(callback: (view: ViewCommon) => boolean) {
         //
@@ -1047,113 +926,39 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         // IOS specific
     }
 
-    /**
-     * Core logic for adding a child view to this instance. Used by the framework to handle lifecycle events more centralized. Do not outside the UI Stack implementation.
-     * // TODO: Think whether we need the base Layout routine.
-     */
-    public _addView(view: ViewDefinition, atIndex?: number) {
-        if (traceEnabled) {
-            traceWrite(`${this}._addView(${view}, ${atIndex})`, traceCategories.ViewHierarchy);
-        }
-
-        if (!view) {
-            throw new Error("Expecting a valid View instance.");
-        }
-        if (!(view instanceof ViewBase)) {
-            throw new Error(view + " is not a valid View instance.");
-        }
-        if (view.parent) {
-            throw new Error("View already has a parent. View: " + view + " Parent: " + view.parent);
-        }
-
-        view.parent = this;
-        this._addViewCore(view, atIndex);
-        view._parentChanged(null);
-    }
-
     /**
      * Method is intended to be overridden by inheritors and used as "protected"
      */
-    public _addViewCore(view: ViewDefinition, atIndex?: number) {
-        this._propagateInheritableProperties(view);
-
+    public _addViewCore(view: ViewCommon, atIndex?: number) {
         if (!view._isAddedToNativeVisualTree) {
             let nativeIndex = this._childIndexToNativeChildIndex(atIndex);
             view._isAddedToNativeVisualTree = this._addViewToNativeVisualTree(view, nativeIndex);
         }
 
-        // TODO: Discuss this.
-        if (this._isLoaded) {
-            view.onLoaded();
-        }
-    }
-
-    public _propagateInheritableProperties(view: ViewDefinition) {
-        propagateInheritedProperties(this);
-        // view._inheritProperties(this);
-        // view.style._inheritStyleProperties(this);
-    }
-
-    // public _inheritProperties(parentView: ViewDefinition) {
-    //     parentView._eachSetProperty((property) => {
-    //         if (!(property instanceof styling.Property) && property.inheritable) {
-    //             let baseValue = parentView._getValue(property);
-    //             this._setValue(property, baseValue, ValueSource.Inherited);
-    //         }
-    //         return true;
-    //     });
-    // }
-
-    /**
-     * Core logic for removing a child view from this instance. Used by the framework to handle lifecycle events more centralized. Do not outside the UI Stack implementation.
-     */
-    public _removeView(view: ViewDefinition) {
-        if (traceEnabled) {
-            traceWrite(`${this}._removeView(${view})`, traceCategories.ViewHierarchy);
-        }
-        if (view.parent !== this) {
-            throw new Error("View not added to this instance. View: " + view + " CurrentParent: " + view.parent + " ExpectedParent: " + this);
-        }
-
-        this._removeViewCore(view);
-        view.parent = undefined;
-        view._parentChanged(this);
+        super._addViewCore(view, atIndex);
     }
 
     /**
      * Method is intended to be overridden by inheritors and used as "protected"
      */
-    public _removeViewCore(view: ViewDefinition) {
+    public _removeViewCore(view: ViewCommon) {
         // TODO: Change type from ViewCommon to ViewBase. Probably this 
         // method will need to go to ViewBase class.
         // Remove the view from the native visual scene first
         this._removeViewFromNativeVisualTree(view);
 
-        // TODO: Discuss this.
-        if (view.isLoaded) {
-            view.onUnloaded();
-        }
-
-        // view.unsetInheritedProperties();
+        super._removeViewCore(view);
     }
 
-    public unsetInheritedProperties(): void {
-        // this._setValue(ProxyObject.bindingContextProperty, undefined, ValueSource.Inherited);
-        // this._eachSetProperty((property) => {
-        //     if (!(property instanceof styling.Property) && property.inheritable) {
-        //         this._resetValue(property, ValueSource.Inherited);
-        //     }
-        //     return true;
-        // });
-    }
-
-    public _parentChanged(oldParent: ViewDefinition): void {
-        //Overridden
-        if (oldParent) {
-            // Move these method in property class.
-            clearInheritedProperties(this);
-        }
-    }
+    // public unsetInheritedProperties(): void {
+    //     // this._setValue(ProxyObject.bindingContextProperty, undefined, ValueSource.Inherited);
+    //     // this._eachSetProperty((property) => {
+    //     //     if (!(property instanceof styling.Property) && property.inheritable) {
+    //     //         this._resetValue(property, ValueSource.Inherited);
+    //     //     }
+    //     //     return true;
+    //     // });
+    // }
 
     /**
      * Method is intended to be overridden by inheritors and used as "protected".
@@ -1173,36 +978,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         view._isAddedToNativeVisualTree = false;
     }
 
-    public _goToVisualState(state: string) {
-        if (traceEnabled) {
-            traceWrite(this + " going to state: " + state, traceCategories.Style);
-        }
-        if (state === this._visualState) {
-            return;
-        }
-
-        this.deletePseudoClass(this._visualState);
-        this._visualState = state;
-        this.addPseudoClass(state);
-    }
-
-    public _applyXmlAttribute(attribute, value): boolean {
-        if (attribute === "style") {
-            this._applyInlineStyle(value);
-            return true;
-        }
-
-        return false;
-    }
-
-    public setInlineStyle(style: string): void {
-        if (typeof style !== "string") {
-            throw new Error("Parameter should be valid CSS string!");
-        }
-
-        this._applyInlineStyle(style);
-    }
-
     public _updateLayout() {
         // needed for iOS.
     }
@@ -1253,30 +1028,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return new Animation([animation]);
     }
 
-    public _registerAnimation(animation: KeyframeAnimation) {
-        if (this._registeredAnimations === undefined) {
-            this._registeredAnimations = new Array<KeyframeAnimation>();
-        }
-        this._registeredAnimations.push(animation);
-    }
-
-    public _unregisterAnimation(animation: KeyframeAnimation) {
-        if (this._registeredAnimations) {
-            let index = this._registeredAnimations.indexOf(animation);
-            if (index >= 0) {
-                this._registeredAnimations.splice(index, 1);
-            }
-        }
-    }
-
-    public _unregisterAllAnimations() {
-        if (this._registeredAnimations) {
-            for (let animation of this._registeredAnimations) {
-                animation.cancel();
-            }
-        }
-    }
-
     public toString(): string {
         let str = this.typeName;
         if (this.id) {
@@ -1304,88 +1055,6 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     //     // Check for a valid _nativeView instance
     //     return !!this._nativeView;
     // }
-
-    private notifyPseudoClassChanged(pseudoClass: string): void {
-        this.notify({ eventName: ":" + pseudoClass, object: this });
-    }
-
-    // TODO: Make sure the state is set to null and this is called on unloaded to clean up change listeners...
-    _setCssState(next: CssState): void {
-        const previous = this._cssState;
-        this._cssState = next;
-
-        if (!this._invalidateCssHandler) {
-            this._invalidateCssHandler = () => {
-                if (this._invalidateCssHandlerSuspended) {
-                    return;
-                }
-                this.applyCssState();
-            };
-        }
-
-        try {
-            this._invalidateCssHandlerSuspended = true;
-
-            if (next) {
-                next.changeMap.forEach((changes, view) => {
-                    if (changes.attributes) {
-                        changes.attributes.forEach(attribute => {
-                            view.addEventListener(attribute + "Change", this._invalidateCssHandler)
-                        });
-                    }
-                    if (changes.pseudoClasses) {
-                        changes.pseudoClasses.forEach(pseudoClass => {
-                            let eventName = ":" + pseudoClass;
-                            view.addEventListener(":" + pseudoClass, this._invalidateCssHandler);
-                            if (view[eventName]) {
-                                view[eventName](+1);
-                            }
-                        });
-                    }
-                });
-            }
-
-            if (previous) {
-                previous.changeMap.forEach((changes, view) => {
-                    if (changes.attributes) {
-                        changes.attributes.forEach(attribute => {
-                            view.removeEventListener("onPropertyChanged:" + attribute, this._invalidateCssHandler)
-                        });
-                    }
-                    if (changes.pseudoClasses) {
-                        changes.pseudoClasses.forEach(pseudoClass => {
-                            let eventName = ":" + pseudoClass;
-                            view.removeEventListener(eventName, this._invalidateCssHandler)
-                            if (view[eventName]) {
-                                view[eventName](-1);
-                            }
-                        });
-                    }
-                });
-            }
-
-        } finally {
-            this._invalidateCssHandlerSuspended = false;
-        }
-
-        this.applyCssState();
-    }
-
-    /**
-     * Notify that some attributes or pseudo classes that may affect the current CssState had changed.
-     */
-    private _invalidateCssHandler;
-    private _invalidateCssHandlerSuspended: boolean;
-
-    private applyCssState(): void {
-        if (!this._cssState) {
-            return;
-        }
-
-        // this.style._beginUpdate();
-        this._cssState.apply();
-        // this.style._endUpdate();
-    }
 }
 
 function getLengthEffectiveValue(density: number, param: Length): number {
@@ -1512,39 +1181,6 @@ export namespace Length {
     }
 }
 
-function onCssClassPropertyChanged(view: ViewCommon, oldValue: string, newValue: string) {
-    let classes = view.cssClasses;
-    classes.clear();
-    if (typeof newValue === "string") {
-        newValue.split(" ").forEach(c => classes.add(c));
-    }
-}
-
-export const classNameProperty = new Property<ViewCommon, string>({ name: "className", valueChanged: onCssClassPropertyChanged });
-classNameProperty.register(ViewCommon);
-
-function resetStyles(view: ViewCommon): void {
-    // view.style._resetCssValues();
-    // view._applyStyleFromScope();
-    view._eachChildView((child) => {
-        // TODO.. Check old implementation....
-        resetStyles(child);
-        return true;
-    });
-}
-
-export const idProperty = new Property<ViewCommon, string>({ name: "id", valueChanged: (view, oldValue, newValue) => resetStyles(view) });
-idProperty.register(ViewCommon);
-
-export const automationTextProperty = new Property<ViewCommon, string>({ name: "automationText" });
-automationTextProperty.register(ViewCommon);
-
-export const originXProperty = new Property<ViewCommon, number>({ name: "originX", defaultValue: 0.5, valueConverter: (v) => parseFloat(v) });
-originXProperty.register(ViewCommon);
-
-export const originYProperty = new Property<ViewCommon, number>({ name: "originY", defaultValue: 0.5, valueConverter: (v) => parseFloat(v) });
-originYProperty.register(ViewCommon);
-
 export function booleanConverter(v: string): boolean {
     let lowercase = (v + '').toLowerCase();
     if (lowercase === "true") {
@@ -1556,6 +1192,15 @@ export function booleanConverter(v: string): boolean {
     throw new Error(`Invalid boolean: ${v}`);
 }
 
+export const automationTextProperty = new Property<ViewCommon, string>({ name: "automationText" });
+automationTextProperty.register(ViewCommon);
+
+export const originXProperty = new Property<ViewCommon, number>({ name: "originX", defaultValue: 0.5, valueConverter: (v) => parseFloat(v) });
+originXProperty.register(ViewCommon);
+
+export const originYProperty = new Property<ViewCommon, number>({ name: "originY", defaultValue: 0.5, valueConverter: (v) => parseFloat(v) });
+originYProperty.register(ViewCommon);
+
 export const isEnabledProperty = new Property<ViewCommon, boolean>({ name: "isEnabled", defaultValue: true, valueConverter: booleanConverter });
 isEnabledProperty.register(ViewCommon);
 
diff --git a/tns-core-modules/ui/core/view.android.ts b/tns-core-modules/ui/core/view.android.ts
index 5087a13f9..6c2e29288 100644
--- a/tns-core-modules/ui/core/view.android.ts
+++ b/tns-core-modules/ui/core/view.android.ts
@@ -76,15 +76,18 @@ export class View extends ViewCommon {
         }
     }
 
-    public onLoaded() {
+    protected onLoaded() {
         super.onLoaded();
         this.setOnTouchListener();
     }
 
     public onUnloaded() {
-        this._nativeView.setOnTouchListener(null);
-        this.touchListenerIsSet = false;
-        this._unregisterAllAnimations();
+        if (this.touchListenerIsSet) {
+            this._nativeView.setOnTouchListener(null);
+            this.touchListenerIsSet = false;
+        }
+
+        this._cancelAllAnimations();
         super.onUnloaded();
     }
 
@@ -99,12 +102,12 @@ export class View extends ViewCommon {
                 this._nativeView.setClickable(true);
             }
 
-            let touchListener = this.touchListener || new TouchListener(new WeakRef(this));
-            this._nativeView.setOnTouchListener(touchListener);
+            this.touchListener = this.touchListener || new TouchListener(new WeakRef(this));
+            this._nativeView.setOnTouchListener(this.touchListener);
         }
     }
 
-    public _addViewCore(view: View, atIndex?: number) {
+    public _addViewCore(view: ViewCommon, atIndex?: number) {
         if (this._context) {
             view._onAttached(this._context);
         }
@@ -127,6 +130,7 @@ export class View extends ViewCommon {
         if (traceEnabled) {
             traceWrite(`${this}._onAttached(context)`, traceCategories.VisualTreeEvents);
         }
+
         if (this._context === context) {
             return;
         }
@@ -158,6 +162,9 @@ export class View extends ViewCommon {
                 return true;
             }
             this._eachChildView(eachChild);
+        } else if (this._nativeView) {
+            // copy all the locally cached values to the native android widget
+            applyNativeSetters(this);
         }
     }
 
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index b5c2d18a2..12845e696 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -1,18 +1,17 @@
 declare module "ui/core/view" {
-    import { GestureTypes, GesturesObserver, GestureEventData } from "ui/gestures";
+    import { GestureTypes, GesturesObserver, GestureEventData, TouchGestureEventData, TouchAction } from "ui/gestures";
     import { Animation, AnimationDefinition, AnimationPromise } from "ui/animation";
-    import { KeyframeAnimation } from "ui/animation/keyframe-animation";
     import {
-        ViewBase, Property, CssProperty, InheritedCssProperty, ShorthandProperty, Style,
-        BindingOptions, Observable, EventData,
+        ViewBase, Property, CssProperty, InheritedCssProperty, Style,
+        BindingOptions, Observable, EventData
     } from "ui/core/view-base";
     import { Background } from "ui/styling/background";
     import { Font } from "ui/styling/font";
     import { Color } from "color";
 
     export {
-        GestureTypes, GesturesObserver, GestureEventData,
-        Animation, AnimationDefinition, AnimationPromise, KeyframeAnimation,
+        GestureTypes, GesturesObserver, GestureEventData, TouchGestureEventData, TouchAction,
+        Animation, AnimationDefinition, AnimationPromise,
         Background, Font, Color
     }
 
@@ -356,16 +355,6 @@ declare module "ui/core/view" {
         cssClasses: Set<string>;
         cssPseudoClasses: Set<string>;
 
-        /**
-         * Gets the parent view. This property is read-only.
-         */
-        public parent: View;
-
-        /**
-         * Gets owner page. This is a read-only property.
-         */
-        page: View;
-
         /**
          * This is called to find out how big a view should be. The parent supplies constraint information in the width and height parameters.
          * The actual measurement work of a view is performed in onMeasure(int, int), called by this method. Therefore, only onMeasure(int, int) can and must be overridden by subclasses.
@@ -550,29 +539,9 @@ declare module "ui/core/view" {
          */
         public getActualSize(): Size;
 
-        /**
-         * @protected
-         * @unstable
-         * A widget can call this method to add a matching css pseudo class.
-         */
-        public addPseudoClass(name: string): void;
-
-        /**
-         * @protected
-         * @unstable
-         * A widget can call this method to discard mathing css pseudo class.
-         */
-        public deletePseudoClass(name: string): void;
-
         // Lifecycle events
-        onLoaded(): void;
-        onUnloaded(): void;
-        isLoaded: boolean;
 
-        _addView(view: View, atIndex?: number);
-        _propagateInheritableProperties(view: View);
-        // _inheritProperties(parentView: View);
-        _removeView(view: View);
+       
         _context: any /* android.content.Context */;
 
         _childIndexToNativeChildIndex(index?: number): number;
@@ -595,18 +564,11 @@ declare module "ui/core/view" {
 
         isCollapsed: boolean;
         isLayoutRequired: boolean;
-        _parentChanged(oldParent: View): void;
+       
         _gestureObservers: any;
         // _isInheritedChange(): boolean;
         _domId: number;
 
-        _cssState: any /* "ui/styling/style-scope" */;
-        _setCssState(next: any /* "ui/styling/style-scope" */);
-
-        _registerAnimation(animation: KeyframeAnimation);
-        _unregisterAnimation(animation: KeyframeAnimation);
-        _unregisterAllAnimations();
-
         _isAddedToNativeVisualTree: boolean;
 
         /**
@@ -740,8 +702,6 @@ declare module "ui/core/view" {
         export function measureSpecToString(measureSpec: number): string;
     }
 
-    export const classNameProperty: Property<View, string>;
-    export const idProperty: Property<View, string>;
     export const automationTextProperty: Property<View, string>;
     export const originXProperty: Property<View, number>;
     export const originYProperty: Property<View, number>;
diff --git a/tns-core-modules/ui/date-picker/date-picker.android.ts b/tns-core-modules/ui/date-picker/date-picker.android.ts
index 0c185bb32..bbcd74498 100644
--- a/tns-core-modules/ui/date-picker/date-picker.android.ts
+++ b/tns-core-modules/ui/date-picker/date-picker.android.ts
@@ -48,13 +48,10 @@ export class DatePicker extends DatePickerBase {
         return this._android;
     }
 
-    public _createUI() {
-        if (!this._listener) {
-            this._listener = new DateChangedListener(new WeakRef(this));
-        }
-
+    public _createUI() {        
         this._android = new android.widget.DatePicker(this._context);
         this._android.setCalendarViewShown(false);
+        this._listener = this._listener = new DateChangedListener(new WeakRef(this));
         this._android.init(0, 0, 0, this._listener);
     }
 
diff --git a/tns-core-modules/ui/definitions.d.ts b/tns-core-modules/ui/definitions.d.ts
index 8980cc5ae..647d30ef9 100644
--- a/tns-core-modules/ui/definitions.d.ts
+++ b/tns-core-modules/ui/definitions.d.ts
@@ -9,9 +9,10 @@ declare module "ui/core/view-base" {
     import { Style } from "ui/styling/style";
     import { isIOS } from "platform";
     import { fromString as gestureFromString } from "ui/gestures";
+    import { KeyframeAnimation } from "ui/animation/keyframe-animation";
 
     export {
-        Observable, EventData, 
+        Observable, EventData, KeyframeAnimation,
         Binding, BindingOptions, Bindable, Style, isIOS, gestureFromString
     };
 
@@ -41,10 +42,17 @@ declare module "ui/core/view-base" {
         public android: any;
         public nativeView: any;
         public bindingContext: any;
+
         /**
          * Gets the parent view. This property is read-only.
          */
-        public parent: ViewBase;
+        public readonly parent: ViewBase;
+
+        /**
+         * Gets owner page. This is a read-only property.
+         */
+        public readonly page: ViewBase;
+
         /**
          * Gets the style object associated to this view.
          */
@@ -52,15 +60,50 @@ declare module "ui/core/view-base" {
 
         /**
          * Returns true if visibility is set to 'collapse'.
+         * Readonly property
          */
         public isCollapsed: boolean;
+        public readonly isLoaded: boolean;
+
+        // public onLoaded(): void;
+        // public onUnloaded(): void;
 
         public bind(options: BindingOptions, source: Object): void;
         public unbind(property: string): void;
 
         public requestLayout(): void;
         public eachChild(callback: (child: ViewBase) => boolean): void;
+
+        public _addView(view: ViewBase, atIndex?: number): void;
+        public _removeView(view: ViewBase): void;
+        public _parentChanged(oldParent: ViewBase): void;
+
+        _childrenCount: number;
+
+        _cssState: any /* "ui/styling/style-scope" */;
+        _setCssState(next: any /* "ui/styling/style-scope" */);
+        _registerAnimation(animation: KeyframeAnimation);
+        _unregisterAnimation(animation: KeyframeAnimation);
+        _cancelAllAnimations();
+
+        /**
+         * @protected
+         * @unstable
+         * A widget can call this method to add a matching css pseudo class.
+         */
+        public addPseudoClass(name: string): void;
+
+        /**
+         * @protected
+         * @unstable
+         * A widget can call this method to discard mathing css pseudo class.
+         */
+        public deletePseudoClass(name: string): void;
     }
+
+    export const idProperty: Property<ViewBase, string>;
+    export const classNameProperty: Property<ViewBase, string>;
+    export const bindingContextProperty: InheritedProperty<ViewBase, any>;
 }
 
 declare module "ui/core/properties" {
@@ -80,7 +123,7 @@ declare module "ui/core/properties" {
     }
 
     export interface CoerciblePropertyOptions<T, U> extends PropertyOptions<T, U> {
-        coerceValue(T, U): U
+        readonly coerceValue: (t: T, u: U) => U;
     }
 
     export interface CssPropertyOptions<T extends Style, U> extends PropertyOptions<T, U> {
@@ -134,4 +177,6 @@ declare module "ui/core/properties" {
         public readonly cssName: string;
         public register(cls: { prototype: T }): void;
     }
+
+    export function applyNativeSetters(view: ViewBase): void;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/dialogs/dialogs-common.ts b/tns-core-modules/ui/dialogs/dialogs-common.ts
index 964fd6e6a..fc0cdd7c5 100644
--- a/tns-core-modules/ui/dialogs/dialogs-common.ts
+++ b/tns-core-modules/ui/dialogs/dialogs-common.ts
@@ -4,15 +4,14 @@ import { Button } from "ui/button";
 import { TextField } from "ui/text-field";
 import { Label } from "ui/label";
 import { View, Color } from "ui/core/view";
-import * as types from "utils/types";
 
-export let STRING = "string",
-    PROMPT = "Prompt",
-    CONFIRM = "Confirm",
-    ALERT = "Alert",
-    LOGIN = "Login",
-    OK = "OK",
-    CANCEL = "Cancel";
+export const STRING = "string";
+export const PROMPT = "Prompt";
+export const CONFIRM = "Confirm";
+export const ALERT = "Alert";
+export const LOGIN = "Login";
+export const OK = "OK";
+export const CANCEL = "Cancel";
 
 /**
  * Defines the input type for prompt dialog.
@@ -65,7 +64,7 @@ let buttonBackgroundColor: Color;
 // NOTE: This will fail if app.css is changed.
 export function getButtonBackgroundColor(): Color {
     if (!buttonBackgroundColor) {
-        let btn = new button.Button();
+        let btn = new Button();
         applySelectors(btn);
         buttonBackgroundColor = btn.backgroundColor;
         btn.onUnloaded();
@@ -100,5 +99,5 @@ export function getLabelColor(): Color {
 }
 
 export function isDialogOptions(arg): boolean {
-    return !types.isNullOrUndefined(arg) && (arg.message || arg.title);
-}
+    return arg && (arg.message || arg.title);
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts b/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts
index 619d35cea..bdd52c4fc 100644
--- a/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts
+++ b/tns-core-modules/ui/editable-text-base/editable-text-base.android.ts
@@ -1,21 +1,12 @@
 import {
     EditableTextBase as EditableTextBaseCommon, keyboardTypeProperty,
     returnKeyTypeProperty, editableProperty, updateTextTriggerProperty,
-    autocapitalizationTypeProperty, autocorrectProperty, hintProperty, 
+    autocapitalizationTypeProperty, autocorrectProperty, hintProperty,
     textProperty
 } from "./editable-text-base-common";
 
 import { ad } from "utils/utils";
 
-export class EditableTextBase extends common.EditableTextBase {
-    private _android: android.widget.EditText;
-    private _textWatcher: android.text.TextWatcher;
-    private _keyListenerCache: android.text.method.IKeyListener;
-    /* tslint:disable */
-    private _dirtyTextAccumulator: string;
-    /* tslint:enable */
-
-
 @Interfaces([android.text.TextWatcher])
 class TextWatcher implements android.text.TextWatcher {
     constructor(private owner: WeakRef<EditableTextBase>) {
@@ -61,6 +52,9 @@ class TextWatcher implements android.text.TextWatcher {
     }
 }
 
+//https://github.com/NativeScript/NativeScript/issues/2942
+let dismissKeyboardTimeoutId: number;
+
 @Interfaces([android.view.View.OnFocusChangeListener])
 class FocusChangeListener implements android.view.View.OnFocusChangeListener {
     constructor(private owner: WeakRef<EditableTextBase>) {
@@ -73,13 +67,13 @@ class FocusChangeListener implements android.view.View.OnFocusChangeListener {
             return;
         }
 
-        if (!hasFocus) {
-             if (dismissKeyboardTimeoutId){
-                 // https://github.com/NativeScript/NativeScript/issues/2942
-                 // Don't hide the keyboard since another (or the same) EditText has gained focus.
-                 clearTimeout(dismissKeyboardTimeoutId);
-                 dismissKeyboardTimeoutId = undefined;
-             }
+        if (hasFocus) {
+            if (dismissKeyboardTimeoutId) {
+                // https://github.com/NativeScript/NativeScript/issues/2942
+                // Don't hide the keyboard since another (or the same) EditText has gained focus.
+                clearTimeout(dismissKeyboardTimeoutId);
+                dismissKeyboardTimeoutId = undefined;
+            }
         }
         else {
             if (owner._dirtyTextAccumulator) {
@@ -88,11 +82,11 @@ class FocusChangeListener implements android.view.View.OnFocusChangeListener {
             }
 
             dismissKeyboardTimeoutId = setTimeout(() => {
-                        // https://github.com/NativeScript/NativeScript/issues/2942
-                        // Dismiss the keyboard if focus goes to something different from EditText.
-                        owner.dismissSoftInput();
-                        dismissKeyboardTimeoutId = null;
-                    }, 1);
+                // https://github.com/NativeScript/NativeScript/issues/2942
+                // Dismiss the keyboard if focus goes to something different from EditText.
+                owner.dismissSoftInput();
+                dismissKeyboardTimeoutId = null;
+            }, 1);
         }
     }
 }
@@ -106,24 +100,26 @@ class EditorActionListener implements android.widget.TextView.OnEditorActionList
     public onEditorAction(textView: android.widget.TextView, actionId: number, event: android.view.KeyEvent): boolean {
         let owner = this.owner.get();
         if (owner) {
-	    if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_DONE ||
-           	actionId === android.view.inputmethod.EditorInfo.IME_ACTION_GO ||
-            	actionId === android.view.inputmethod.EditorInfo.IME_ACTION_SEARCH ||
-            	actionId === android.view.inputmethod.EditorInfo.IME_ACTION_SEND ||
-            	(event && event.getKeyCode() === android.view.KeyEvent.KEYCODE_ENTER)) {
-                 // If it is TextField, close the keyboard. If it is TextView, do not close it since the TextView is multiline
-                 // https://github.com/NativeScript/NativeScript/issues/3111
-                 if (textView.getMaxLines() === 1){
-                     owner.dismissSoftInput();
-                 }
-                 owner._onReturnPress();
-             }
-             // If action is ACTION_NEXT then do not close keyboard
-             if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_NEXT) {
-               owner._onReturnPress();
-             }
+            if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_DONE ||
+                actionId === android.view.inputmethod.EditorInfo.IME_ACTION_GO ||
+                actionId === android.view.inputmethod.EditorInfo.IME_ACTION_SEARCH ||
+                actionId === android.view.inputmethod.EditorInfo.IME_ACTION_SEND ||
+                (event && event.getKeyCode() === android.view.KeyEvent.KEYCODE_ENTER)) {
+                // If it is TextField, close the keyboard. If it is TextView, do not close it since the TextView is multiline
+                // https://github.com/NativeScript/NativeScript/issues/3111
+                if (textView.getMaxLines() === 1) {
+                    owner.dismissSoftInput();
+                }
+                owner._onReturnPress();
+            }
 
-        return false;
+            // If action is ACTION_NEXT then do not close keyboard
+            if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_NEXT) {
+                owner._onReturnPress();
+            }
+
+            return false;
+        }
     }
 }
 
@@ -422,4 +418,4 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
     set [hintProperty.native](value: string) {
         this.nativeView.setHint(value + '');
     }
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/enums/enums.ts b/tns-core-modules/ui/enums/enums.ts
index 315ad744f..145d5eb79 100644
--- a/tns-core-modules/ui/enums/enums.ts
+++ b/tns-core-modules/ui/enums/enums.ts
@@ -183,4 +183,4 @@ export module AnimationCurve {
 export module StatusBarStyle {
     export var light = "light";
     export var dark = "dark";
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/frame/frame.android.ts b/tns-core-modules/ui/frame/frame.android.ts
index b6b37fc52..6d93c1627 100644
--- a/tns-core-modules/ui/frame/frame.android.ts
+++ b/tns-core-modules/ui/frame/frame.android.ts
@@ -3,14 +3,11 @@
     NavigationTransition, AndroidFragmentCallbacks, AndroidActivityCallbacks
 } from "ui/frame";
 import { FrameBase, NavigationContext, stack, goBack } from "./frame-common";
-import { Page } from "ui/page";
-import { View } from "ui/core/view";
-import { Observable } from "data/observable";
+import { Page, View, Observable } from "ui/page";
 import { DIALOG_FRAGMENT_TAG } from "../page/constants";
 import * as transitionModule from "ui/transition";
 import * as trace from "trace";
 import * as application from "application";
-import * as types from "utils/types";
 
 export * from "./frame-common";
 
diff --git a/tns-core-modules/ui/frame/frame.d.ts b/tns-core-modules/ui/frame/frame.d.ts
index cf1ab7faf..eaa1c5d5d 100644
--- a/tns-core-modules/ui/frame/frame.d.ts
+++ b/tns-core-modules/ui/frame/frame.d.ts
@@ -2,8 +2,7 @@
  * Contains the Frame class, which represents the logical View unit that is responsible for navigation within an application.
  */
 declare module "ui/frame" {
-    import { View, Observable, EventData  } from "ui/core/view";
-    import { Page } from "ui/page";
+    import { Page, View, Observable, EventData } from "ui/page";
     import { Transition } from "ui/transition";
 
     /**
diff --git a/tns-core-modules/ui/frame/frame.ios.ts b/tns-core-modules/ui/frame/frame.ios.ts
index 52e90f4b9..cfd8ce630 100644
--- a/tns-core-modules/ui/frame/frame.ios.ts
+++ b/tns-core-modules/ui/frame/frame.ios.ts
@@ -1,7 +1,6 @@
 import { iOSFrame as iOSFrameDefinition, BackstackEntry, NavigationTransition } from "ui/frame";
 import { FrameBase } from "./frame-common";
-import { Page } from "ui/page";
-import { View } from "ui/core/view";
+import { Page, View } from "ui/page";
 
 import * as transitionModule from "ui/transition";
 import * as trace from "trace";
diff --git a/tns-core-modules/ui/gestures/gestures-common.ts b/tns-core-modules/ui/gestures/gestures-common.ts
index 1c88246b0..a64c119ef 100644
--- a/tns-core-modules/ui/gestures/gestures-common.ts
+++ b/tns-core-modules/ui/gestures/gestures-common.ts
@@ -1,5 +1,7 @@
 import { GestureTypes as GestureTypesDefinition, GestureEventData, GesturesObserver as GesturesObserverDefinition } from "ui/gestures";
-import { View, EventData } from "ui/core/view";
+import { View } from "ui/core/view";
+
+export { View, EventData, layout } from "ui/core/view";
 
 export enum GestureTypes {
     tap = 1 << 0,
diff --git a/tns-core-modules/ui/gestures/gestures.android.ts b/tns-core-modules/ui/gestures/gestures.android.ts
index f33ec1ce2..6909c8775 100644
--- a/tns-core-modules/ui/gestures/gestures.android.ts
+++ b/tns-core-modules/ui/gestures/gestures.android.ts
@@ -1,7 +1,5 @@
 import { GestureEventData, SwipeGestureEventData, PanGestureEventData, RotationGestureEventData } from "ui/gestures";
-import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection } from "./gestures-common";
-import { View, layout } from "ui/core/view";
-import { EventData } from "data/observable";
+import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection, View, layout, EventData } from "./gestures-common";
 import * as trace from "trace";
 
 export * from "./gestures-common";
diff --git a/tns-core-modules/ui/gestures/gestures.ios.ts b/tns-core-modules/ui/gestures/gestures.ios.ts
index 8c25faae6..874e24a60 100644
--- a/tns-core-modules/ui/gestures/gestures.ios.ts
+++ b/tns-core-modules/ui/gestures/gestures.ios.ts
@@ -1,11 +1,8 @@
 import { GestureEventData, SwipeGestureEventData, PanGestureEventData, RotationGestureEventData, PinchGestureEventData } from "ui/gestures";
-import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection } from "./gestures-common";
-import { View } from "ui/core/view";
-import { EventData } from "data/observable";
+import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection,  View, EventData } from "./gestures-common";
 import * as trace from "trace";
-import * as utils from "utils/utils";
-import types = require("utils/types");
-import getter = utils.ios.getter;
+import { ios } from "utils/utils";
+import getter = ios.getter;
 
 export * from "./gestures-common";
 
@@ -451,7 +448,7 @@ class TouchGestureEventData implements TouchGestureEventData {
     }
 
     private getMainPointer(): UITouch {
-        if (types.isUndefined(this._mainPointer)) {
+        if (this._mainPointer === undefined) {
             this._mainPointer = this.ios.touches.anyObject();
         }
         return this._mainPointer;
diff --git a/tns-core-modules/ui/image/image.android.ts b/tns-core-modules/ui/image/image.android.ts
index 042585d13..2b3a497f1 100644
--- a/tns-core-modules/ui/image/image.android.ts
+++ b/tns-core-modules/ui/image/image.android.ts
@@ -89,7 +89,7 @@ export class Image extends ImageBase {
         let owner = new WeakRef<Image>(this);
         this._imageLoadedListener = this._imageLoadedListener || new ImageLoadedListener(new WeakRef(this));
         
-        this.imageSource = unsetValue;
+        this.imageSource = <any>unsetValue;
         if (typeof value === "string") {
             value = value.trim();
             this.isLoading = true;
@@ -98,8 +98,8 @@ export class Image extends ImageBase {
                 // TODO: Check with runtime what should we do in case of base64 string.
                 super._createImageSourceFromSrc();
             }
-            else if (imageSource.isFileOrResourcePath(value)) {
-                if (value.indexOf(utils.RESOURCE_PREFIX) === 0) {
+            else if (isFileOrResourcePath(value)) {
+                if (value.indexOf(RESOURCE_PREFIX) === 0) {
                     imageView.setUri(value, this.decodeWidth, this.decodeHeight, this.useCache, async, this._imageLoadedListener);
                 }
                 else {
@@ -172,4 +172,4 @@ class ImageLoadedListener implements org.nativescript.widgets.image.Worker.OnIma
             owner.isLoading = false;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/list-picker/list-picker.android.ts b/tns-core-modules/ui/list-picker/list-picker.android.ts
index db2c4ca35..db15bf424 100644
--- a/tns-core-modules/ui/list-picker/list-picker.android.ts
+++ b/tns-core-modules/ui/list-picker/list-picker.android.ts
@@ -65,10 +65,10 @@ export class ListPicker extends ListPickerBase {
         return this._android;
     }
 
-
     public _createUI() {
         this._android = new android.widget.NumberPicker(this._context);
-        this._editText = getEditText(this._android);
+        let editText = getEditText(this._android);
+        this._editText = editText;
         this._selectorWheelPaint = getSelectorWheelPaint(this._android);
 
         this._android.setDescendantFocusability(android.widget.NumberPicker.FOCUS_BLOCK_DESCENDANTS);
@@ -77,36 +77,24 @@ export class ListPicker extends ListPickerBase {
         this._android.setMaxValue(0);
         this._android.setValue(0);
 
-        let formatter = this._formatter || new Formatter(new WeakRef(this));
+        this._formatter = this._formatter || new Formatter(new WeakRef(this));
         this._android.setFormatter(this._formatter);
 
         this._valueChangedListener = this._valueChangedListener || new ValueChangeListener(new WeakRef(this));
         this._android.setOnValueChangedListener(this._valueChangedListener);
 
-        //Fix the disappearing selected item.
-        //HACK: http://stackoverflow.com/questions/17708325/android-numberpicker-with-formatter-does-not-format-on-first-rendering/26797732
-        this._editText.setFilters([]);
-
-        //Since the Android NumberPicker has to always have at least one item, i.e. minValue=maxValue=value=0, we don't want this zero showing up when this.items is empty.
-        this._editText.setText(" ", android.widget.TextView.BufferType.NORMAL);
+        if (editText) {
+            //Fix the disappearing selected item.
+            //HACK: http://stackoverflow.com/questions/17708325/android-numberpicker-with-formatter-does-not-format-on-first-rendering/26797732
+            editText.setFilters([]);
 
+            //Since the Android NumberPicker has to always have at least one item, i.e. minValue=maxValue=value=0, we don't want this zero showing up when this.items is empty.
+            editText.setText(" ", android.widget.TextView.BufferType.NORMAL);
+        }
+        
         this._android.setWrapSelectorWheel(false);
     }
 
-    private updateSelectedValue(): void {
-        let selectedIndex = this.selectedIndex;
-        this.android.setValue(selectedIndex);
-    }
-
-    private onItemsPropertyChanged(items: any[] | ItemsSource) {
-        let maxValue = items && items.length > 0 ? items.length - 1 : 0;
-
-        this.android.setMaxValue(maxValue);
-        this.updateSelectedValue();
-
-        this._fixNumberPickerRendering();
-    }
-
     private _fixNumberPickerRendering() {
         //HACK: Force the stubborn NumberPicker to render correctly when we have 0 or 1 items.
         this._android.setFormatter(null);
@@ -122,8 +110,8 @@ export class ListPicker extends ListPickerBase {
         return -1;
     }
     set [selectedIndexProperty.native](value: number) {
-        if (this.itemsSet) {
-            this.updateSelectedValue();
+        if (value >= 0) {
+            this.android.setValue(value);
         }
     }
 
@@ -131,23 +119,15 @@ export class ListPicker extends ListPickerBase {
         return null;
     }
     set [itemsProperty.native](value: any[] | ItemsSource) {
-        this.onItemsPropertyChanged(value);
-        // items are cleared - set selectedIndex to -1
-        if (!value) {
-            this.itemsSet = false;
-            this.selectedIndex = -1;
-        } else if (this.selectedIndex < 0) {
-            // items are set and selectedIndex is set - update maxValue & value.
-            this.selectedIndex = 0;
-            // set this flag later so no native call happens
-            this.itemsSet = true;
-        }
+        let maxValue = value && value.length > 0 ? value.length - 1 : 0;
+        this.android.setMaxValue(maxValue);
+        this._fixNumberPickerRendering();
     }
 
     get [colorProperty.native](): { wheelColor: number, textColor: number } {
         return {
             wheelColor: this._selectorWheelPaint.getColor(),
-            textColor: this._editText.getTextColors().getDefaultColor()
+            textColor: this._editText ? this._editText.getTextColors().getDefaultColor() : -1
         }
     }
 
@@ -162,6 +142,8 @@ export class ListPicker extends ListPickerBase {
         }
 
         this._selectorWheelPaint.setColor(wheelColor);
-        this._editText.setTextColor(color);
+        if (this._editText) {
+            this._editText.setTextColor(color);
+        }
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/list-picker/list-picker.ios.ts b/tns-core-modules/ui/list-picker/list-picker.ios.ts
index 461fcc69c..74b465268 100644
--- a/tns-core-modules/ui/list-picker/list-picker.ios.ts
+++ b/tns-core-modules/ui/list-picker/list-picker.ios.ts
@@ -1,4 +1,4 @@
-import { ListPickerBase, selectedIndexProperty, itemsProperty } from "./list-picker-common";
+import { ListPickerBase, Color, selectedIndexProperty, itemsProperty, backgroundColorProperty, colorProperty } from "./list-picker-common";
 import { ItemsSource } from "ui/list-picker";
 
 export * from "./list-picker-common";
@@ -30,24 +30,12 @@ export class ListPicker extends ListPickerBase {
         return this._ios;
     }
 
-    private updateSelectedValue(): void {
-        let selectedIndex = this.selectedIndex;
-        if (selectedIndex >= 0) {
-            this.ios.selectRowInComponentAnimated(selectedIndex, 0, false);
-        }
-    }
-
-    private onItemsPropertyChanged(items: any[] | ItemsSource) {
-        this.ios.reloadAllComponents();
-        this.updateSelectedValue();
-    }
-
     get [selectedIndexProperty.native](): number {
         return -1;
     }
     set [selectedIndexProperty.native](value: number) {
-        if (this.itemsSet) {
-            this.updateSelectedValue();
+        if (value >= 0) {
+            this.ios.selectRowInComponentAnimated(value, 0, false);
         }
     }
 
@@ -55,17 +43,21 @@ export class ListPicker extends ListPickerBase {
         return null;
     }
     set [itemsProperty.native](value: any[] | ItemsSource) {
-        this.onItemsPropertyChanged(value);
-        // items are cleared - set selectedIndex to -1
-        if (!value) {
-            this.itemsSet = false;
-            this.selectedIndex = -1;
-        } else if (this.selectedIndex < 0) {
-            // items are set and selectedIndex is set - update maxValue & value.
-            this.selectedIndex = 0;
-            // set this flag later so no native call happens
-            this.itemsSet = true;
-        }
+        this.ios.reloadAllComponents();
+    }
+
+    get [backgroundColorProperty.native](): UIColor {
+        return this._ios.backgroundColor;
+    }
+    set [backgroundColorProperty.native](value: UIColor | Color) {
+        this._ios.backgroundColor = value instanceof Color ? value.ios : value;
+    }
+
+    get [colorProperty.native](): UIColor {
+        return this._ios.tintColor;
+    }
+    set [colorProperty.native](value: UIColor | Color) {
+        this._ios.tintColor = value instanceof Color ? value.ios : value;
     }
 }
 
@@ -116,52 +108,4 @@ class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
             owner.nativePropertyChanged(selectedIndexProperty, row);
         }
     }
-}
-
-export class ListPickerStyler implements Styler {
-    // background-color
-    private static setBackgroundColorProperty(view: View, newValue: any) {
-        var picker = <UIPickerView>view._nativeView;
-        picker.backgroundColor = newValue;
-    }
-
-    private static resetBackgroundColorProperty(view: View, nativeValue: any) {
-        var picker = <UIPickerView>view._nativeView;
-        picker.backgroundColor = nativeValue;
-    }
-
-    private static getBackgroundColorProperty(view: View): any {
-        var picker = <UIPickerView>view._nativeView;
-        return picker.backgroundColor;
-    }
-    
-    // color
-    private static setColorProperty(view: View, newValue: any) {
-        var picker = <UIPickerView>view._nativeView;
-        picker.tintColor = newValue;
-    }
-
-    private static resetColorProperty(view: View, nativeValue: any) {
-        var picker = <UIPickerView>view._nativeView;
-        picker.tintColor = nativeValue;
-    }
-
-    private static getColorProperty(view: View): any {
-        var picker = <UIPickerView>view._nativeView;
-        return picker.tintColor;
-    }
-
-    public static registerHandlers() {
-        registerHandler(backgroundColorProperty, new StylePropertyChangedHandler(
-            ListPickerStyler.setBackgroundColorProperty,
-            ListPickerStyler.resetBackgroundColorProperty,
-            ListPickerStyler.getBackgroundColorProperty), "ListPicker");
-
-        registerHandler(colorProperty, new StylePropertyChangedHandler(
-            ListPickerStyler.setColorProperty,
-            ListPickerStyler.resetColorProperty,
-            ListPickerStyler.getColorProperty), "ListPicker");
-    }
-}
-
-ListPickerStyler.registerHandlers();
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/list-view/list-view.android.ts b/tns-core-modules/ui/list-view/list-view.android.ts
index 697195307..5a920d30a 100644
--- a/tns-core-modules/ui/list-view/list-view.android.ts
+++ b/tns-core-modules/ui/list-view/list-view.android.ts
@@ -131,17 +131,21 @@ export class ListView extends ListViewBase {
         this._realizedTemplates.clear();
     }
 
-    get [separatorColor.native](): number {
-        return null;
-    }
-    set [separatorColor.native](value: Color) {
+    get [separatorColor.native](): { dividerHeight: number, divider: android.graphics.drawable.Drawable } {
         let nativeView = this._android;
-        if (value) {
+        return {
+            dividerHeight: nativeView.getDividerHeight(),
+            divider: nativeView.getDivider()
+        };
+    }
+    set [separatorColor.native](value: Color | { dividerHeight: number, divider: android.graphics.drawable.Drawable }) {
+        let nativeView = this._android;
+        if (value instanceof Color) {
             nativeView.setDivider(new android.graphics.drawable.ColorDrawable(value.android));
             nativeView.setDividerHeight(1);
         } else {
-            nativeView.setDivider(null);
-            nativeView.setDividerHeight(0);
+            nativeView.setDivider(value.divider);
+            nativeView.setDividerHeight(value.dividerHeight);
         }
     }
 
@@ -282,27 +286,4 @@ function ensureListViewAdapterClass() {
     }
 
     ListViewAdapterClass = ListViewAdapter;
-}
-
-export class ListViewStyler implements Styler {
-    // separator-color
-    private static setSeparatorColorProperty(view: viewModule.View, newValue: any) {
-        let listView = <android.widget.ListView>view._nativeView;
-        listView.setDivider(new android.graphics.drawable.ColorDrawable(newValue));
-        listView.setDividerHeight(1);
-    }
-
-    private static resetSeparatorColorProperty(view: viewModule.View, nativeValue: any) {
-        let listView = <android.widget.ListView>view._nativeView;
-        listView.setDivider(new android.graphics.drawable.ColorDrawable(nativeValue));
-        listView.setDividerHeight(1);
-    }
-
-    public static registerHandlers() {
-        registerHandler(separatorColorProperty, new StylePropertyChangedHandler(
-            ListViewStyler.setSeparatorColorProperty,
-            ListViewStyler.resetSeparatorColorProperty), "ListView");
-    }
-}
-
-ListViewStyler.registerHandlers();
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts
index fe99754eb..bc7d7a738 100644
--- a/tns-core-modules/ui/page/page-common.ts
+++ b/tns-core-modules/ui/page/page-common.ts
@@ -46,10 +46,10 @@ export class PageBase extends ContentView implements PageDefinition {
         this.style[backgroundColorProperty.cssName] = new Color("white");
     }
 
-    public onLoaded() {
-        this._applyCss();
-        super.onLoaded();
-    }
+    // public onLoaded() {
+    //     this._applyCss();
+    //     super.onLoaded();
+    // }
 
 
     get navigationContext(): any {
diff --git a/tns-core-modules/ui/page/page.android.ts b/tns-core-modules/ui/page/page.android.ts
index 147aac84b..4bb240497 100644
--- a/tns-core-modules/ui/page/page.android.ts
+++ b/tns-core-modules/ui/page/page.android.ts
@@ -3,6 +3,8 @@ import { ActionBar } from "ui/action-bar";
 import { GridLayout } from "ui/layouts/grid-layout";
 import { DIALOG_FRAGMENT_TAG } from "./constants";
 import { device } from "platform";
+import { applyNativeSetters } from "ui/core/properties";
+
 import * as trace from "trace";
 
 export * from "./page-common";
@@ -14,7 +16,7 @@ const STATUS_BAR_DARK_BCKG = 1711276032;
 interface DialogFragmentClass {
     new (owner: Page, fullscreen: boolean, shownCallback: () => void, dismissCallback: () => void): android.app.DialogFragment;
 }
-var DialogFragmentClass: DialogFragmentClass;
+let DialogFragmentClass: DialogFragmentClass;
 
 function ensureDialogFragmentClass() {
     if (DialogFragmentClass) {
@@ -32,7 +34,7 @@ function ensureDialogFragmentClass() {
         }
 
         public onCreateDialog(savedInstanceState: android.os.Bundle): android.app.Dialog {
-            var dialog = new android.app.Dialog(this._owner._context);
+            const dialog = new android.app.Dialog(this._owner._context);
             dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE);
 
             // Hide actionBar and adjust alignment based on _fullscreen value.
@@ -42,7 +44,7 @@ function ensureDialogFragmentClass() {
 
             dialog.setContentView(this._owner._nativeView, this._owner._nativeView.getLayoutParams());
 
-            var window = dialog.getWindow();
+            const window = dialog.getWindow();
             window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.TRANSPARENT));
 
             if (this._fullscreen) {
@@ -124,7 +126,7 @@ export class Page extends PageBase {
     }
 
     public _onDetached(force?: boolean) {
-        var skipDetached = !force && this.frame.android.cachePagesOnNavigate && !this._isBackNavigation;
+        const skipDetached = !force && this.frame.android.cachePagesOnNavigate && !this._isBackNavigation;
 
         if (skipDetached) {
             // Do not detach the context and android reference.
@@ -153,7 +155,7 @@ export class Page extends PageBase {
 
         this._onAttached(parent._context);
         this._isAddedToNativeVisualTree = true;
-        this._syncNativeProperties();
+        applyNativeSetters(this);
 
         ensureDialogFragmentClass();
 
diff --git a/tns-core-modules/ui/page/page.d.ts b/tns-core-modules/ui/page/page.d.ts
index d9d594fb5..e9f0b7033 100644
--- a/tns-core-modules/ui/page/page.d.ts
+++ b/tns-core-modules/ui/page/page.d.ts
@@ -11,6 +11,8 @@ declare module "ui/page" {
     import styleScope = require("ui/styling/style-scope");
     //@endprivate
 
+    export * from "ui/content-view";
+    
     /**
      * Defines the data for the page navigation events.
      */
@@ -275,4 +277,4 @@ declare module "ui/page" {
      * Property backing androidStatusBarBackground.
      */
     export const androidStatusBarBackgroundProperty: Property<Page, Color>;
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
index c906139cb..ce908a937 100644
--- a/tns-core-modules/ui/page/page.ios.ts
+++ b/tns-core-modules/ui/page/page.ios.ts
@@ -575,4 +575,4 @@ export class Page extends PageBase {
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/progress/progress-common.ts b/tns-core-modules/ui/progress/progress-common.ts
index 494ff6e22..4317bce67 100644
--- a/tns-core-modules/ui/progress/progress-common.ts
+++ b/tns-core-modules/ui/progress/progress-common.ts
@@ -1,17 +1,9 @@
 import { Progress as ProgressDefinition } from "ui/progress";
-import { View, Property } from "ui/core/view";
+import { View, Property, CoercibleProperty } from "ui/core/view";
 
 export * from "ui/core/view";
 
 export class ProgressBase extends View implements ProgressDefinition {
-    constructor() {
-        super();
-
-        // This calls make both platforms have default values from 0 to 100.
-        this.maxValue = 100;
-        this.value = 0;
-    }
-
     public value: number;
     public maxValue: number;
     // get maxValue(): number {
@@ -38,11 +30,11 @@ export class ProgressBase extends View implements ProgressDefinition {
 /**
  * Represents the observable property backing the value property of each Progress instance.
  */
-export const valueProperty = new Property<ProgressBase, number>({ name: "value", defaultValue: 0 });
+export const valueProperty = new CoercibleProperty<ProgressBase, number>({ name: "value", defaultValue: 0, coerceValue: (t, v) => v < 0 ? 0 : Math.min(v, t.maxValue) });
 valueProperty.register(ProgressBase);
 
 /**
  * Represents the observable property backing the maxValue property of each Progress instance.
  */
-export const maxValueProperty = new Property<ProgressBase, number>({ name: "maxValue", defaultValue: 100 });
+export const maxValueProperty = new Property<ProgressBase, number>({ name: "maxValue", defaultValue: 100, valueChanged: (target, oldValue, newValue) => valueProperty.coerce(target) });
 maxValueProperty.register(ProgressBase);
\ No newline at end of file
diff --git a/tns-core-modules/ui/progress/progress.android.ts b/tns-core-modules/ui/progress/progress.android.ts
index 6739c6875..5600fa668 100644
--- a/tns-core-modules/ui/progress/progress.android.ts
+++ b/tns-core-modules/ui/progress/progress.android.ts
@@ -1,5 +1,7 @@
-import { ProgressBase, valueProperty, maxValueProperty } from "./progress-common";
-import { View, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty } from "ui/core/view";
+import {
+    View, Color, ProgressBase, valueProperty, maxValueProperty,
+    colorProperty, backgroundColorProperty, backgroundInternalProperty
+} from "./progress-common";
 
 export * from "./progress-common";
 
diff --git a/tns-core-modules/ui/progress/progress.ios.ts b/tns-core-modules/ui/progress/progress.ios.ts
index f7bf2ca1f..cfdfa114c 100644
--- a/tns-core-modules/ui/progress/progress.ios.ts
+++ b/tns-core-modules/ui/progress/progress.ios.ts
@@ -1,16 +1,12 @@
-import { ProgressBase, valueProperty, maxValueProperty } from "./progress-common";
-import { View, Color, colorProperty, backgroundColorProperty, backgroundInternalProperty } from "ui/core/view";
+import {
+    ProgressBase, View, Color, valueProperty, maxValueProperty,
+    colorProperty, backgroundColorProperty, backgroundInternalProperty
+} from "./progress-common";
 
 export * from "./progress-common";
 
 export class Progress extends ProgressBase {
-    private _ios: UIProgressView;
-
-    constructor() {
-        super();
-
-        this._ios = UIProgressView.new();
-    }
+    private _ios = UIProgressView.new();
 
     get ios(): UIProgressView {
         return this._ios;
@@ -51,11 +47,11 @@ export class Progress extends ProgressBase {
             this._ios.trackTintColor = value;
         }
     }
-    
+
     get [backgroundInternalProperty.native](): UIColor {
         return null;
     }
     set [backgroundInternalProperty.native](value: Color) {
-       //
+        //
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts b/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts
index a2efe0465..b863d265d 100644
--- a/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts
+++ b/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts
@@ -1,7 +1,7 @@
 import types = require("utils/types");
 import { ProxyViewContainer as ProxyViewContainerDefinition } from "ui/proxy-view-container";
-import { enabled as traceEnabled, write as traceWrite, categories as traceCategories } from "trace";
 import { LayoutBase, View } from "ui/layouts/layout-base";
+import { enabled as traceEnabled, write as traceWrite, categories as traceCategories } from "trace";
 /**
  * Proxy view container that adds all its native children directly to the parent. 
  * To be used as a logical grouping container of views.
@@ -50,7 +50,7 @@ export class ProxyViewContainer extends LayoutBase implements ProxyViewContainer
 
     public _eachLayoutView(callback: (View) => void): void {
         this._eachChildView((cv) => {
-            if (cv._isVisible) {
+            if (!cv.isCollapsed) {
                 cv._eachLayoutView(callback);
             }
             return true;
diff --git a/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts b/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts
index e7618ae63..917805ea7 100644
--- a/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts
+++ b/tns-core-modules/ui/segmented-bar/segmented-bar-common.ts
@@ -1,7 +1,7 @@
-import { SegmentedBar as SegmentedBarDefinition, SegmentedBarItem as SegmentedBarItemDefinition } from "ui/segmented-bar";
+import { SegmentedBar as SegmentedBarDefinition, SegmentedBarItem as SegmentedBarItemDefinition, SelectedIndexChangedEventData } from "ui/segmented-bar";
 import {
-    View, AddChildFromBuilder, AddArrayFromBuilder,
-    Property, EventData, Color, Bindable
+    ViewBase, View, AddChildFromBuilder, AddArrayFromBuilder,
+    Property, CoercibleProperty, EventData, Color
 } from "ui/core/view";
 
 export * from "ui/core/view";
@@ -10,9 +10,7 @@ export module knownCollections {
     export var items = "items";
 }
 
-var CHILD_SEGMENTED_BAR_ITEM = "SegmentedBarItem";
-
-export abstract class SegmentedBarItemBase extends Bindable implements SegmentedBarItemDefinition {
+export abstract class SegmentedBarItemBase extends ViewBase implements SegmentedBarItemDefinition {
     private _title: string = "";
     public _parent: SegmentedBarBase;
 
@@ -32,11 +30,9 @@ export abstract class SegmentedBarItemBase extends Bindable implements Segmented
 export abstract class SegmentedBarBase extends View implements SegmentedBarDefinition, AddChildFromBuilder, AddArrayFromBuilder {
     public static selectedIndexChangedEvent = "selectedIndexChanged";
 
-    protected previousSelectedIndex: number;
-
     public selectedIndex: number;
-    public items: Array<SegmentedBarItemDefinition>;
     public selectedBackgroundColor: Color;
+    public items: Array<SegmentedBarItemDefinition>;
 
     public _addArrayFromBuilder(name: string, value: Array<any>): void {
         if (name === "items") {
@@ -45,7 +41,7 @@ export abstract class SegmentedBarBase extends View implements SegmentedBarDefin
     }
 
     public _addChildFromBuilder(name: string, value: any): void {
-        if (name === CHILD_SEGMENTED_BAR_ITEM) {
+        if (name === "SegmentedBarItem") {
             if (!this.items) {
                 this.items = new Array<SegmentedBarItemBase>();
             }
@@ -53,58 +49,52 @@ export abstract class SegmentedBarBase extends View implements SegmentedBarDefin
         }
     }
 
-    public _adjustSelectedIndex(items: Array<SegmentedBarItemDefinition>) {
-        if (this.items) {
-            if (this.items.length > 0) {
-                if (this.selectedIndex === undefined || (this.selectedIndex > this.items.length - 1)) {
-                    this.selectedIndex = 0;
-                }
-            } else {
-                this.selectedIndex = undefined;
-            }
-        } else {
-            this.selectedIndex = undefined;
-        }
-    }
+    // public _onBindingContextChanged(oldValue: any, newValue: any) {
+    //     super._onBindingContextChanged(oldValue, newValue);
+    //     if (this.items && this.items.length > 0) {
+    //         var i = 0;
+    //         var length = this.items.length;
+    //         for (; i < length; i++) {
+    //             this.items[i].bindingContext = newValue;
+    //         }
+    //     }
+    // }
 
-    public _onBindingContextChanged(oldValue: any, newValue: any) {
-        super._onBindingContextChanged(oldValue, newValue);
-        if (this.items && this.items.length > 0) {
-            var i = 0;
-            var length = this.items.length;
-            for (; i < length; i++) {
-                this.items[i].bindingContext = newValue;
+    public onItemsChanged(oldItems: SegmentedBarItemDefinition[], newItems: SegmentedBarItemDefinition[]): void {
+        if (oldItems) {
+            for (let i = 0, count = oldItems.length; i < count; i++) {
+                this._removeView(oldItems[i]);
             }
         }
-    }
 
-    public abstract insertTab(tabItem: SegmentedBarItemBase, index?: number): void;
-
-    public getValidIndex(index?: number): number {
-        let idx: number;
-        let itemsLength = this.items ? this.items.length : 0;
-        if (index === null || index === undefined) {
-            idx = itemsLength - 1;
-        } else {
-            if (index < 0 || index > itemsLength) {
-                idx = itemsLength - 1;
-            } else {
-                idx = index;
+        if (newItems) {
+            for (let i = 0, count = newItems.length; i < count; i++) {
+                this._addView(newItems[i]);
             }
         }
-        return idx;
-    }
-
-    public onSelectedIndexChanged(oldValue: number, newValue: number): void {
-        this.previousSelectedIndex = oldValue;
     }
 }
 
 /**
  * Gets or sets the selected index dependency property of the SegmentedBar.
  */
-export const selectedIndexProperty = new Property<SegmentedBarBase, number>({
-    name: "selectedIndex", defaultValue: -1, valueConverter: (v) => parseInt(v), valueChanged: (target, oldValue, newValue) => target.onSelectedIndexChanged(oldValue, newValue)
+export const selectedIndexProperty = new CoercibleProperty<SegmentedBarBase, number>({
+    name: "selectedIndex", defaultValue: -1, valueConverter: (v) => parseInt(v), valueChanged: (target, oldValue, newValue) => {
+        target.notify(<SelectedIndexChangedEventData>{ eventName: SegmentedBarBase.selectedIndexChangedEvent, object: target, oldIndex: oldValue, newIndex: newValue });
+    },
+    coerceValue: (target, value) => {
+        let items = target.items;
+        if (items) {
+            let max = items.length - 1;
+            if (value > max) {
+                value = max;
+            }
+        } else {
+            value = -1;
+        }
+
+        return value;
+    }
 });
 selectedIndexProperty.register(SegmentedBarBase);
 
@@ -117,5 +107,10 @@ selectedBackgroundColorProperty.register(SegmentedBarBase);
 /**
  * Gets or sets the items dependency property of the SegmentedBar.
  */
-export const itemsProperty = new Property<SegmentedBarBase, SegmentedBarItemDefinition[]>({ name: "items" });
+export const itemsProperty = new Property<SegmentedBarBase, SegmentedBarItemDefinition[]>({
+    name: "items", valueChanged: (target, oldValue, newValue) => {
+        target.onItemsChanged(oldValue, newValue);
+        selectedIndexProperty.coerce(target);
+    }
+});
 itemsProperty.register(SegmentedBarBase);
diff --git a/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts b/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts
index bc664e52f..10f3b4f6f 100644
--- a/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts
+++ b/tns-core-modules/ui/segmented-bar/segmented-bar.android.ts
@@ -1,6 +1,6 @@
 import {
     SegmentedBarItemBase, SegmentedBarBase, selectedIndexProperty, itemsProperty, selectedBackgroundColorProperty,
-    colorProperty, fontInternalProperty, Color, Font
+    colorProperty, fontInternalProperty, Color, Font, applyNativeSetters
 } from "./segmented-bar-common";
 
 export * from "./segmented-bar-common";
@@ -15,6 +15,7 @@ const R_ATTR_STATE_SELECTED = 0x010100a1;
 // TODO: Use addView instead of _parent property. This way
 // bindingContext and style propagation will work out fo the box. 
 
+let apiLevel: number;
 // TODO: Move this into widgets.
 let SegmentedBarColorDrawableClass;
 function ensureSegmentedBarColorDrawableClass() {
@@ -22,6 +23,8 @@ function ensureSegmentedBarColorDrawableClass() {
         return;
     }
 
+    apiLevel = android.os.Build.VERSION.SDK_INT;
+
     class SegmentedBarColorDrawable extends android.graphics.drawable.ColorDrawable {
         constructor(arg: any) {
             super(arg);
@@ -40,15 +43,95 @@ function ensureSegmentedBarColorDrawableClass() {
     SegmentedBarColorDrawableClass = SegmentedBarColorDrawable;
 }
 
+function setBackground(view: android.view.View, background: android.graphics.drawable.Drawable): void {
+    if (apiLevel >= 16) {
+        view.setBackground(background);
+    } else {
+        view.setBackgroundDrawable(background);
+    }
+}
+
 export class SegmentedBarItem extends SegmentedBarItemBase {
-    public _update() {
-        if (this._parent && this._parent.android) {
-            // TabHost.TabSpec.setIndicator DOES NOT WORK once the title has been set.
-            // http://stackoverflow.com/questions/2935781/modify-tab-indicator-dynamically-in-android
-            const tabIndex = this._parent.items.indexOf(this);
-            const titleTextViewId = 16908310; // http://developer.android.com/reference/android/R.id.html#title
-            const titleTextView = <android.widget.TextView>this._parent.android.getTabWidget().getChildAt(tabIndex).findViewById(titleTextViewId);
-            titleTextView.setText(this.title || "");
+    private _nativeView: android.widget.TextView;
+
+    public setNativeView(textView: android.widget.TextView): void {
+        this._nativeView = textView;
+        applyNativeSetters(this);
+        if (this.titleDirty) {
+            this._update();
+        }
+    }
+
+    private titleDirty: boolean;
+    public _update(): void {
+        // if (this._parent && this._parent.android) {
+        //     // TabHost.TabSpec.setIndicator DOES NOT WORK once the title has been set.
+        //     // http://stackoverflow.com/questions/2935781/modify-tab-indicator-dynamically-in-android
+        //     const tabIndex = this._parent.items.indexOf(this);
+        //     const titleTextViewId = 16908310; // http://developer.android.com/reference/android/R.id.html#title
+        //     const titleTextView = <android.widget.TextView>this._parent.android.getTabWidget().getChildAt(tabIndex).findViewById(titleTextViewId);
+        //     titleTextView.setText(this.title || "");
+        // }
+
+        let tv = this._nativeView;
+        if (tv) {
+            tv.setText(this.title || "");
+            this.titleDirty = false;
+        } else {
+            this.titleDirty = true;
+        }
+    }
+
+    get [colorProperty.native](): number {
+        return this._nativeView.getCurrentTextColor();
+    }
+    set [colorProperty.native](value: Color | number) {
+        let color = typeof value === "Color" ? value.android : value;
+        this._nativeView.setTextColor(color);
+    }
+
+    get [fontInternalProperty.native](): { typeface: android.graphics.Typeface, fontSize: number } {
+        let textView = this._nativeView;
+        return {
+            typeface: textView.getTypeface(),
+            fontSize: textView.getTextSize()
+        };
+    }
+    set [fontInternalProperty.native](value: Font | { typeface: android.graphics.Typeface, fontSize: number }) {
+        let tv = this._nativeView;
+        if (value instanceof Font) {
+            tv.setTypeface(value.getAndroidTypeface());
+            tv.setTextSize(value.fontSize);
+        } else {
+            tv.setTypeface(value.typeface);
+            tv.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.fontSize);
+        }
+    }
+
+    get [selectedBackgroundColorProperty.native](): android.graphics.drawable.Drawable {
+        let viewGroup = <android.view.ViewGroup>this._nativeView.getParent();
+        return viewGroup.getBackground();
+    }
+    set [selectedBackgroundColorProperty.native](value: Color | android.graphics.drawable.Drawable) {
+        let viewGroup = <android.view.ViewGroup>this._nativeView.getParent();
+        if (value instanceof Color) {
+            let color = value.android;
+            let backgroundDrawable = viewGroup.getBackground();
+            if (apiLevel > 21 && backgroundDrawable && typeof backgroundDrawable.setColorFilter === "function") {
+                backgroundDrawable.setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_IN);
+            } else {
+                let stateDrawable = new android.graphics.drawable.StateListDrawable();
+
+                let arr = Array.create("int", 1);
+                arr[0] = R_ATTR_STATE_SELECTED;
+                let colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(color);
+                stateDrawable.addState(arr, colorDrawable);
+                stateDrawable.setBounds(0, 15, viewGroup.getRight(), viewGroup.getBottom());
+
+                setBackground(viewGroup, stateDrawable);
+            }
+        } else {
+            setBackground(viewGroup, value);
         }
     }
 }
@@ -77,8 +160,15 @@ class TabContentFactory implements android.widget.TabHost.TabContentFactory {
         let owner = this.owner.get();
         if (owner) {
             let tv = new android.widget.TextView(owner._context);
-            // TODO: Why do we set it to collapse???
+            let index = parseInt(tag);
+            // This is collapsed by default and made visibile 
+            // by android when TabItem becomes visible/selected.
+            // TODO: Try commenting visigility change.
             tv.setVisibility(android.view.View.GONE);
+            tv.setMaxLines(1);
+            tv.setEllipsize(android.text.TextUtils.TruncateAt.END);
+
+            (<SegmentedBarItem>owner.items[index]).setNativeView(tv);
             return tv;
         } else {
             throw new Error(`Invalid owner: ${this.owner}`);
@@ -95,9 +185,6 @@ export class SegmentedBar extends SegmentedBarBase {
     public _createUI() {
         ensureTabHostClass();
         ensureSegmentedBarColorDrawableClass();
-        if (this.apiLevel === undefined) {
-            this.apiLevel = android.os.Build.VERSION.SDK_INT;
-        }
 
         let weakRef = new WeakRef(this);
         this._android = new TabHostClass(this._context, null);
@@ -128,14 +215,14 @@ export class SegmentedBar extends SegmentedBarBase {
         return this._android;
     }
 
-    public insertTab(tabItem: SegmentedBarItem, index?: number): void {
-        tabItem._parent = this;
-
-        const tab = this.android.newTabSpec(this.getValidIndex(index) + "");
+    public insertTab(tabItem: SegmentedBarItem, index: number): void {
+        const tab = this.android.newTabSpec(index + "");
         tab.setIndicator(tabItem.title);
         tab.setContent(this.tabContentFactory);
 
-        this.android.addTab(tab);
+        let tabHost = this.android;
+        tabHost.addTab(tab);
+
         // TODO: Why do we need to call this for every added tab?
         this.resetNativeListener();
     }
@@ -149,155 +236,24 @@ export class SegmentedBar extends SegmentedBarBase {
         return -1;
     }
     set [selectedIndexProperty.native](value: number) {
-        let items = this.items;
-        if (!items) {
-            return;
-        }
-
-        if (value >= 0 && value <= (items.length - 1)) {
-            this._android.setCurrentTab(value);
-            this.notify({ eventName: SegmentedBar.selectedIndexChangedEvent, object: this, oldIndex: this.previousSelectedIndex, newIndex: value });
-        }
+        this._android.setCurrentTab(value);
     }
 
-    private previousItems: SegmentedBarItem[];
     get [itemsProperty.native](): SegmentedBarItem[] {
         return null;
     }
     set [itemsProperty.native](value: SegmentedBarItem[]) {
-        const oldItems = this.previousItems;
-        if (oldItems) {
-            for (let i = 0, length = oldItems.length; i < length; i++) {
-                oldItems[i]._parent = null;
-            }
-        }
-
         this._android.clearAllTabs();
 
         const newItems = value;
-        this._adjustSelectedIndex(newItems);
-
         let tabHost = this._android;
         if (newItems && newItems.length) {
             for (let i = 0; i < newItems.length; i++) {
                 this.insertTab(newItems[i], i);
             }
 
-            if (this.selectedIndex !== undefined && tabHost.getCurrentTab() !== this.selectedIndex) {
-                tabHost.setCurrentTab(this.selectedIndex);
-            }
-
-            let color = this.color ? this.color.android : -1;
-            for (let i = 0, count = tabHost.getTabWidget().getTabCount(); i < count; i++) {
-                let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(i);
-                let t = <android.widget.TextView>vg.getChildAt(1);
-                if (color > -1) {
-                    t.setTextColor(color);
-                }
-
-                t.setMaxLines(1);
-                t.setEllipsize(android.text.TextUtils.TruncateAt.END);
-            }
-        }
-    }
-
-    get [selectedBackgroundColorProperty.native](): android.graphics.drawable.Drawable[] {
-        let tabHost = this._android;
-        let result = [];
-        for (let i = 0, count = tabHost.getTabWidget().getTabCount(); i < count; i++) {
-            let background = tabHost.getTabWidget().getChildTabViewAt(i).getBackground();
-            result.push(background);
-        }
-
-        return result;
-    }
-    set [selectedBackgroundColorProperty.native](value: Color | android.graphics.drawable.Drawable[]) {
-        let setValue: boolean;
-        let color: number;
-        if (value instanceof Color) {
-            setValue = true;
-            color = value.android;
-        }
-
-        let tabHost = this._android;
-        let apiLevel = this.apiLevel;
-        for (let i = 0, count = tabHost.getTabWidget().getTabCount(); i < count; i++) {
-            let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(i);
-            if (setValue) {
-                let backgroundDrawable = vg.getBackground();
-                if (apiLevel > 21 && backgroundDrawable && typeof backgroundDrawable.setColorFilter === "function") {
-                    backgroundDrawable.setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_IN);
-                } else {
-                    let stateDrawable = new android.graphics.drawable.StateListDrawable();
-
-                    let arr = Array.create("int", 1);
-                    arr[0] = R_ATTR_STATE_SELECTED;
-                    let colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(color);
-                    stateDrawable.addState(arr, colorDrawable);
-                    stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom());
-
-                    if (android.os.Build.VERSION.SDK_INT >= 16) {
-                        vg.setBackground(stateDrawable);
-                    } else {
-                        vg.setBackgroundDrawable(stateDrawable);
-                    }
-                }
-            } else {
-                if (apiLevel >= 16) {
-                    vg.setBackground(value[i]);
-                } else {
-                    vg.setBackgroundDrawable(value[i]);
-                }
-            }
-        }
-    }
-
-    get [colorProperty.native](): number {
-        let textView = new android.widget.TextView(this._context);
-        return textView.getCurrentTextColor();
-    }
-    set [colorProperty.native](value: Color | number) {
-        let tabHost = this._android;
-        let color = typeof value === "number" ? value : value.android;
-        for (let i = 0, count = tabHost.getTabWidget().getTabCount(); i < count; i++) {
-            let tab = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(i);
-            let t = <android.widget.TextView>tab.getChildAt(1);
-            t.setTextColor(color);
-        }
-    }
-
-    get [fontInternalProperty.native](): { typeface: android.graphics.Typeface, fontSize: number } {
-        let textView = new android.widget.TextView(this._context);
-        return {
-            typeface: textView.getTypeface(),
-            fontSize: textView.getTextSize()
-        };
-    }
-    set [fontInternalProperty.native](value: Font | { typeface: android.graphics.Typeface, fontSize: number }) {
-        let typeface: android.graphics.Typeface;
-        let fontSize: number;
-        let isFont: boolean;
-        if (value instanceof Font) {
-            isFont = true;
-            typeface = value.getAndroidTypeface();
-            fontSize = value.fontSize;
-        } else {
-            typeface = value.typeface;
-            fontSize = value.fontSize;
-        }
-
-        let tabHost = this._android;
-        for (let i = 0, count = tabHost.getTabWidget().getTabCount(); i < count; i++) {
-            let tab = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(i);
-            let t = <android.widget.TextView>tab.getChildAt(1);
-
-            t.setTypeface(typeface);
-
-            if (isFont) {
-                t.setTextSize(fontSize);
-            }
-            else {
-                t.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, fontSize);
+            if (this.selectedIndex < 0) {
+                this.selectedIndex = tabHost.getCurrentTab();
             }
         }
     }
@@ -322,4 +278,4 @@ function ensureTabHostClass() {
     }
 
     TabHostClass = OurTabHost;
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/segmented-bar/segmented-bar.d.ts b/tns-core-modules/ui/segmented-bar/segmented-bar.d.ts
index 28460ffff..28affbcc7 100644
--- a/tns-core-modules/ui/segmented-bar/segmented-bar.d.ts
+++ b/tns-core-modules/ui/segmented-bar/segmented-bar.d.ts
@@ -3,14 +3,14 @@
  */
 declare module "ui/segmented-bar" {
     import {
-        View, AddChildFromBuilder, AddArrayFromBuilder,
-        Property, EventData, Color, Bindable
+        ViewBase, View, AddChildFromBuilder, AddArrayFromBuilder,
+        Property, CoercibleProperty, EventData, Color
     } from "ui/core/view";
 
     /**
      * Represents a SegmentedBar item.
      */
-    class SegmentedBarItem extends Bindable {
+    class SegmentedBarItem extends ViewBase {
         /**
          * Gets or sets the title of the SegmentedBarItem.
          */
@@ -76,15 +76,12 @@ declare module "ui/segmented-bar" {
          */
         public _addChildFromBuilder(name: string, value: any): void;
         public _addArrayFromBuilder(name: string, value: Array<any>): void;
-        public insertTab(tabItem: SegmentedBarItem, index?: number): void;
-
-        public getValidIndex(index?: number): number;
     }
 
     /**
      * Gets or sets the selected index dependency property of the SegmentedBar.
      */
-    export const selectedIndexProperty: Property<SegmentedBar, number>;
+    export const selectedIndexProperty: CoercibleProperty<SegmentedBar, number>;
 
     /**
      * Gets or sets the selected background color property of the SegmentedBar.
diff --git a/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts b/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts
index 116d14477..33b80b306 100644
--- a/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts
+++ b/tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts
@@ -32,9 +32,9 @@ export class SegmentedBar extends SegmentedBarBase {
         return this._ios;
     }
 
-    public insertTab(tabItem: SegmentedBarItem, index?: number): void {
+    public insertTab(tabItem: SegmentedBarItem, index: number): void {
         tabItem._parent = this;
-        this.ios.insertSegmentWithTitleAtIndexAnimated(tabItem.title, this.getValidIndex(index), false);
+        this.ios.insertSegmentWithTitleAtIndexAnimated(tabItem.title, index, false);
     }
 
     get [selectedIndexProperty.native](): number {
diff --git a/tns-core-modules/ui/styling/background.android.ts b/tns-core-modules/ui/styling/background.android.ts
index df21d7f1c..1373b5f8c 100644
--- a/tns-core-modules/ui/styling/background.android.ts
+++ b/tns-core-modules/ui/styling/background.android.ts
@@ -1,11 +1,11 @@
 import { View } from "./background-common";
 import { isNullOrUndefined, isFunction, getClass } from "utils/types";
 import { CacheLayerType } from "utils/utils";
-import { Button } from "ui/button";
 import cssValue = require("css-value");
 
 export * from "./background-common"
 
+// TODO: Change this implementation to use 
 // We are using "ad" here to avoid namespace collision with the global android object
 export module ad {
     let SDK: number;
@@ -40,25 +40,25 @@ export module ad {
         let cache = <CacheLayerType>v._nativeView;
 
         if (isSetColorFilterOnlyWidget(nativeView) 
-        && !types.isNullOrUndefined(backgroundDrawable) 
-        && types.isFunction(backgroundDrawable.setColorFilter) 
+        && !isNullOrUndefined(backgroundDrawable) 
+        && isFunction(backgroundDrawable.setColorFilter) 
         && !background.hasBorderWidth()
         && !background.hasBorderRadius()
         && !background.clipPath 
-        && types.isNullOrUndefined(background.image) 
-        && !types.isNullOrUndefined(background.color)) {
+        && isNullOrUndefined(background.image) 
+        && !isNullOrUndefined(background.color)) {
             let backgroundColor = (<any>backgroundDrawable).backgroundColor = background.color.android;
             backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
             (<any>backgroundDrawable).backgroundColor = backgroundColor;
         }
         else if (!background.isEmpty()) {
             if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
-                let viewClass = types.getClass(v);
+                let viewClass = getClass(v);
                 if (!isSetColorFilterOnlyWidget(nativeView) && !_defaultBackgrounds.has(viewClass)) {
                     _defaultBackgrounds.set(viewClass, nativeView.getBackground());
                 }
                 
-                backgroundDrawable = new org.nativescript.widgets.BorderDrawable(1, v.toString());
+                backgroundDrawable = new org.nativescript.widgets.BorderDrawable(v.toString());
                 refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
 
                 if (getSDK() >= 16) {
@@ -80,7 +80,7 @@ export module ad {
         }
         else {
             // reset the value with the default native value
-            if (v instanceof Button) {
+            if (nativeView instanceof android.widget.Button) {
                 let nativeButton = new android.widget.Button(nativeView.getContext());
 
                 if (getSDK() >= 16) {
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index 99b2bcc7e..ced7cd347 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -40,11 +40,6 @@ export module ios {
             (<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
         }
 
-        let background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
-        if (!background || background.isEmpty()) {
-            return undefined;
-        }
-
         // Clip-path
         if (background.clipPath) {
             drawClipPath(nativeView, background);
@@ -297,8 +292,8 @@ function drawClipPath(nativeView: UIView, background: Background) {
         }
 
         let top = cssValueToDevicePixels(topString, bounds.bottom);
-        let right = cssValueToDevicePixels("100%", bounds.right) - common.cssValueToDevicePixels(rightString, bounds.right);
-        let bottom = cssValueToDevicePixels("100%", bounds.bottom) - common.cssValueToDevicePixels(bottomString, bounds.bottom);
+        let right = cssValueToDevicePixels("100%", bounds.right) - cssValueToDevicePixels(rightString, bounds.right);
+        let bottom = cssValueToDevicePixels("100%", bounds.bottom) - cssValueToDevicePixels(bottomString, bounds.bottom);
         let left = cssValueToDevicePixels(leftString, bounds.right);
 
         path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
diff --git a/tns-core-modules/ui/styling/font.android.ts b/tns-core-modules/ui/styling/font.android.ts
index ba3242029..2510861e3 100644
--- a/tns-core-modules/ui/styling/font.android.ts
+++ b/tns-core-modules/ui/styling/font.android.ts
@@ -9,12 +9,14 @@ const FONTS_BASE_PATH = "/fonts/";
 const typefaceCache = new Map<string, android.graphics.Typeface>();
 let appAssets: android.content.res.AssetManager;
 
+type fontWeight = "100" | "200" | "300" | "normal" | "400" | "500" | "600" | "bold" | "700" | "800" | "900";
+
 export class Font extends FontBase {
     public static default = new Font(undefined, undefined, "normal", "normal");
 
     private _typeface: android.graphics.Typeface;
 
-    constructor(family: string, size: number, style: "normal" | "italic", weight: "100" | "200" | "300" | "normal" | "400" | "500" | "600" | "bold" | "700" | "800" | "900") {
+    constructor(family: string, size: number, style: "normal" | "italic", weight: fontWeight) {
         super(family, size, style, weight);
     }
 
@@ -26,7 +28,7 @@ export class Font extends FontBase {
         return new Font(this.fontFamily, this.fontSize, style, this.fontWeight);
     }
 
-    public withFontWeight(weight: "100" | "200" | "300" | "normal" | "400" | "500" | "600" | "bold" | "700" | "800" | "900"): Font {
+    public withFontWeight(weight: fontWeight): Font {
         return new Font(this.fontFamily, this.fontSize, this.fontStyle, weight);
     }
 
diff --git a/tns-core-modules/ui/styling/style-scope.d.ts b/tns-core-modules/ui/styling/style-scope.d.ts
index 12a1eb40a..70b962d4f 100644
--- a/tns-core-modules/ui/styling/style-scope.d.ts
+++ b/tns-core-modules/ui/styling/style-scope.d.ts
@@ -1,6 +1,6 @@
 //@private
 declare module "ui/styling/style-scope" {
-    import { View } from "ui/core/view";
+    import { ViewBase } from "ui/core/view-base";
     import { SyntaxTree } from "css";
     import { RuleSet, Node, SelectorCore, ChangeMap } from "ui/styling/css-selector";
     import { KeyframeAnimationInfo } from "ui/animation/keyframe-animation";
@@ -14,7 +14,7 @@ declare module "ui/styling/style-scope" {
         /**
          * Gets the static selectors that match the view and the dynamic selectors that may potentially match the view.
          */
-        public changeMap: ChangeMap<View>;
+        public changeMap: ChangeMap<ViewBase>;
     }
 
     export class StyleScope {
@@ -25,7 +25,7 @@ declare module "ui/styling/style-scope" {
         public static createSelectorsFromImports(tree: SyntaxTree, keyframes: Object): RuleSet[];
         public ensureSelectors(): boolean;
 
-        public applySelectors(view: View): void
+        public applySelectors(view: ViewBase): void
         public query(options: Node): SelectorCore[];
 
         public getKeyframeAnimationWithName(animationName: string): KeyframeAnimationInfo;
@@ -33,5 +33,5 @@ declare module "ui/styling/style-scope" {
     }
 
     export function resolveFileNameFromUrl(url: string, appDirectory: string, fileExists: (string) => boolean): string;
-    export function applyInlineSyle(view: View, style: string): void;
-}
+    export function applyInlineSyle(view: ViewBase, style: string): void;
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
index d91317fea..f26cbe349 100644
--- a/tns-core-modules/ui/styling/style-scope.ts
+++ b/tns-core-modules/ui/styling/style-scope.ts
@@ -1,4 +1,4 @@
-import { View } from "ui/core/view";
+import { ViewBase } from "ui/core/view-base";
 import { SyntaxTree, Keyframes, parse as parseCss, Rule, Declaration, Node } from "css";
 import { RuleSet, SelectorsMap, SelectorCore, SelectorsMatch, ChangeMap, fromAstNodes } from "ui/styling/css-selector";
 import { KeyframeAnimationInfo, KeyframeAnimation } from "ui/animation/keyframe-animation";
@@ -15,10 +15,10 @@ const animationsSymbol: symbol = Symbol("animations");
 let pattern: RegExp = /('|")(.*?)\1/;
 
 export class CssState {
-    constructor(private view: View, private match: SelectorsMatch<View>) {
+    constructor(private view: ViewBase, private match: SelectorsMatch<ViewBase>) {
     }
 
-    public get changeMap(): ChangeMap<View> {
+    public get changeMap(): ChangeMap<ViewBase> {
         return this.match.changeMap;
     }
 
@@ -160,7 +160,7 @@ export class StyleScope {
         return true;
     }
 
-    public applySelectors(view: View): void {
+    public applySelectors(view: ViewBase): void {
         this.ensureSelectors();
 
         let state = this._selectors.query(view);
@@ -229,7 +229,7 @@ export function resolveFileNameFromUrl(url: string, appDirectory: string, fileEx
     return null;
 }
 
-export function applyInlineSyle(view: View, style: string) {
+export function applyInlineSyle(view: ViewBase, style: string) {
     try {
         let syntaxTree = parseCss("local { " + style + " }", undefined);
         let filteredDeclarations = <Declaration[]>(<Rule[]>syntaxTree.stylesheet.rules.filter(isRule))[0].declarations.filter(isDeclaration);
@@ -249,7 +249,7 @@ function isKeyframe(node: Node): node is Keyframes {
     return node.type === "keyframes";
 }
 
-function applyDescriptors(view: View, ruleset: RuleSet): void {
+function applyDescriptors(view: ViewBase, ruleset: RuleSet): void {
     let style = view.style;
     ruleset.declarations.forEach(d => {
         let name = `css-${d.property}`;
@@ -301,7 +301,7 @@ function applyDescriptors(view: View, ruleset: RuleSet): void {
     }
 }
 
-function applyInlineStyle(view: View, declarations: Declaration[]): void {
+function applyInlineStyle(view: ViewBase, declarations: Declaration[]): void {
     let style = view.style;
     declarations.forEach(d => {
         let name = d.property;
diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts
index 5b400186e..b638b9acc 100644
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -133,10 +133,10 @@ export class Style extends Observable implements StyleDefinition {
     //     }
     // }
 
-    // public _resetCssValues() {
-    //     this.view._unregisterAllAnimations();
-    //     this._resetValues(ValueSource.Css);
-    // }
+    public _resetCssValues() {
+        this.view._cancelAllAnimations();
+        this._resetValues(ValueSource.Css);
+    }
 
     // public _resetLocalValues() {
     //     this._resetValues(ValueSource.Local);
@@ -230,11 +230,11 @@ export class Style extends Observable implements StyleDefinition {
     //             shouldReset = (newValue === property.defaultValue);
     //         }
 
-    public _updateTextDecoration() {
-        if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
-            this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
-        }
-    }
+    // public _updateTextDecoration() {
+    //     if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
+    //         this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
+    //     }
+    // }
 
     //         this._view._onStylePropertyChanged(property);
     //     }
diff --git a/tns-core-modules/ui/text-base/text-base.d.ts b/tns-core-modules/ui/text-base/text-base.d.ts
index eba484ecd..14c2a9880 100644
--- a/tns-core-modules/ui/text-base/text-base.d.ts
+++ b/tns-core-modules/ui/text-base/text-base.d.ts
@@ -1,7 +1,10 @@
 declare module "ui/text-base" {
     import { View, AddChildFromBuilder, Property, CssProperty, InheritedCssProperty, Style } from "ui/core/view";
     import { FormattedString, FormattedStringView } from "text/formatted-string";
-    
+
+    export * from "ui/core/view";
+    export { FormattedString, FormattedStringView } from "text/formatted-string";
+
     /**
      * Represents the base class for all text views.
      */
@@ -73,6 +76,4 @@
     export const textTransformProperty: CssProperty<Style, "none" | "capitalize" | "uppercase" | "lowercase">;
     export const whiteSpaceProperty: CssProperty<Style, "normal" | "nowrap">;
     export const letterSpacingProperty: CssProperty<Style, number>;
-
-    export * from "ui/core/view";
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/time-picker/time-picker.android.ts b/tns-core-modules/ui/time-picker/time-picker.android.ts
index 66305cc2d..03a0ff4b1 100644
--- a/tns-core-modules/ui/time-picker/time-picker.android.ts
+++ b/tns-core-modules/ui/time-picker/time-picker.android.ts
@@ -24,7 +24,7 @@ export class TimePicker extends TimePickerBase {
 
     public _createUI() {
         this.nativeView = new android.widget.TimePicker(this._context);
-        this._listener = new TimeChangedListener(new WeakRef(this));
+        this._listener = this._listener || new TimeChangedListener(new WeakRef(this));
         this.nativeView.setOnTimeChangedListener(this._listener);
 
         let c = java.util.Calendar.getInstance();