Get started with material Design,The Easy and Clear Way,Part-II

-

Curved motion and Circular Reveal Transformations

Material motion brings a real life movement action.Natural Easing curves can be achieved with new material motion.



https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves

Smooth and easy curves include standard deceleration, acceleration, and sharp curves.

The movement of an element between two points within the bounds of the screen follows a natural, concave arc. All on-screen movements use the standard curve.Elements entering and exiting the screen are referred to as independent elements as they don't affect the position of other on-screen content.The standard curve is used for moving elements both in and out of the bounds of the screen. This curve has a slightly longer duration compared to independent elements.

Motion-Transforming material

1.Rectangular Transformation
2.Radial Transformation
3.Joining and Dividing

Rectangular Transformation

1.Rectangular transformations are one of the standard curves that occurs on-screen.Rectangular transformations are of two types:
  a)Asymmetric
  b)Symmetric


Asymmetric transformations involve the width and height changes at different rates. They work best when multiple elements or position changes are involved.

Symmetrical transformations involve width and height changes occurring at the same rate. They are better for changes to a single element that occur along a single axis.

Note: Asymmetric transformations are privileged to avoid unnatural stretching,because aspect ratio is maintained.

Radial/Circular Transformation

Radial transformations are symmetrical, circular visualisations that originate from a user’s point of touch. They are commonly used on circular surfaces that morph into other shapes.

Joining and Dividing

Material may join with other material, or it may divide into multiple pieces. As two pieces of material approach one another, their edges meet and margins overlap before the movement completes.
When material divides into multiple pieces, the pieces begin separation at the start of the movement.

Transformations - Implementation

Shared Element and its Transitions

Shared elements, as name suggests, is a shared element between two activities that can be a view.To keep users visually connected with app,Shared elements are one of the best and easy ways(for lollipop+ versions).Let's start doing something real work.

For a basic transition flow,we have following steps:
  1. Activity A captures shared element start values and pass them to Activity B via an Intent

      Intent intent = new Intent(context, ArticleImageActivity.class);  
                 intent.putExtra(IMAGE_URL_EXTRA, imageUrl);  
                 intent.putExtra(VIEW_INFO_EXTRA, /* start values */                                     captureValues(originView));  //Create bundle and bind values to it  
                 startActivity(intent);  
                 overridePendingTransition(0, 0);
activity start.

2.Activity B starts completely transparent

   <style name="Transparent" parent="AppTheme">  
            <item name="android:windowIsTranslucent">true</item>  
            <item name="android:windowBackground">@android:color/transparent</item>  
            </style>
3.values and prepares the scene
                        
 getIntent.getExtra(IMAGE_URL_EXTRA,"");  
 getIntent.getExtra(VIEW_INFO_EXTRA,"");
      4.Activity B runs the shared element animation
 mView.setVisibility(View.VISIBLE);  
  mView.animate().setDuration(DEFAULT_DURATION)  
             .setInterpolator(DEFAULT_INTERPOLATOR)  
             .scaleX(1f)  
             .scaleY(1f)  
             .translationX(0)  
             .translationY(0)  
             .start();
5.Make the view visible first and start animation.Reverse animation will be done,for exiting from activity B to A.


Vector Drawables and animated vectors

Supporting multiple screen sizes was always a very calculative and precisive task for developers and designers to do.Vector graphics are a super efficient solution for this problem. We have been using bitmaps for so long as they have better performance but have limitations in terms of image scalability. A bitmap is good for small screens,but eventually fails for large screens.So,Typical solution for this is to create different bitmaps for different sizes, which is also not very effective approach.

In Android Lollipop ( API level 21), Google finally included native support for vector image assets, allowing for images to be represented geometrically as a set of points, lines, and curves, as well as their associated color information.Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files into your project as vector drawable resources.Vector Asset Studio adds a vector graphic to the project as an XML file that describes the image. Maintaining one XML file can be easier than updating multiple raster graphics at various resolutions.

