Michael Pehel



Yash Prabhu of DramaFever, a Warner Bros. Company, shared her perspectives on Material Design and how developers can use the guidelines to improve their app's look and feel. Yash was kind enough to submit some written answers to the questions too, in case you don't have time for the full video.

AnDevCon: For those who don't know, what is Material Design, and what is it's place in Android development?
Yash: Material Design is a design language developed by Google and introduced at Google I/O 2014 as part of Lollipop or 5.0. The inspiration for it comes from the real world - paper and ink, elevations and shadows and motion. For those of you who are familiar with the card pattern as seen in Google Now, you would see that the card is slightly elevated (which is demonstrated by a shadow) and the card rises or elevates to your touch indicating that an input event occurred.  Material Design also makes use of bold graphic design inspired by print design like usage of grids, typography, space, color and imagery. Material Design is not just applicable on Android, it's guidelines are applicable on Web and iOS as well. 
Prior to Material Design, there weren't any standard Android design guidelines other than using the Holo theme. Android apps were mostly ports of iOS apps and they looked skeuomorphic like how iOS apps looked in the early days. Skeuomorphism is a design concept where the design resembles the physical world, for example a calculator app or a compass app. It did not work well on a touch screen. A theme called Holo was introduced in Honeycomb 3.0 and refined in JellyBean and Kitkat and users slowly got used to the idea of their Android apps looking a certain way. 
Are there any limitations, and is it tough to adhere to the guidelines?
It's not tough to adhere to guidelines. The Android team provides the Appcompat library and Design support libraries so that you can support Material Design back to v7 or Android 2.1. The design support library provides widgets like Coordinator Layout, Appbar, Navigation View and so on. The appcompat library provides widgets like card view, recycler view, palette api and so on. As you play around with Material, you will discover that there are many features that you can implement. You need to be careful not to go overboard with animations and transitions though as too much of it can result in a jarring user experience
How can it help in development across different devices and form factors?
Material design suggests the use of responsive layouts so your app can adapt to any screen size. When you rotate your screen between portrait and landscape modes, you need to be aware of what breakpoint your UI or layout should change. Your app's layout would probably change in portrait vs landscape mode. The guidelines suggest using 480, 600, 840, 960, 1280, 1440 and 1600 dp as your breakpoints. For example, if you're on a nexus 5 tablet, the width is 360 dp and height is 640 dp. In portrait mode, you can show say a grid of four columns and in landscape mode since the width is now 640 dp which is above the breakpoint of 600 dp, you can show 8 columns.
How does motion play into Material Design?
Material motion makes sure that your app has responsive UI. Elements move like they would in the real world. For example, a button entering and exiting the screen can be made to gradually ease in with the right speed, duration and curve instead of moving in a linear fashion.

What would you say to developers that are afraid that if they use Material Design their app won't look distinct?
Material design guidelines are exactly what the name suggests. They are guidelines. You don't have to use all of the guidelines like typography, icons, images, bold color etc if you fear that your app wouldn't look distinct. For example, if your app is a news app, you would focus on the typography. If your app is a photo sharing app, you would focus on imagery. Make sure you are using some guidelines and if need be, add some more. The guidelines are constantly evolving and you will have to update your app to support them if you think it's necessary. On Android, you can use bold colors to define your brand color. For example, in Youtube app, the primary color is red. In the Inbox app, the primary color is blue and the accent color is red. You can use colors to define your own brand.
What are some of the resources that I can use to get started?
  • Udacity course on material design implementation for android developers
  • Material Design documentation on design.google.com
  • Material Design documentation on developer.android.com/design/
  • Code Path
  • MaterialDoc.com
  • Uplabs
  • Keyline Pushing app 

See Yash speak at AnDevCon Boston in her class Material Design implementation for Android Developers



Related Search Term(s): Material Design, Interviews

Create, Design, Develop and Connect at AnDevCon D.C. 2017!

Thoughts? Leave a comment: