Everyone Can Create Beautiful Apps with Material Design

Download this episode

Download Video

Download captions

Download Captions


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.





Available formats for this video:

Actual format may change based on video formats available and browser capability.

    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.

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.