Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Material Design for Android

DZone's Guide to

Material Design for Android

Google developed Material Design to bring together the UX from different Google platforms. It makes the user interaction smoother, simpler, and more intuitive.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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, the best images, nor 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 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 Material Design makes the Android application’s graphic layout into a 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 and other screens. 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, Material Design is straightforward, clear, and brilliant. Because of these dazzling features, it has become imperative for a broad number of gadgets.

Goals of Material Design

  • Material Design aims to design the application UI like a magical paper, things that appear like real, appreciable objects.
  • Animations have been pulled to make the experience more lively by safeguarding that the maximum amount of content is always visible.
  • With Material Design, Google is 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, from 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 applications, it can be a menu, button, or image.

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. 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

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.

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.

Android Material Design

Dimensionality Supports Interaction

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

Android Material Design

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.

Android Material Design

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.

Color, Surface, and Iconography Highlight 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.

Users Introduce Alterations and Changes

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 take 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 Material Design

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 the experience without collapsing the continuity of it.

Motion Provides Meaning

Motion is meaningful and convenient. It helps focus attention and preserve continuity. The following elements assist in material design for apps of Android Version 5.0 (Lollipop) or higher.

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 DesignAndroid 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 the RecyclerView widget in your layout, necessary attributes are 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

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" />

14build.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 your own background color for floating button using app:backgroundTint. The size of the button can also be defined by using the app:fabSize attribute.

15

Collapsing Toolbar Layout

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>

16

Conclusion

Google developed Material Design to bring together the user experience from different Google platforms. Material Design makes the user interaction smoother, simpler, and more 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 a very big part of Material Design. 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?

Please visit : http://vmokshagroup.com/mobility/

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
android ,app development ,mobile ,material design ,ux

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}