10

I'm using this code to draw a half in my app:

  <?xml version="1.0" encoding="utf-8" ?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <item
        android:left="35dp"
        android:top="40dp"
        android:bottom="40dp"
        android:right="0dp">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval" android:innerRadius="30dp" android:thickness="0dp">
            <solid android:color="@color/transparent"/>
            <stroke android:width="3dp" android:color="@color/White"/>

        </shape>
    </item>
</layer-list>

output :

enter image description here

but i need something like below :

enter image description here

how to draw this ?

5 Answers 5

22

I would suggest to draw it through code.

1- Create class MyView and put below code.

public class MyView extends View {

    public MyView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    @Override
    protected void onDraw(Canvas canvas) {

        // TODO Auto-generated method stub
        super.onDraw(canvas);
        float width = (float) getWidth();
        float height = (float) getHeight();
        float radius;

        if (width > height) {
         radius = height / 4;
        } else {
         radius = width / 4;
        }

        Path path = new Path();
        path.addCircle(width / 2,
         height / 2, radius,
         Path.Direction.CW);

        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.FILL);

        float center_x, center_y;
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);

        center_x = width / 2;
        center_y = height / 2;

        oval.set(center_x - radius,
            center_y - radius,
            center_x + radius,
            center_y + radius);
        canvas.drawArc(oval, 90, 180, false, paint);
    }
}

2-Initialize this class inside you activity or fragment:-

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new MyView(this));
}
3
  • @testStack Welcome mate. Jul 29, 2015 at 18:40
  • Any ideas how to append semicirle to arc for instance? To have cap just from one side?
    – vanste25
    Apr 9, 2018 at 23:53
  • 3
    You add the lines of Path path = new Path();.... but you never use it....unnecessary Nov 19, 2019 at 5:59
13

Your can use a rectangle shape .xml file and edit the corners on one side only.

Example:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="30dp"
        android:width="30dp"/>
    <solid android:color="@color/black"/>
    <corners android:topLeftRadius="15dp"
        android:bottomLeftRadius="15dp"/>
</shape>
1
  • "Different corner sizes are not supported in Path.addRoundRect"
    – Dogcat
    Jul 22, 2016 at 8:10
12

You can use <clip /> drawable in order to cut-off part of your circle.

http://developer.android.com/guide/topics/resources/drawable-resource.html#Clip

3
  • 9
    Good, but not a complete answer. Answers should be able to stand by themselves, and only use links as support. The idea is when android moves the URL this answer will still work. That is not the case. As I have to go elsewhere to learn what a clip tag is.
    – StarWind0
    Aug 23, 2016 at 19:55
  • 1
    @StarWind my link does not provide any ready-to-use tutorial which you must follow, it just points to the documentation which you need to read and understand. There would be no point in copying it to the answer itself as there would be a risk that it will become obsolete. Aug 23, 2016 at 20:02
  • 1
    @DmitryZaitsev just pointing out Stack overflow guidelines. Take it up with SO if you don't agree with the rules. stackoverflow.com/help/how-to-answer
    – StarWind0
    Aug 23, 2016 at 20:07
2

this is how i created my semi circle in a drawable xml file.

<size
    android:width="180dp"
    android:height="90dp"></size>

<corners
    android:topLeftRadius="200dp"
    android:topRightRadius="200dp"></corners>

2
1
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="180dp"
        android:height="90dp"></size>

    <corners
        android:topLeftRadius="200dp"
        android:topRightRadius="200dp"></corners>
    <stroke android:width="5px" android:color="@color/black" />
</shape>
1
  • add a description why and how this solves the problem described in the answer Jun 14, 2020 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.