Following is an SVG file generated from android studio, Vector asset studio tool:

 <vector android:height="24dp" android:viewportHeight="432.0"  
   android:viewportWidth="432.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">  
   <path android:fillColor="#CB7B26" android:pathData="M154.3,250.1c-0.2,-5.7 -0.4,-11.3 -0.4,-17c0,-4.2 0.4,-9.9 -4.4,-11.6c-3.8,0 -9.2,-1 -10.1,3.9c-1.2,5.9 -0.8,12.7 -0.5,18.7c0.3,5.6 0.2,11.1 0.3,16.8c0.1,5.8 -4.9,26.8 5.6,26.8c3.5,0 7.5,0.1 9.9,-2.9c2.5,-3.1 1.7,-8.3 1.5,-11.9c-0.1,-2.6 -0.3,-5.1 -0.5,-7.7c-0.1,-1.4 -1.3,-5 -0.2,-6.1c1.2,-1.2 4.7,-0.3 6.2,-0.2c2.6,0.1 4.3,-0 6.9,-0c1.9,0 2.5,0.1 4.2,0.1c-0.1,-2.5 0.1,-5 0.1,-7.5C168,251.8 154.4,252.4 154.3,250.1z"/>  
   <path android:fillColor="#CB7B26" android:pathData="M293.8,259.3c0.1,-6.1 -0.4,-12.2 -0.5,-18.2c-0.1,-5.2 1.8,-10.6 -0.4,-15.6c-2,-4.6 -8.3,-5 -12.5,-3.3c-3.6,1.5 -3.5,5 -3.7,8.4c-0.4,6 -0.2,11.6 1,17.5c0.6,2.9 0,2.8 -2.7,2.8c-3,-0 -5.9,0.2 -8.9,0.1c-2.4,-0.1 -3.4,-0.1 -5.2,-0.1c0,3.2 0,6.5 0,9.7c5.4,0.2 9.8,0.1 15.2,-0.6c1.3,-0.1 2.2,-0.4 2.3,1.2c0.1,2.9 0,5.7 0,8.6c0,3.6 0,7.2 0,10.8c0,1.5 -0.3,3.7 0.6,5.1c2.1,2.9 8.1,2.7 10.8,1.5c4.1,-1.8 4.2,-5.3 4.1,-9.4C293.9,271.5 293.7,265.4 293.8,259.3z"/>  
   <path android:fillColor="#CB7B26" android:pathData="M311,251.9c-0.1,-3.5 -0.3,-6.9 -0.5,-10.4c-0.2,-3.4 0.6,-6.4 0.6,-9.7c0,-2.5 -0.4,-6.5 -2.2,-8.3c-2.1,-2.2 -4.6,-2 -7.4,-2c1,0 -1.2,0.5 -1.1,0.3c-5.6,2.1 -5.1,6.8 -5.3,12.6c-0.3,6.9 0.9,13.7 1.3,20.6c0.4,7.2 0.2,14.4 0.3,21.7c0,2.3 -0.7,6.1 1,8.1c1.7,1.9 5.2,2.4 7.6,2.4c7.9,-0.2 5.9,-9.4 5.8,-15.1C310.8,265.3 311.1,258.6 311,251.9z"/>  
   <path android:fillColor="#CB7B26" android:pathData="M300.4,221.8c0.3,-0.1 0.7,-0.2 1.1,-0.3C300.8,221.7 300.5,221.8 300.4,221.8z"/>  
   <path android:fillColor="#CB7B26" android:pathData="M322.7,267.2C322.2,269.8 322.7,265.9 322.7,267.2c0,-5.1 -0.7,-10.1 -0.7,-15.1c-0,-4.8 1,-11 -0.3,-15.6c-0.8,-2.8 -4.9,-4.1 -7.6,-3.6c-2.7,0.6 -2.3,4.6 -2.3,6.6c0,11.3 0.3,22.7 0.7,34c0.1,3.5 4.8,7.8 8.3,4.9C323.5,276.3 322.1,270.1 322.7,267.2z"/>  
   <path android:fillColor="#CB7B26" android:pathData="M130.1,221.5c0.4,0.1 0.7,0.2 1.1,0.3C131.1,221.7 130.8,221.6 130.1,221.5z"/>  
   <path android:fillColor="#CB7B26" android:pathData="M136.9,234.2c-0.4,-5.8 -0,-10.5 -5.7,-12.5c0.2,0.1 -2.1,-0.3 -1.1,-0.3c-2.8,0.1 -5.3,-0 -7.3,2.2c-1.7,1.9 -2,5.9 -1.9,8.4c0.1,3.3 1,6.3 0.9,9.7c-0.1,3.5 -0.2,6.9 -0.2,10.4c0,6.7 0.5,13.4 0.6,20.1c0,5.7 -1.7,14.9 6.2,14.9c2.4,0 5.9,-0.6 7.5,-2.6c1.6,-2 0.8,-5.7 0.8,-8.1c-0.1,-7 -0.5,-14.1 -0.4,-21.1C136.3,248.3 137.4,241.3 136.9,234.2z"/>  
   <path android:fillColor="#CB7B26" android:pathData="M119.3,235.1c-0.1,-3.5 -4.8,-7.8 -8.3,-4.9c-2.5,2.1 -1.2,8.4 -1.8,11.3c0.5,-2.6 0,1.3 0,0c0,5.1 0.7,10.1 0.7,15.1c0,4.8 -1,11 0.3,15.6c0.8,2.8 4.9,4.1 7.6,3.6c2.7,-0.6 2.3,-4.6 2.3,-6.6C120,257.7 119.7,246.4 119.3,235.1z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M203.8,111l-13.5,-45.4l-11.4,0l0,67.5l10.2,0l0,-43.2l14,43.2l10.9,0l0,-67.5l-10.2,0z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M250.4,69.5c-3.1,-3.2 -7,-4.7 -11.4,-4.7c-4.4,0 -8.2,1.6 -11.4,4.7c-3.2,3.1 -4.7,7 -4.7,11.4v36.8c0,4.5 1.6,8.3 4.7,11.4c3.1,3.2 6.9,4.7 11.4,4.7c4.5,0 8.3,-1.6 11.4,-4.7c3.2,-3.1 4.7,-7 4.7,-11.4V81C255.2,76.5 253.6,72.7 250.4,69.5zM244.5,117.7c0,1.6 -0.6,3 -1.7,4.1c-1.1,1.1 -2.5,1.7 -4.1,1.7s-3,-0.6 -4.1,-1.7c-1.1,-1.1 -1.7,-2.5 -1.7,-4.1V80.7c0,-1.6 0.6,-3 1.7,-4.1c1.1,-1.1 2.5,-1.7 4.1,-1.7s3,0.6 4.1,1.7c1.1,1.1 1.7,2.5 1.7,4.1V117.7z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M166.4,143.4h-16v67.5h10.2v-25.4h5.9c4.4,0 8.2,-1.6 11.3,-4.7c3.1,-3.2 4.7,-7 4.7,-11.4v-9.8c0,-4.6 -1.4,-8.4 -4.1,-11.4C175.3,145 171.3,143.4 166.4,143.4zM172.5,169.5c0,1.6 -0.6,3 -1.7,4.1c-1.1,1.1 -2.5,1.7 -4.1,1.7h-6.1v-21.6h6.1c1.8,0 3.2,0.5 4.2,1.6c1.1,1.1 1.6,2.5 1.6,4.3V169.5z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M195.4,143.4l-11.5,67.5h10.6l2.5,-15.5h10.6l2.4,15.5h10.7l-11.3,-67.5H195.4zM198.6,185.5l3.8,-26.6l3.8,26.6H198.6z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M229.3,143.4h10.2v67.5h-10.2z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M273.5,143.3l0,45.4l-13.5,-45.4l-11.4,0l0,67.5l10.2,0l0,-43.2l14,43.2l10.9,0l0,-67.5z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M203.8,266.5l-13.5,-45.4l-11.4,0l0,67.5l10.2,0l0,-43.2l14,43.2l10.9,0l0,-67.5l-10.2,0z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M250.4,225c-3.1,-3.2 -7,-4.7 -11.4,-4.7c-4.4,0 -8.2,1.6 -11.4,4.7c-3.2,3.1 -4.7,7 -4.7,11.4v36.8c0,4.5 1.6,8.3 4.7,11.4c3.1,3.2 6.9,4.7 11.4,4.7c4.5,0 8.3,-1.6 11.4,-4.7c3.2,-3.1 4.7,-7 4.7,-11.4v-36.8C255.2,232 253.6,228.2 250.4,225zM244.5,273.1c0,1.6 -0.6,3 -1.7,4.1c-1.1,1.1 -2.5,1.7 -4.1,1.7s-3,-0.6 -4.1,-1.7c-1.1,-1.1 -1.7,-2.5 -1.7,-4.1v-36.9c0,-1.6 0.6,-3 1.7,-4.1c1.1,-1.1 2.5,-1.7 4.1,-1.7s3,0.6 4.1,1.7c1.1,1.1 1.7,2.5 1.7,4.1V273.1z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M164.2,298.1c-4.5,0 -8.3,1.6 -11.4,4.7c-3.2,3.1 -4.7,7 -4.7,11.4v36.8c0,4.4 1.6,8.2 4.7,11.4c3.1,3.2 7,4.7 11.4,4.7c4.4,0 8.2,-1.6 11.4,-4.7c3.2,-3.1 4.7,-6.9 4.7,-11.4v-23.6h-16.2v10.2h5.7v13.3c0,1.6 -0.6,3 -1.7,4.1c-1.1,1.1 -2.5,1.7 -4.1,1.7s-3,-0.6 -4.1,-1.7c-1.1,-1.1 -1.7,-2.5 -1.7,-4.1v-36.9c0,-1.6 0.6,-3 1.7,-4.1c1.1,-1.1 2.5,-1.7 4.1,-1.7s3,0.6 4.1,1.7c1.1,1.1 1.7,2.5 1.7,4.1v7.9h10.6v-7.7c0,-4.5 -1.6,-8.3 -4.7,-11.4C172.5,299.7 168.7,298.1 164.2,298.1z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M197.7,298.9l-11.5,67.5h10.6l2.5,-15.5h10.6l2.4,15.5h10.7l-11.3,-67.5H197.7zM200.8,340.9l3.8,-26.6l3.8,26.6H200.8z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M231.5,298.9h10.2v67.5h-10.2z"/>  
   <path android:fillColor="#1D1D1B" android:pathData="M275.7,298.8l0,45.4l-13.5,-45.4l-11.4,0l0,67.5l10.2,0l0,-43.2l14,43.2l10.9,0l0,-67.5z"/>  
 </vector>

