Trying to fix padding...

apps/app/package.json

@@ -1,4 +1,4 @@
 {
 	"name": "tns-samples-apps",
-	"main": "cuteness.io/app.js"
+	"main": "ui-tests-app/app.js"
 }

apps/app/ui-tests-app/css/main-page.ts

@@ -38,7 +38,8 @@ export function pageLoaded(args: EventData) {
     examples.set("all-non-uniform-border", "css/all-non-uniform-border");
     examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
     examples.set("list-picker", "css/list-picker");
-    //examples.set("border-playground", "css/border-playground");
+    examples.set("padding-and-border", "css/padding-and-border");
+    examples.set("border-playground", "css/border-playground");
 
     let viewModel = new SubMainPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

apps/app/ui-tests-app/css/padding-and-border.css

@@ -0,0 +1,19 @@
+#padding {
+    padding: 10;
+}
+
+#border {
+    border-width: 10;
+    border-color: black;
+}
+
+#background-color {
+    background-color: yellow;
+}
+
+/*#background-image {
+    background-image: url('~/ui-tests-app/pages/test2.png'); 
+    background-repeat: no-repeat; 
+    background-position: center center; 
+    background-size: 100% 100%;
+}*/

apps/app/ui-tests-app/css/padding-and-border.ts

@@ -0,0 +1,27 @@
+import { EventData, View, TextBase } from "ui/text-base";
+import { LayoutBase } from "ui/layouts/layout-base";
+
+let cssClassNames = [
+    "", 
+    "padding", 
+    "border", 
+    "background-color",
+    "padding border",
+    "padding background-color",
+    "border background-color",
+    "padding border background-color"
+];
+
+let currentIndex = 0;
+
+export function onChangeCSS(args: EventData){
+    let page = (<View>args.object).page;
+    let container = <LayoutBase>page.getViewById<LayoutBase>("container");
+    currentIndex++;
+    let newClassName = cssClassNames[currentIndex % cssClassNames.length];
+    for(let i = 0, length = container.getChildrenCount(); i < length; i++){
+        let child = container.getChildAt(i);
+        child.className = newClassName;
+    }
+    (<TextBase>page.getViewById<TextBase>("info")).text = newClassName || "none";
+}

apps/app/ui-tests-app/css/padding-and-border.xml

@@ -0,0 +1,15 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" id="padding-and-border-page">
+    <StackLayout>
+        <Button id="changeButton" tap="onChangeCSS"/>
+        <TextView id="info" isEnabled="false" isUserInteractionEnabled="false"/>
+        <StackLayout id="container" style.backgroundColor="gray">
+            <Label id="label" text="Label"/>
+            <TextField id="textField" text="TextField"/>
+            <TextView id="textView" text="TextView"/>
+            <Button id="button" text="Button"/>
+            <StackLayout id="stack-layout">
+                <StackLayout id="child-of-stack-layout" width="50" height="50" style.backgroundColor="red"></StackLayout>
+            </StackLayout>
+        </StackLayout>
+    </StackLayout>
+</Page>

tns-core-modules/ui/core/view.android.ts

@@ -4,7 +4,6 @@ import {
     ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty, minWidthProperty, minHeightProperty,
     widthProperty, heightProperty, marginLeftProperty, marginTopProperty,
     marginRightProperty, marginBottomProperty, horizontalAlignmentProperty, verticalAlignmentProperty,
-    paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty,
     rotateProperty, scaleXProperty, scaleYProperty,
     translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
     Background, GestureTypes, GestureEventData, applyNativeSetters, Property,
@@ -584,30 +583,6 @@ createNativePercentLengthProperty({
     setPercent: ViewHelper.setMarginLeftPercent
 });
 
-createNativePercentLengthProperty({
-    key: paddingTopProperty.native,
-    getPixels: ViewHelper.getPaddingTop,
-    setPixels: ViewHelper.setPaddingTop
-});
-
-createNativePercentLengthProperty({
-    key: paddingRightProperty.native,
-    getPixels: ViewHelper.getPaddingRight,
-    setPixels: ViewHelper.setPaddingRight
-});
-
-createNativePercentLengthProperty({
-    key: paddingBottomProperty.native,
-    getPixels: ViewHelper.getPaddingBottom,
-    setPixels: ViewHelper.setPaddingBottom
-});
-
-createNativePercentLengthProperty({
-    key: paddingLeftProperty.native,
-    getPixels: ViewHelper.getPaddingLeft,
-    setPixels: ViewHelper.setPaddingLeft
-});
-
 createNativePercentLengthProperty({
     key: widthProperty.native,
     auto: android.view.ViewGroup.LayoutParams.MATCH_PARENT,

tns-core-modules/ui/layouts/layout-base.android.ts

@@ -1,4 +1,7 @@
-import { LayoutBaseCommon, clipToBoundsProperty } from "./layout-base-common";
+import { 
+    LayoutBaseCommon, clipToBoundsProperty,
+    paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, layout
+} from "./layout-base-common";
 
 export * from "./layout-base-common";
 
@@ -21,4 +24,37 @@ export class LayoutBase extends LayoutBaseCommon {
         // http://stackoverflow.com/questions/25044085/when-drawing-outside-the-view-clip-bounds-with-android-how-do-i-prevent-underli
         console.warn(`clipToBounds with value false is not supported on Android. You can use this.android.getParent().setClipChildren(false) as an alternative`);
     }
+
+
+    //PaddingTop
+    get [paddingTopProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
+    }
+    set [paddingTopProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderTopWidth);
+    }
+
+    //PaddingRight
+    get [paddingRightProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
+    }
+    set [paddingRightProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderRightWidth);
+    }
+
+    //PaddingBottom
+    get [paddingBottomProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
+    }
+    set [paddingBottomProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderBottomWidth);
+    }
+
+    //PaddingLeft
+    get [paddingLeftProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
+    }
+    set [paddingLeftProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderLeftWidth);
+    }
 }

tns-core-modules/ui/text-base/text-base.android.ts

@@ -1,7 +1,8 @@
 import {
     TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty,
     textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, whiteSpaceProperty,
-    Font, Color, FormattedString, TextDecoration, TextAlignment, TextTransform, WhiteSpace
+    Font, Color, FormattedString, TextDecoration, TextAlignment, TextTransform, WhiteSpace,
+    paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, layout
 } from "./text-base-common";
 
 export * from "./text-base-common";
@@ -187,6 +188,38 @@ export class TextBase extends TextBaseCommon {
     set [letterSpacingProperty.native](value: number) {
         org.nativescript.widgets.ViewHelper.setLetterspacing(this._nativeView, value);
     }
+
+    //PaddingTop
+    get [paddingTopProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
+    }
+    set [paddingTopProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderTopWidth);
+    }
+
+    //PaddingRight
+    get [paddingRightProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
+    }
+    set [paddingRightProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderRightWidth);
+    }
+
+    //PaddingBottom
+    get [paddingBottomProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
+    }
+    set [paddingBottomProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderBottomWidth);
+    }
+
+    //PaddingLeft
+    get [paddingLeftProperty.native](): Length {
+        return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
+    }
+    set [paddingLeftProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderLeftWidth);
+    }
 }
 
 @Interfaces([android.text.method.TransformationMethod])