feat(android): rippleColor and elevation now support none uniform corner radius

Author: farfromrefug

packages/core/platforms/android/java/com/nativescript/material/core/Utils.java

@@ -60,18 +60,18 @@ public static ColorStateList getFullColorStateList(int activeColor, int inactive
         return new android.content.res.ColorStateList(states, colors);
     }
 
-    public static ShapeDrawable createForegroundShape(float radius) {
+    public static ShapeDrawable createForegroundShape(float topLeftRadius, float topRightRadius, float bottomRightRadius, float bottomLeftRadius) {
         RoundRectShape shape = new RoundRectShape(
-                new float[] { radius, radius, radius, radius, radius, radius, radius, radius }, null, null);
+                new float[] { topLeftRadius, topLeftRadius, topRightRadius, topRightRadius, bottomRightRadius, bottomRightRadius, bottomLeftRadius, bottomLeftRadius }, null, null);
         return new ShapeDrawable(shape);
     }
 
-    public static Drawable createRippleDrawable(int rippleColor, float radius) {
+    public static Drawable createRippleDrawable(int rippleColor, float topLeftRadius, float topRightRadius, float bottomRightRadius, float bottomLeftRadius) {
         if (Build.VERSION.SDK_INT >= 21) {
-            ShapeDrawable rippleShape = radius != 0 ? createForegroundShape(radius) : null;
+            ShapeDrawable rippleShape = createForegroundShape(topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
             return new RippleDrawable(ColorStateList.valueOf(rippleColor), null, rippleShape);
         } else {
-            ShapeDrawable rippleShape = createForegroundShape(radius);
+            ShapeDrawable rippleShape = createForegroundShape(topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
             StateListDrawable rippleDrawable = new StateListDrawable();
             if (rippleShape != null) {
                 rippleShape.getPaint().setColor(rippleColor);

src/core/android/utils.ts

@@ -190,11 +190,11 @@ function createForegroundShape(radius) {
     }
     return NUtils.createForegroundShape(radius);
 }
-export function createRippleDrawable(rippleColor: number, radius = 0) {
+export function createRippleDrawable(rippleColor: number, topLeftRadius = 0, topRightRadius = 0, bottomRightRadius = 0, bottomLeftRadius = 0) {
     if (!NUtils) {
         NUtils = (com as any).nativescript.material.core.Utils;
     }
-    return NUtils.createRippleDrawable(rippleColor, radius);
+    return NUtils.createRippleDrawable(rippleColor, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
 }
 
 export function handleClearFocus(view: android.view.View) {

src/core/index.android.ts

@@ -1,21 +1,9 @@
-import {
-    Application,
-    Background,
-    Button,
-    Color,
-    Length,
-    PercentLength,
-    Utils,
-    View,
-    androidDynamicElevationOffsetProperty,
-    androidElevationProperty,
-    backgroundInternalProperty
-} from '@nativescript/core';
-import { createRippleDrawable, createStateListAnimator, getAttrColor, getColorStateList, handleClearFocus, isPostLollipop, isPostLollipopMR1, isPostMarshmallow } from './android/utils';
-import { CornerFamily, applyMixins } from './index.common';
-import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty } from './cssproperties';
+import { Background, Button, Color, Length, PercentLength, Utils, View, androidDynamicElevationOffsetProperty, androidElevationProperty, backgroundInternalProperty } from '@nativescript/core';
 import { ad } from '@nativescript/core/utils';
 import { ShapeProperties } from '.';
+import { createRippleDrawable, createStateListAnimator, getAttrColor, getColorStateList, handleClearFocus, isPostLollipop, isPostMarshmallow } from './android/utils';
+import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty } from './cssproperties';
+import { CornerFamily, applyMixins } from './index.common';
 export * from './cssproperties';
 export { applyMixins };
 
@@ -232,9 +220,9 @@ export function overrideViewBase() {
             return getRippleColor(themer.getAccentColor());
         }
 
-        setRippleDrawable(view: android.view.View, radius = 0) {
+        setRippleDrawable(view: android.view.View, topLeftRadius = 0, topRightRadius = 0, bottomRightRadius = 0, bottomLeftRadius = 0) {
             if (!this.rippleDrawable) {
-                this.rippleDrawable = createRippleDrawable(this.getRippleColor(), radius);
+                this.rippleDrawable = createRippleDrawable(this.getRippleColor(), topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
                 if (isPostMarshmallow) {
                     view.setForeground(this.rippleDrawable);
                 }
@@ -259,7 +247,13 @@ export function overrideViewBase() {
             nativeViewProtected.setClickable(this.isUserInteractionEnabled);
             const rippleDrawable = this.rippleDrawable;
             if (!rippleDrawable) {
-                this.setRippleDrawable(nativeViewProtected, Length.toDevicePixels(this.style.borderTopLeftRadius));
+                this.setRippleDrawable(
+                    nativeViewProtected,
+                    Length.toDevicePixels(this.style.borderTopLeftRadius),
+                    Length.toDevicePixels(this.style.borderTopRightRadius),
+                    Length.toDevicePixels(this.style.borderBottomRightRadius),
+                    Length.toDevicePixels(this.style.borderBottomLeftRadius)
+                );
             } else {
                 if (isPostLollipop) {
                     (rippleDrawable as android.graphics.drawable.RippleDrawable).setColor(getColorStateList(rippleColor));
@@ -277,7 +271,13 @@ export function overrideViewBase() {
                     // native button have on the background. Setting color will remove the ripple!
                     if (this.rippleDrawable || (value.color && this instanceof Button && this.rippleColor)) {
                         this.rippleDrawable = null;
-                        this.setRippleDrawable(this.nativeViewProtected, value.borderTopLeftRadius);
+                        this.setRippleDrawable(
+                            this.nativeViewProtected,
+                            Length.toDevicePixels(this.style.borderTopLeftRadius),
+                            Length.toDevicePixels(this.style.borderTopRightRadius),
+                            Length.toDevicePixels(this.style.borderBottomRightRadius),
+                            Length.toDevicePixels(this.style.borderBottomLeftRadius)
+                        );
                     }
                 }
             }