Best Apps with Material

Here are few apps with exceptional material design:

1.Kitchen Stories

An app for women

             https://play.google.com/store/apps/details?id=com.ajnsnewmedia.kitchenstories

2. Airbnb

Unforgettable trips start with Airbnb

https://play.google.com/store/apps/details?id=com.airbnb.android

3.FeedlyReader


FeedlyReader is a RSS reader for Feedly.

https://play.google.com/store/apps/details?id=com.huwenqi.feedlyreader.app


4.Paperboy
online news distribution application 


https://play.google.com/store/apps/details?id=com.dottedcircle.paperboy

5.Asparagus-My Cookbook

Recipe collection manager


https://play.google.com/store/apps/details?id=cz.kinst.jakub.asparagus

Thanks for reading this post.

If you enjoyed this post, I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter or Facebook. Thank you!

Comments

Post a Comment

Add your comment here

Popular posts from this blog

Android Studio and its UI performance measuring features

-
Image
Introduction While starting an app development,the first and foremost thing to be taken care of is  UI/UX (User Experience) .In past three years,while developing apps I've noticed so many times that layouts and UI performance are not being paid attention as equal as we do for code.But a well written layout simply adds to your app performance and easy to maintain as well.In this article,I am gonna cover some tools of android studio provided for layout  efficiency and performance we'll also get to know few tips regarding android Layouts and Views. Layouts and Views Layout is basically a container that wraps all the elements that we see on screen.It also handles the arrangement of elements encapsulated.One can also create a custom layout by extending  ViewGroup  class.Most commonly used layouts are: 1.Linear Layout 2.Relative Layout Relative layout is considered simple and easy to use.But Relative Layout is slow, and Constraint Layout(recently launched by ...
Read more

Android studio Tools for UI/UX and enhanced performance of app

-
Image
Introduction While starting an app development,the first and foremost thing to be taken care of is UI/UX (User Experience) .In past three years,while developing apps I've noticed so many times that layouts and UI performance are not being paid attention as equal as we do for code.But a well written layout simply adds to your app performance and easy to maintain as well.In this article,I am gonna cover some tools of android studio provided for layout  efficiency and performance we'll also get to know few tips regarding android Layouts and Views. Layouts and Views Layout is basically a container that wraps all the elements that we see on screen.It also handles the arrangement of elements encapsulated.One can also create a custom layout by extending  ViewGroup  class.Most commonly used layouts are: 1.Linear Layout 2.Relative Layout Relative layout is considered simple and easy to use.But Relative Layout is slow, and Constraint Layout(recently launched by androi...
Read more

BuzzNews for Android Devs: Android Studio 3.0 RC1

-
Image
Android Studio 3.0RC1 Preview Hi guys,With this blog post,I am going to write about brand new "Android Studio preview (3.0RC1)". The latest version available is Android Studio 3.0, you can download it from here .So lets begin with some new features and improvements we gonna get with these preview: #Note: The Android Studio Preview can run side-by-side with your stable version, so you can work on the same projects in both versions. New Features in Android Studio 3.0: There are much more to get in this new studio like parameter hints, semantic highlighting, instant results in search etc.Lets peek in: Kotlin Language Support Bye Bye!!!Jack Android Profiler Instant Apps are in Apk Debugger Device File Explorer Android O developer preview Support AoT-Templates for Android things Improved Layout Editor Maven Repository Improved APK analyzer New plugin for Gradle and CMake 3.7 Improved Emulator   Kotlin Language Support Android Studio 3.0 includ...
Read more