Material Design — Android

Material Design was first announced at Google I/O in 2014 and is fast becoming the standard of how apps for both mobile and the web should be designed.

Until Google I/O 2015, there was really no support for developers who needed to create backward compatible Android apps that utilized material design. The only options available then were the stand-alone libraries developed for the different components such as the Navigation View and the Ripple view effects for buttons.

The Android Design Support Library has now been released and it comes with APIs to implement the Snackbar, Navigation View, Floating Action Button, Toolbar and the EditText. All Google Apps such as Inbox, Gmail, Docs, Slides, Sheets, Maps and Play Music have already been redesigned to include Material Design. Some other examples of apps that have been redesigned are Runtastic and Pushbullet. These apps are a delight to use and offer a great user experience.

Truppr Mobile App

However, I have been on the lookout for apps developed in Nigeria that maximizes the use of Material Design. I haven’t found a lot yet but the Truppr Mobile App particularly stands out. I was curious to find out how an already existing indigenous app would look with Material, so I took the liberty of redesigning one. A quick scroll through my phone for Made-in-Nigeria apps led me to Konga’s mobile app. This was just a fun, weekend project, and kudos to the developers who have done a great job of building the existing app. It in no way undermines the system on ground already, but only seeks to experiment a bit with it.

I worked on four screens, and all of the components in the mockups were created using only CorelDraw. The current design is on the left, while my experimental design is on the right.

  1. This screen shows a redesign of the Navigation View where the different categories offered by the app can be selected.
Material Design Navigation View

2. This screen shows the implementation of a Floating Action Button for a list of items. I persisted the Navigation View on the left because I thought that since it is a shopping app, the users are likely to change categories frequently. Hence, they’ll need to be able to make the switch as fast as possible. The only other app I’ve seen with a static Navigation View is Gmail. I’m not sure if this component is provided in the Android Design Support Library though.

Material Design Floating Action Button and Navigation View

3. This screen shows the implementation of an AlertDialog for the selection of price ranges. A Floating Action Button, static Navigation View and CardView are visible in the background.

Material Design Tabs, Cards, Floating Action Button, Navigation View and AlertDialog

4. This screen shows a redesign of the Tabs. It also displays each of the specific items in a Card View and displays a Floating Action Button too. The Navigation View is still persisted.

Material Design Tabs, Cards, Floating Action Button and Navigation View

These are all I’ve got. I only worked on the screens that I thought would benefit most from a redesign. I’ve collected some resources to help you get started. Here is a very comprehensive read about the concepts surrounding Material Design. You’ll find information about the Android Design Support Library here. Tutorials to help implement Material Design in your Android Apps can be found here and here.

You made it! You just unlocked the Material level! :D

If this post made sense in any way, please “Recommend” it.