Material Design for Android

Introduction

In 2014, Google developed a new visual design language called Material Design for Android Lollipop and higher versions. The visual specifics in material design are amusing, and the material objects have x, y and z dimensions, which allows you to create an incredible 3D world. Material design is not about how to use dazzling colors, best images, and the elevation of the object; it is about how we create the amazing experience to users with the positive brand reality.

Google has proposed some rules and regulations while adding the material design to application to improvise its standards. Instead of using a palette selection tool that pulls colors to the content of an app, using of material design makes the Android application’s graphic layout more simplified and standard format. To be noted, the material design is not only being used for rectangular or tablet screen; it should also be used for circular watch screen, etc. So if we create a grid, then it precepts all the spacing and should match to all the types of screens, which is a must for apps that are identified everywhere.

Android Material Design

Overall to say, material design is straightforward, clear and brilliant. Because of these dazzling features, it has become an imperative for a broad number of gadgets than any other UI in history.

Goals of Material Design

  • To design the application UI like a magical paper. Let’s say, something that appears like real, appreciable objects.
  • Animations have been pulled to make the experience more lively by safeguarding the maximum amount of content is always visible.
  • With Material Design, Google also determined to robotize the experience for users.
  • Mobile rules are fundamental but touch, voice, mouse, and keyboard are all excellent input methods.

The materials take energy from the users, from their fingers, from their mouse click, their touch and use it to transform and animate.

In material design, software elements are treated as real things. For example, take paper and ink. Every pixel drawn in an application is similar to a dot of ink on a piece of paper. Assume that paper is plain and doesn’t have any color whereas the ink can be of any color. So the content color of a paper depends on the color of the ink. Likewise in Android application, it can be a menu, button or image.

And also the paper can be of any size. It might fill the whole screen, or it might even shrink to small square or round shape. So the ink will not have any restrictions. It will be throughout the paper. It just has to fit inside the paper to be visible. The papers can change its shape, split, move, join and re-size. Likewise, every application made in material design will have all these characteristics.

Principles of Material Design

1.  Material is the metaphor

A material metaphor is a bring together theory of a rationalized space and a system of motion. A metaphor is a figure of speech that specifies flashy effect to one thing by observing another thing. It is open to imagination and magic.

Material Design Principles

2. Surfaces are spontaneous and natural

Surfaces and edges provide visual hints that are familiarized in our knowledge of reality. The use of ordinary material attributes conveys to a primal part of our brain and advice us to quickly understand its need.

Material Design Surfaces

3. Dimensionality supports interaction

The basics of light, surface, and movement are keys to transfer how objects cooperate. Sensible lighting shows bond, divides space, and demonstrate moving parts.

Material Design Dimensionality

4.  One flexible design

A single underlying design system establishes interactions and space. Each device follows a different view of the same fundamental system. Each view is made custom-fit to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships stand constantly.

Material Design Flexible Design

5.  Content is bold, graphic, and wilful

Bold content provides grouping, meaning, and focus. Cautious color choices, edge-to-edge imagery, and intentional white space create captivation and clarity.

Material Design

6.  Color, surface, and iconography highlights actions

User action is all about the significance of experience design. Color in material design is inspired by bold complexion, deep shadows, and brilliant highlights. The whole design is reconstructed by the change of points in the immediate actions.

Android Material Design Color

7.  Users introduce alteration/change

Alterations in the UI extract their energy from user actions. Motion that forces from touch respects and emphasizes the user as the best mover. It means that the widgets or material takes the energy from users’ fingers during the mouse click or on touch and that energy is used to animate to show it as reality.

Android Design User Alteration

8.  Animation is choreographed on a common step

All action takes place in one surrounding. When objects are restructured and transformed, the user will be given with the experience without collapsing the continuity of it.

Android Material Design Animation

9.  Motion provides meaning

Motion is meaningful and convenient. It helps to focus attention and preserves continuity. The following elements assists in material design for apps of Android version 5.0 (Lollipop) or higher.

Android Material Design Motion

Themes

The material theme is defined as,

