How to draw shape like below image

Question

Please help me to draw a shape like the image below. I have tried many things, but none of the code worked.

This is what I have tried

 private Point mFirstCurveStartPoint = new Point();
 private Point mFirstCurveEndPoint = new Point();

 .................................................
 .................................................

      mFirstCurveStartPoint.set((mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3), 0);
    // the coordinates (x,y) of the end point after curve
      mFirstCurveEndPoint.set(mNavigationBarWidth / 2, CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));

    mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), mFirstCurveStartPoint.y);
    // the coordinates (x,y)  of the 2nd control point on a cubic curve
    mFirstCurveControlPoint2.set(mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS, mFirstCurveEndPoint.y);

     mPath.reset();
    mPath.moveTo(0, 0);
    mPath.lineTo(mFirstCurveStartPoint.x, mFirstCurveStartPoint.y);

    mPath.cubicTo(mFirstCurveControlPoint1.x, mFirstCurveControlPoint1.y,
            mFirstCurveControlPoint2.x, mFirstCurveControlPoint2.y,
            mFirstCurveEndPoint.x, mFirstCurveEndPoint.y);

is there any way to done this using Xml layout

lpkej · Answer 1 · 2019-06-12T09:39:59.863

2

Since I can't add comments because of low reputation, check this link.

Adding another link if you're going to use Java here, in Areas section some great example how to achieve your shape using setVisible.

edited Jun 12 '19 at 09:39

answered Jun 12 '19 at 09:26

lpkej

445
6
23

@Developer I've never tried to do it with xml, I have no experience, but I've found some examples: [example_for_shapes](https://stackoverflow.com/questions/41971893/how-to-create-a-custom-shape-for-a-button), [example_for_curving_edges](https://stackoverflow.com/questions/51959648/how-can-i-draw-an-arc-in-android-xml), give it a try. Edit: set the background to either blue or grey and choose the shape you want to create and fill it with collor. – lpkej Jun 12 '19 at 09:34

score 1 · Accepted Answer · answered Jun 13 '19 at 12:25

If you have an image in svg format, use Asset Studio to convert it to xml drawable. Otherwise, use code like that:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="500dp"
    android:height="300dp"
    android:viewportWidth="500"
    android:viewportHeight="300">
  <path
      android:pathData="M0,0h500v300h-500z"
      android:fillColor="#e3e3e3"/>
  <path
      android:pathData="M0,80C0,250 487,104 550,247L500,300L0,300"
      android:fillColor="#3e47cb"/>
</vector>

How to draw shape like below image

2 Answers2