0

I saw similar questions here , here , here and also in some other websites.

I know to draw shapes using xml like below code

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
        android:angle="270"/>
</shape>

But, I saw a code while seeing this tutorial , they have used xml to draw a flight.

I thought it was a png file but then i saw it is an XML . Below is the code

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M10.18,9"/>
    <path
        android:fillColor="#FF000000"
        android:pathData="M21,16v-2l-8,-5V3.5c0,-0.83 -0.67,-1.5 -1.5,-1.5S10,2.67 10,3.5V9l-8,5v2l8,-2.5V19l-2,1.5V22l3.5,-1 3.5,1v-1.5L13,19v-5.5l8,2.5z"/>
</vector>

I just wonder what that pathData and its contents M21,16v-2l-8,-5V3.5c0... means.

Can you explain it ?

And my next doubt is, How can i code like that

Do we need to code it manually ( By specifying each pixel locations ) by some calculations

or

is there any trick to draw a shape by having a png image. ( Any online converter where we upload a png file and it will give us as XML code or Any other method)

Is the title of the question is correct ? I don't know what method is that. So i simply put How to draw.... Correct me if i specified anything wrong.

Thanks in advance (:

Community
  • 1
  • 1
Ganesh
  • 1,820
  • 2
  • 20
  • 40

2 Answers2

3

The XML file you are looking at is a VectorDrawable. This is Androids version of a vector graphics file format and is quite similar to the popular SVG file format.

At the moment there are two main ways you can create a VectorDrawable. If you learn how they work you can code it by hand, but the most common way would be to convert an SVG file(either an existing one, or drawing a new one yourself).

Making an SVG

If you want to draw an SVG there are plenty of tools available ranging from expensive to free. Examples:

Converting into VectorDrawable

You can use the online converter svg2android but Android Studio now has a built in converter. You can access this by right-clicking on the drawables folder and choosing new > Vector Asset, which lets you choose from Googles Material Design icons or your own SVG files.

enter image description here

pathData

The pathData of a VectorDrawable is based on the SVG format. For a full explanation you can look at the SVG documentation here. In your example M21,16v-2l-8,-5V3.5c0... it means: Move to point 21,16 (M21,16) Draw a vertical line upwards of length 2 (v-2) Draw a straight diagonal line up 5 places and left 8 (l-8,-5) and so on. Each letter starts a new type of command.

Converting from png

I've never tried converting a png to a vector so I can't say how well it works. If you want to try it, Google "converting png to svg" and once you have your svg you would convert again to Androids VectorDrawable format as described above.

Lewis McGeary
  • 7,692
  • 2
  • 40
  • 46
1

Here is the android documentation with detailed information about your question and some extra things related to that.

https://developer.android.com/tools/help/vector-asset-studio.html

But one thing remember currently vector are supported from API level 21 or more.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Nigam Patro
  • 2,760
  • 1
  • 18
  • 33