Top 10 Material Design Libraries for Android
Material Design is all the rage now. Here are top 10 libraries you need to provide a complete Material Design experience across all apps, pre Lollipop as well.
These are in no order of priority.
1. Android Design Support Library
Provides APIs to support adding material design components and patterns to your apps. It adds support for various material design components and patterns such as navigation drawers, floating action buttons (FAB), snackbars, and tabs.
This library has come a long way from its initial release. It provides a ton of useful stuff that would otherwise take time to do. Animations like quick return can be done just by XML alone. I encourage devs to give this one a go before resorting to another external library for the same.
The good news is that everything that this library provides is pre Lollipop compatible.
Here are some of the Material Design components the library provides:
- Navigation Drawer
- Floating Action Button
- Toolbar (Flexible Space with Image Pattern, Quick Return, etc)
- Material Design Tabs
- Bottom Sheets
You can get started by adding this to your build.gradle‘s dependency:
You can check out the developer’s blog for an intro.
- Add a Bottom Sheet to your apps
- Implement a Toolbar Animation (Flexible Space with Image)
- Material Design Tabs Tutorial
- Easy Material Design Navigation Drawer
2. Circular Reveal
Reveal animations provide users visual continuity when you show or hide a group of UI elements.
[su_column size=”2/3″]This was introduced in Lollipop and is specific to that too. But this library allows us to have the same animation ported to previous Android versions too. Neat!
The advantage is the syntax and methods are exactly the same. So you can get started right away. My post on this should show you how it works.[/su_column][/su_row]
LIBRARY: Circular Reveal by ozodrukh
3. Floating Action Button (Expandable)
Floating action buttons are used for a promoted action.
[su_column size=”3/4″]While the Design Support Library does provide you a Floating Action Button (FAB), this one deserves a mention for it’s expand and collapse ability. You might have noticed this in the Google Keep app.
So if you need that expand ability on your FAB, this is the go to library. It’s can be easily customized and should get you up in a couple of minutes at most.[/su_column][/su_row]
4. Material Navigation Drawer
Yes we got this too, but here’s the difference.
Maybe you’re not satisfied with the Design Support. You want more, like the one on the right? Full control over the nav links, include a button or a switch there? Then this library by mikepenz is for you.
It includes full drawer customization. Includes sections, header with images, account switcher and dark/ light themes too.
LIBRARY: Material Drawer by mikepenz
5. Ripple Effect Backport
Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. The default touch feedback animations for buttons use the new RippleDrawable class, which transitions between different states with a ripple effect.
[su_column size=”1/2″]What would Material Design be without this neat effect? This too has been exclusive for Lollipop and above. Thanks to this library, we can do a similar effect on pre Lollipop versions.[/su_column][/su_row]
LIBRARY: Ripple Effect by traex
6. Lollipop Transitions Backport
Transitions since Lollipop have been overhauled, and I must say that they are brilliant. The shared transitions and the way each element loads into each new Activity is amazing. Unfortunately this yet again was Lollipop only, but the GitHub user andkulikov has backported the Transitions API from Kitkat and Lollipop for API 2.2 above.
LIBRARY: Transitions Everywhere by andkulikov
7. Bottom Navigation Bar
Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.
A relative new addition to Material Design’s arsenal. Akin to the TabLayout seen on iOS. This type of navigation is very popular on iOS apps.
In Android, it works as a regular Bottom Bar on mobile. Switches to a side navigation on Tablets. This is really neat, and I’m excited to see how developers put it to good use.
Its ideal for apps that have only three to four navigation screens. Makes sense to use Bottom Navigation, instead of a Navigation Drawer then.
8. Super RecyclerView
While not a direct feature of Material Design, RecyclerView is replacing ListView, as something more versatile and powerful. Super RecyclerView is RecyclerView on steroids.
As stated by the creator “This is an attempt to make RecyclerView easier to use.”
It has a lot of features you might otherwise spend quite a while making. Some of them are:
- Swipe to Refresh (Google style)
- Swipe to Dismiss
- Infinite Scrolling
- Sticky Header
9. Circular Image View
A circular image is very popular and Material Design has pushed this even further.
But doing this in Android was never that straightforward. Thankfully, many libraries have made this dead simple to implement, yet versatile in nature. Such a library is one very popular library that has good draw performance as well.
10. Material Shadows
Shadows help define elevation of views. This is fundamental in the concept of Material Design. Sadly Lollipop uses a separate Render Thread to handle the UI, making such visuals not possible on pre Lollipop.
However, GitHub user h6ah4i has managed to mimic this for API 9+ by using a 9-patch shadow image to replicate the feel of elevation for varying depths.
These are MY top 10 Material Design libraries for enhancing the experience for my users. The recent Design Support Library by Android has added a LOT of features for our apps. But there are a lot of third party libraries which have made development a breeze. Like the ones above.
So what are your favorite Material Design libraries? Did I miss anything? Let me know in the comments below.
Product Designer who occasionally writes code.