How Can I Draw an Arc in Android XML?

Question

I want to draw an arc as an Android XML object. I need it to be an xml, not a Drawable I can code programmatically (that'd be too easy!) because I need it for a notification icon.

I know how to code circles and rings, and I can use radius on rectangles to get quarter/half circles fine. However, I can't figure out how to code just any arc (e.g. 30 degrees) in an xml. Is it possible?

Answer 1

That XML is still a Drawable resource, while SVG is being called vector & path in there. you can use whatever tool to create vector paths, which then can be used as the pathData. the correct location for such files is src/main/res/drawable-nodpi, here's one example path (and one can put several of them into such a vector):

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="500.0"
    android:viewportHeight="500.0"
    android:width="50dp"
    android:height="50dp">

    <path
        android:fillColor="@color/colorAccent"
        android:pathData="M 250 250 A 100 100 0 0 0 450 250 Z"/>

</vector>

The actual know "how to draw an arc" (with the values of the above path):

Meanwhile Android Studio even has a "Preview" tab for that:

Answer 2

For me, the solution was quite simple. I had to use Figma to create the Arc.

Note: It does not matter whether or not you have prior experience with using Figma or any design tool for that matter. It is a very simple and straightforward process and it takes less than 5 minutes to achieve.

---

Now, let's get to the good part...

• The first step is to download the Figma Desktop app and draw an arc. This short video pretty much summarizes how to draw an arc.

• The second step is to export your arc as an SVG file. Again, this is a straightforward process, this 51-second video summarizes this process.

• The last step is to add the SVG file to Android studio. To do that, go to File > New >Vector Asset and then select Local File in the menu that pops up. All in all, you should see a menu like the one below. Note that the name of my SVG local file is arc.svg.