如何在 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 (eg 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.

Answer 3

Arc is just like a quarter-circle . So, you need to draw rectangle shape to form an arc. Below code is to draw an arc using rectangle shape :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="15dp" android:width="15dp"/>
<solid android:color="@color/darkGray"/>
<corners android:topRightRadius="0dp" android:bottomRightRadius="15dp"/>
</shape>