@android:style/Theme.Material (dark version)

@android:style/Theme.Material.Light (light version)

@android:style/Theme.Material.Light.DarkActionBar

Android Material Design ThemesAndroid Material Design

 

To use the material theme in your apps, customize the color palette as shown below,

<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/accent</item>
</style>
</resources>

The following example describes how to add material design to a button

styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!-- Customize your theme here. -->
<style name="MyButton" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">@color/calbutton_focus</item>
<item name="colorButtonNormal">@color/background_color</item>
</style>
</resources>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=" match_parent ">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/MyButton"
android:layout_gravity="center"
android:text="Click"
android:textAllCaps="true"
android:textColor="@color/white"/>

</LinearLayout>

Cards and Lists

Cards and Lists are the two new widgets in Android with material design styles and animation. To create cards and Lists, RecyclerView can be used, which is introduced from Android version 5.0 (Lollipop). It is an adoption of ListView, which supports various layout types and contributes performance improvements. Part of data can be shown inside the card with a constant look over apps in CardView.

An example shown below demonstrates how to add a CardView in your layout.

 

build.gradle

dependencies {
// CardView
compile 'com.android.support:cardview-v7:23.3.+'
}

activity_card.xml

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>

 

To use RecyclerView widget in your layout, necessary attribute is shown below,

build.gradle

dependencies {
// RecyclerView
compile 'com.android.support:recyclerview-v7:23.1.1
}

activity_main.xml

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:scrollbars="vertical" />

Android Material Design Cards and Lists

Floating Action Button

Another interesting widget introduced in material design is floating action button.  This button floats on UI in a circular shape with an action attached to it. By default, its behavior is to animate on the screen as an expanding piece of material.

We can also provide shadows and elevation to the buttons. The distance between surfaces and the depth of its shadow signifies elevation. To set the elevation of a view, use the android:elevation attribute in your layouts. The bounds of a view’s background drawable determine the default shape of its shadow.

In addition to the X and Y properties, views in Android material design now have a Z property. This new property serves as the elevation of a view, which concludes the size of the shadow i.e., a view with greater Z values launches bigger shadows.

< android.support.design.widget.FloatingActionButton
android:id=”@+id/my_floatbutton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android: layout_gravity="top|end”
android: src="@android:drawable/ic_add”
android:background=”@color/white”
android:elevation="5dp" />

14

build.gradle

dependencies{
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
}

activity_main.xml

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android: layout_width="wrap_content"
android: layout_height="wrap_content"
android: layout_gravity="bottom|end" // position the floating button
android: layout_margin="@dimen/fab_margin"
android: src="@android:drawable/ic_dialog_email"/>

You can also define own background color for floating button using app:backgroundTint. The size of the button can also be defined by using app:fabSize attribute.

Floating Android Material Design

CollapsingToolbarLayout

A new widget called CollapsingToolbarLayout was also introduced from Android version 5.0 (Lollipop). This comes with an amazing animation; whenever a user scrolls up the control provides the fabulous animating effect. According to the Android documentation, CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It makes the header image collapse into the Toolbar, adjusting its title size and it is designed to be used as a direct child of an AppBarLayout.

To add CollapsingToolbarLayout to your layout, see the following,

build.gradle

dependencies{
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
}

activity_main.xml

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
.....
.....
</android.support.design.widget.CollapsingToolbarLayout>

Android Material Design Collapse

Conclusion

Google developed material design to bring together the user experience from different Google platforms. Totally, material design made the user interaction smooth, simpler and greater intuitive. When you think about material design, it has so many technologies, which will only create the impression for users while using apps during interactions. The physical world is the very big part of the material design. So all in all, what do you think of Material Design in Android? Don’t you think it’s the best part to unite and enhance the user experience while using the Android application?

FacebookTwitterGoogle+Share
About Shwetha Sneha Kunja

Shwetha is an Android application developer who is not just working for her own betterment but also for the development of the organization she is in. She has a jovial personality that gives out a positive vibe for all those who works alongside her. She is also interested in listening to music, traveling, and reading novels.



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>