Everyone Can Create Beautiful Apps with Material Design

Play Everyone Can Create Beautiful Apps with Material Design

The Discussion

  • User profile image
    Divya Vanj


    I watched this Video. I tried Vector drawable in Material Designing in AndroidStudio. I understood that "converting SVG images to VectorDrawable file format without writing an XML file manually." But, i did not get how the "pathData" (property) will generate. this we cant write manually. I think it will geanarte Automatically as shown in this Video (SVG conversion).

    Problem Is:
    ->I have downloaded one svg image just "circle with border black color"
    -->I have converted that image into Vector Drawable Image (through SVG Conversion tool)
    -->xml file generated, i downloaded and added into drawable folder in android Studio
    --> That auto genearted File is:

    <vector android:height="24dp" android:viewportHeight="612.0"
    android:viewportWidth="612.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">

    <path android:fillColor="#FF000000" android:pathData="M587.6,186.9c-32.3,-75.2 -87.1,-129.9 -162.9,-162.3C386.7,8.4 347,0.2 305.5,0.2c-41.5,0 -80.9,8.2 -118.8,24.4C111.5,56.9 56.4,111.5 24.1,186.9C7.9,224.6 0,264.2 0,305.7c0,41.5 7.9,81.4 24.1,119.1c32.3,75.3 87.4,130.3 162.6,162.6c37.9,16.2 77.3,24.4 118.8,24.4c41.5,0 81.2,-8.3 119.1,-24.4c75.9,-32.4 130.7,-87.4 163,-162.6C603.8,386.9 612,347.2 612,305.7C612,264.2 603.8,224.8 587.6,186.9zM538.7,440.9c-24,41.2 -56.9,73.9 -98.4,98c-41.2,24 -86.3,36.1 -134.8,36.1c-36.5,0 -71.3,-7 -104.4,-21.4c-33.1,-14.4 -61.7,-33.3 -85.7,-57.2c-23.9,-23.9 -43,-52.8 -57.2,-86c-14.2,-33.1 -21.1,-68.3 -21.1,-104.7c0,-48.5 11.9,-93.4 35.8,-134.5c24,-41.2 56.9,-73.9 98,-98c41.1,-24.1 86,-36.1 134.5,-36.1c48.5,0 93.6,12.1 134.8,36.1c41.4,24.2 74.3,56.9 98.4,98c24.1,41.2 36.1,86 36.1,134.5C574.9,354.2 562.9,399.4 538.7,440.9z"/>
    <path android:fillColor="#FF000000" android:pathData="M324.9,303V129.7c0,-10.4 -9,-18.7 -19.4,-18.7c-9.7,0 -18.4,8.4 -18.4,18.7v176c0,0.3 0.7,1.7 0.7,2.7c-0.7,6 1,11 5,15.1l100.1,100c6.7,6.7 19.1,6.7 25.8,0c7.7,-7.7 7.2,-18.9 0,-26.1L324.9,303z"/>


    -->Now, its just a Circle . I want to drwa two lines manually in that circle like as CLOCK
    --> and i want to apply the animation for those two lines.
    -->So, ,Could you tell me how to write that "pathData" for those lines inside the Circle.

    Please Help me.

    Thank You.

Add Your 2 Cents