Updated 8 February 2016
Google’s material design brought some of the new features in layout designing to make android app attractive. But, what is material design?
Material Design was introduced in Android Lollipop version. In Material Design lot of new things were introduced like Material Theme, new widgets, custom shadows, vector drawables and custom animations. This is a new design language that gives design guidelines for Android apps and apps on other platforms.
Build dynamic views using new widgets like:
Recycler View
Card Views
NavigationView
Floating Action Button (FAB)
Snackbar
TabLayout
and many more
Use Palette API to generate color schemes that you can use for text or background views.You can create delightful interactions using the new animation APIs.
Here are some Components provided by material design library:
1) Recycler Views
The RecyclerView widget is a more advanced and flexible version of ListView. This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views. Use the RecyclerView widget when you have data collections whose elements change at runtime based on user action or network events.
1 2 3 4 5 |
<android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent"/> |
2) CardView
CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look across the platform. CardView widgets can have shadows and rounded corners.
To create a card with a shadow, use the card_view:cardElevation attribute. CardView uses real elevation and dynamic shadows on Android 5.0 (API level 21) and above and falls back to a programmatic shadow implementation on earlier versions.
1 2 3 4 5 6 7 |
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" card_view:cardCornerRadius="4dp"/> |
3) NavigationView
The Navigation Drawer is a common component in Android apps. It is one of the ways to build a navigation hierarchy on Android, the others being Tabs and Spinners. Implementing one was never a quick process, but now with the Design Support Library, its implementation is much simpler.
The Navigation View will receive some of the parameters, and optional layout for a header, and a menu that will be used to build the navigation options. After that, you will only need to add a listener to capture selection events.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- Add Views --> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/my_navigation_items" /> </android.support.v4.widget.DrawerLayout> |
4) Floating Action Button (FAB)
Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Floating action buttons come in two sizes:
Default size: For most use cases
Mini size: Only used to create visual continuity with other screen elements
1 2 3 4 5 |
<android.support.design.widget.FloatingActionButton android:src="@drawable/ic_fab" app:fabSize="normal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> |
5) Snackbar
Snackbars provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on the screen and only one can be displayed at a time.
They automatically disappear after a timeout or after user interaction elsewhere on the screen, particularly after interactions that summon a new surface or activity. Snackbars can be swiped off screen.
And the duration should be LENGTH_SHORT, LENGTH_LONG or LENGTH_INDEFINITE. When LENGTH_INDEFINITE is used, the snackbar will be displayed indefinite time and can be dismissed with swipe off.
1 2 3 |
Snackbar snackbar = Snackbar.make(coordinatorLayout, "Welcome to Webkul", Snackbar.LENGTH_LONG); snackbar.show(); |
6) TabLayout
TabLayout provides a horizontal layout to display tabs.
Population of the tabs to display is done through TabLayout.Tab instances. You create tabs via newTab(). From there you can change the tab’s label or icon via setText(int) and setIcon(int) respectively. To display the tab, you need to add it to the layout via one of the addTab(Tab) methods.
1 2 3 4 |
TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3")); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:gravity="center_horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" /> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> </LinearLayout> |
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.