Creating a bent line like an arc in Android using xml in drawable

Question

What I did..

<item>
    <rotate
        android:fromDegrees="40"
        android:toDegrees="20"
        android:pivotX="25%"
        android:pivotY="50%" >
        <shape
            android:shape="line"
            android:top="1dip" >
            <stroke
                android:width="1dip"
                android:color="#FF0000" />
        </shape>
    </rotate>
</item>

It rotates but doesn't bend. It needs to be bent to form an arc like shape

Any Idea?

Answer 1

You can draw a ring shape, rotate it based on your preference and use it with ProgressBar as progressDrawable with a set progress.

drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="150"
    android:toDegrees="150">

    <shape
        android:shape="ring"
        android:thickness="10dp"
        android:innerRadius="20dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <solid android:color="@color/colorPrimary"/>

    </shape>
</rotate>

layout.xml

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:progressDrawable="@drawable/widget_arc"
    android:indeterminate="false"
    android:max="100"
    android:progress="67"
    />

You can set the progress dinamically and also easy to animate it

*Use dimen res values