Everyone Can Create Beautiful Apps with Material Design

Sign in to queue


Building beautiful Android apps doesn't have to be hard. Since its original induction, Material Design (MD) has taken the Android world by storm, generating rapid adoption throughout the dev community. A lot has changed from the original material design specification, with the updates to the Android Support v7 AppCompat library and intro of the Support Design library, MD themes, controls, and features now available on all devices running Android. This session will show you how to transform your app into a stunning work of Material art, and even how to utilize MD in your Xamarin.Forms apps.





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