A Comprehensive Guide To Material Design In Your Android App

Google has recently introduced the new version of Android, that is, Lollipop (5.0). Lollipop contains lots many new features for the users and thousands of new APIs for the developers. One of the main features introduced in android lollipop is Material Design.

Material design gives the visualized, motion and interactive guidelines with different platforms and different devices. Flatter graphical UI and subtle shadows which provide the smooth visual experience which makes us feel like it’s made up with the physical material rather than the computerized pixels.

Goal of Material Design

• Create the visual language that contains the principles of Layouts (Print like design).
• Synthesized the experience with the different devices, screen sizes and platforms.
• Considerable guidelines for UI design creation and development easier.

Why Material Design???

Material Design is giving 3D types effect to each component which contains x, y, and z dimensions. It’s creating the visual look on the screen with the innovative and possible technologies on different platforms and with different device sizes. Lights, surfaces and movements are the keys which are used to define how the object moves, interact, exist in space and relate to other objects. Even the grids, spaces, scales, colors, use of images, realistic effects of lights gives the visual treatment to the object on screen. Meaningful and appropriate motion also serving the focus, attention and maintain the continuity. And the effect goes increased by using the transition and fading processes.

With the use of material design, you can have the better features like,

• Elevation (Shadow effect)
• Scrollable surfaces
• Toolbar functionality
• Two new components introduced (Recycler View and Card View)
• Greatest use of build-in animations (Ripple effect & Reveal animation)
• Colors, themes and styles
• 3D type view
• New API and alternative libraries

 The UI of Material Design/Importance of UI in Material design

A big part of making material design is the Physical world live. Google design lead of search Jon Wiley mentioned as “When you make things, you inherit thousands of years of experience. But, software design is just getting started”. This statement alone means that in making UI for material design they wanted to create something creative, amazing and astonishing.

Google team has introduced various features in material designs like, Animations, Layout, Typography, Color, Components, and Resources. Let’s get into details of each:

Animations – Different type of new animations are introduced in Lollipop like, Ripple effect, Reveal effect, etc.

Animations should contain,

Authentication: Object’s motion shows us whether it’s light or heavy, flexible or rigid, small or big, it is not only showing how the design can be beautiful but it also showing the meaning of relations, functionalities and intension of the system.

Meaningful Animation: Transition of the object from the state A to state B should have some meaningful guideline to move. It gives the effective and meaning full guideline to users for theirs attentions and focuses through multiple steps of process, avoid confusions and improve the beauty of the transition.

Interactive Animation: When interactive and logical transition happens it will get the attention of the user and give them satisfaction too. Transition should be meaningful, with purpose and not a random one.

Delightful Details: App should truly delight to the user when animation is used beyond the obvious. Like, a menu icon smoothly becomes a back arrow, when plus sign smoothly becomes cross icon.

Style – Different styles are provided by using,

Colors: Material design is using Primary color, Primary Dark color and Accent color as a tint color in the app for the other widgets with the background white color.

Icons: Icons are the visual representation of the product. Icons of the app are the vehicle for communicating your product. Shapes, grids, colors and shadows of the images represent the functionality of the app.

Images: Imagery is the way to represent your app other than decorating the app with the different objects. It’s the way to communicate and differentiate your app.

Fonts: Material has provided two types of font formats. One is Roboto and Noto, to support all the languages worldwide and second one is our regular style, i.e. Standard Styles, which we are using till date.

Layout – Layout shows the look and feel of the views.

The exact ways are defined to show the layouts to your applications by providing the exact pixels of margin, padding, spaces, where to put the components, etc.

Defined the relation of the widgets with each other having exact place on the screen and exact gaps among widgets.

Components – To give perfect UI android has introduced different components.

Designs and attributes are provided to the different components like, Button, Text Field, Card View, grid, List View etc. to gives the variant presentations for the material designing.

Represents Recycler View, Card View, Floating Action Button, Icons, Surface changes, Animations on different components and relation of components with each other.

Patterns – Different patterns are defined for material designs. Patterns applied for,

– Date format: Material design has provided a way to display dates and times in a consistent and user friendly way.

– Errors: With the material design now we can show the errors in a different ways based on the category of errors. User Input errors can be shown at the same field with the red marked sign. App errors are shown in a dialog box (With the theme of lollipop) and other Incompatible state errors can be shown over the toolbar or bottom bar using the help of animations.

– Gestures: Two types of gestures are classified here, one is Touch Mechanism, What your fingers do on screen and the second is, Touch Activity, specific result of the specific gesture in activity.

– Loading Images: By dividing the state of Opacity, Exposure and Saturation levels into 3 phases, you can load your images to the app, so the end user gets the effect like animation and loading of image doesn’t become a tedious task but makes user engaged to watch on it.

– Swipe to refresh: Data can be refreshed by two ways, Synced automatically and periodically and second way is manually by the end user. Swipe to refresh functionality used for Manual Syncing.

Usability – It shows the way of the usability of the product.

You need to think for the multiple criteria,

• Accessibility: Your product is accessible to wide variety of the users.
• Bidirectionality : Your product should be language free in the sense of UI.

The example showing some functionality of Material Design like, Card View, Recycler View, Floating Action Button, Shadow effect, Ripple Effect and Reveal Effect too.

Adding Floating Action Button :

<ImageButton

android:id="@+id/ivFAB"

android:layout_width="@dimen/fab_diameter"

android:layout_height="@dimen/fab_diameter"

android:layout_alignParentBottom="true"

android:layout_alignParentEnd="true"

android:layout_marginBottom="@dimen/fab_margin_bottom"

android:layout_marginRight="@dimen/fab_margin_right"

android:background="@drawable/oval_ripple"

android:src="@drawable/fab_ic_add"

android:tint="@android:color/white"

android:elevation="@dimen/elevation_low"

android:stateListAnimator="@anim/elevation_"/>

Output:

Adding CardView with the Ripple Animation

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:card_view="http://schemas.android.com/apk/res-auto"

android:id="@+id/card_view"

android:layout_width="match_parent"

android:layout_height="100dp"

android:clickable="true"

card_view:cardElevation="5sp"

card_view:cardUseCompatPadding="true"

card_view:cardCornerRadius="4dp"

android:foreground="@drawable/row_txt_ripple"

android:orientation="horizontal">

...

</android.support.v7.widget.CardView>

ripple_anim.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"

android:color="?android:colorAccent">

</ripple>

Output:

Adding Reveal Animation:

Animator animator = ViewAnimationUtils.createCircularReveal(
viewHolder.mImageView,
viewHolder.mImageView.getWidth() / 2,
viewHolder.mImageView.getHeight() / 2,
0,
(float) Math.hypot(viewHolder.mImageView.getWidth(), viewHolder.mImageView.getHeight()));

animator.setDuration(3000);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.start();

Conclusion:

In this post, we have talked about the principals of the material designs, benefits of it, how we can use the different features and components with the material design to make our application more interactive, attractive, and user friendly. In short, it can be said like developers can develop apps by having material design guidelines and tools provided by it to make your application smart one.