how to create android:pathData?

Question

so i'm going to need to use path data in my app, is there a way to convert images you already have to path data ?

or the only way is to actually calculate all the pixels yourself using Photoshop etc.. ?

Answer 1

PathData in vector images android is Vector graphic program's script. It is not exactly clean and human readable code as a high priority. Brief idea about how pathData is build is given below:

In Script:

M or m (X,Y) Stand for MoveTo: Move cursor to position, uppercase M is absolute, lowercase m is relative moveto commands are followed by X,Y coordinates.

L or l (X,Y) Stands for LineTo: Draws a line from the current position to the position specified by X,Y. Uppercase means absolute coordinates, lowercase means relative coordinates.

H or h (X) Stands for HorizontalLineTo: Draws a horizontal line from the current cursor position to the position specified by X. If there are multiple X coordinates following the command, this is treated as a polyline. The Y coordinate remains unchanged.

V or v (Y) Stands for VerticalLineTo: Draws a vertical line from the current cursor position to the position specified by Y. If there are multiple Y coordinates following the command, this is treated as a polyline. The X coordinate remains unchanged.

Z or z ClosePath: Draws a line from the current position of the cursor to the start position of the path. Does not have any parameters.

C (absolute) c (relative) for Curve to: Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier. image of how to use C

S (absolute) s (relative) for shorthand/smooth Curve to: Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not an C, c, S or s, assume the first control point is coincident with the current point.) (x2,y2) is the second control point (i.e., the control point at the end of the curve). S (uppercase) indicates that absolute coordinates will follow; s (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

For more basic idea refer to this link https://medium.com/@ali.muzaffar/understanding-vectordrawable-pathdata-commands-in-android-d56a6054610e#.g4gbz1r5p

Here is a good refer too. link

Answer 2

Assuming you're referring to the pathData element of a VectorDrawable, if you have the images in .svg format you can convert them easily.

Either do it directly in Android Studio by right-clicking on the drawable folder then New>Vector Asset and import your local SVG file:

Or use another converter like svg2android(you might find this works on files that Android Studio fails to convert).

If you don't want a VectorDrawable and just want to get the pathData you can open an SVG in a text editor. If the images you have aren't in a vector format already things will be more difficult.