Correct draw path dimensions while doing even border

Reviewed By: achen1

Differential Revision: D7678473

fbshipit-source-id: 8aa5eb29d22379eaabf9951a901e237fb7569632

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java

@@ -90,9 +90,11 @@ public class ReactViewBackgroundDrawable extends Drawable {
   private @Nullable Path mOuterClipPathForBorderRadius;
   private @Nullable Path mPathForBorderRadiusOutline;
   private @Nullable Path mPathForBorder;
+  private @Nullable Path mCenterDrawPath;
   private @Nullable RectF mInnerClipTempRectForBorderRadius;
   private @Nullable RectF mOuterClipTempRectForBorderRadius;
   private @Nullable RectF mTempRectForBorderRadiusOutline;
+  private @Nullable RectF mTempRectForCenterDrawPath;
   private @Nullable PointF mInnerTopLeftCorner;
   private @Nullable PointF mInnerTopRightCorner;
   private @Nullable PointF mInnerBottomRightCorner;
@@ -343,6 +345,23 @@ public class ReactViewBackgroundDrawable extends Drawable {
         || borderWidth.bottom > 0
         || borderWidth.left > 0
         || borderWidth.right > 0) {
+
+      //If it's a full and even border draw inner rect path with stroke
+      final float fullBorderWidth = getFullBorderWidth();
+      if (borderWidth.top == fullBorderWidth &&
+        borderWidth.bottom == fullBorderWidth &&
+        borderWidth.left == fullBorderWidth &&
+        borderWidth.right == fullBorderWidth) {
+        if (fullBorderWidth > 0) {
+          int borderColor = getBorderColor(Spacing.ALL);
+          mPaint.setColor(ColorUtil.multiplyColorAlpha(borderColor, mAlpha));
+          mPaint.setStyle(Paint.Style.STROKE);
+          mPaint.setStrokeWidth(fullBorderWidth);
+          canvas.drawPath(mCenterDrawPath, mPaint);
+        }
+      }
+      //In the case of uneven border widths/colors draw quadrilateral in each direction
+      else {
         mPaint.setStyle(Paint.Style.FILL);
 
         // Draw border
@@ -379,8 +398,10 @@ public class ReactViewBackgroundDrawable extends Drawable {
 
             final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
             final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
-          final boolean isDirectionAwareColorLeftDefined = isRTL ? isColorEndDefined : isColorStartDefined;
-          final boolean isDirectionAwareColorRightDefined = isRTL ? isColorStartDefined : isColorEndDefined;
+            final boolean isDirectionAwareColorLeftDefined =
+              isRTL ? isColorEndDefined : isColorStartDefined;
+            final boolean isDirectionAwareColorRightDefined =
+              isRTL ? isColorStartDefined : isColorEndDefined;
 
             if (isDirectionAwareColorLeftDefined) {
               colorLeft = directionAwareColorLeft;
@@ -449,6 +470,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
           drawQuadrilateral(canvas, colorBottom, x1, y1, x2, y2, x3, y3, x4, y4);
         }
       }
+    }
 
     canvas.restore();
   }
@@ -472,6 +494,10 @@ public class ReactViewBackgroundDrawable extends Drawable {
       mPathForBorderRadiusOutline = new Path();
     }
 
+    if (mCenterDrawPath == null) {
+      mCenterDrawPath = new Path();
+    }
+
     if (mInnerClipTempRectForBorderRadius == null) {
       mInnerClipTempRectForBorderRadius = new RectF();
     }
@@ -484,13 +510,24 @@ public class ReactViewBackgroundDrawable extends Drawable {
       mTempRectForBorderRadiusOutline = new RectF();
     }
 
+    if (mTempRectForCenterDrawPath == null) {
+      mTempRectForCenterDrawPath = new RectF();
+    }
+
     mInnerClipPathForBorderRadius.reset();
     mOuterClipPathForBorderRadius.reset();
     mPathForBorderRadiusOutline.reset();
+    mCenterDrawPath.reset();
 
     mInnerClipTempRectForBorderRadius.set(getBounds());
     mOuterClipTempRectForBorderRadius.set(getBounds());
     mTempRectForBorderRadiusOutline.set(getBounds());
+    mTempRectForCenterDrawPath.set(getBounds());
+
+    float fullBorderWidth = getFullBorderWidth();
+    if (fullBorderWidth > 0) {
+      mTempRectForCenterDrawPath.inset(fullBorderWidth * 0.5f, fullBorderWidth * 0.5f);
+    }
 
     final RectF borderWidth = getDirectionAwareBorderInsets();
 
@@ -623,6 +660,20 @@ public class ReactViewBackgroundDrawable extends Drawable {
       },
       Path.Direction.CW);
 
+    mCenterDrawPath.addRoundRect(
+      mTempRectForCenterDrawPath,
+      new float[] {
+        innerTopLeftRadiusX + extraRadiusForOutline,
+        innerTopLeftRadiusY + extraRadiusForOutline,
+        innerTopRightRadiusX + extraRadiusForOutline,
+        innerTopRightRadiusY + extraRadiusForOutline,
+        innerBottomRightRadiusX + extraRadiusForOutline,
+        innerBottomRightRadiusY + extraRadiusForOutline,
+        innerBottomLeftRadiusX + extraRadiusForOutline,
+        innerBottomLeftRadiusY + extraRadiusForOutline
+      },
+      Path.Direction.CW);
+
     /**
      * Rounded Multi-Colored Border Algorithm:
      *