Home   Courses   Blog   About

Material Design Introduction for Android Beginners



This is the first part of the Material Design blogs. The introduction is a description of what Material Design is all about, how it was structured and how it behaves. We will show the implementations of components and Material Design in a separate blogs.

I must say, that I love Android and Android Development, but I wouldn’t say that Google explains all the topics well. Material Design (aka Material) must have a special place in Google because it is explained in great detail. Not only from a technical perspective but also what to do, what not to do and what is the meaning behind it. After reading our intro for beginners, take a look at their documentation as well, since theirs is a more in-depth explanation for developers and designers.
Material Design enables easier app development with a unified design, which users are used to. It is considered to be a guide for developers and designers to help them start developing their apps quicker, get an elegant looking and easy to use results. Material is not only a design but also a set of rules and behaviours that an app should abide by. What does this mean? Material is a set of tools/rules that will enable you to make a good-looking app without the immediate need for a designer. For beginners, this is perfect because you can make a beautiful app on your own.

Platforms for Material Design
Material Design is not only designed for Android, there is also an iOS version (you can check all the subtle differences in their comparison article about Platforms) and a web version as well. For example all Google tools online now feature Material Design, so we are quite used to using it. Having all platforms at our disposal also means, that using Material will make our whole environment look more unified.

Parts of Material Design
Material Design has quite a few parts and let me tell you a little bit about all of them. 

  1. Material properties
    These are a set of rules and design features that make Material Design come to life. When I was researching, I found a great video, that explains the birth of Material Design. It is fun to watch because you find out, why there are shadows and why all elements seem like they are hovering. It is all because they wanted to mimic the behaviour of paper on the screen, everything should look like a carton/paper made object. So each icon, each button should feel like you are interacting with a paper version of it. Try it yourself, cut a few buttons from paper and play with them. If you want to see professional designers play with paper and design apps, check the video above.
    You can also check an in-depth explanation at: https://material.io/guidelines/material-design/material-properties.html#

  2. Motion
    As Sharon Correa and John Schlemmer explain: “Motion is essential to bringing digital products to life. Something as simple as tapping a card to expand and reveal more information is made better by fluid animation. New content is introduced, shared elements move into their new position, and the user is given guidance with a clear focal point.” This means that motion will help the app look alive like the user is interacting with real objects.

  3. There are 4 main principles, that motion covers:

    • Material Design is Responsive
      Material is full of energy. It quickly responds to user input, precisely where the user triggers it. This way the user always knows something is happening, that the app is working and the user is assured that every interaction will have a reaction.
    • Material Design feels Natural
      Material design is inspired by natural objects, and it tries to act like them. All the animations try to enforce natural rhythm with ease-in and ease-out adoption. This way animations look more like the real world, not to fast or too slow, but natural. For new users of Material this is hard to implement, so don’t give up after your first try. Working on animations is fun, play with them until they look as natural as possible.
    • Material Design is Aware
      Objects are aware of each other, that means they can bump into each other, they can merge, they can split, they can interact. For “send mail” the whole group of elements can fly off the screen forming a nice visible effect, like a flock of birds in the summer sky and return to element, that shows completion of sending the mail.This is a mastery level of Material and fun to do if you have animator or designer at your disposal.
    • Material Design is Intentional
      Sligh movements can shift users focus to elements that need actions, like icons that are dancing for us, making them more visible, when we need an action. Imagine an icon for a clock, when a meeting is about to start, reminding us to leave the office and go to the conference room. Larger motions can make us aware of new more detailed descriptions. In a way, every motion has the intention to make us more in contact with the app.

  4. Styles
    There is a lot of help for us in the styling department of Material Design. You will love the colour tool (Color tool), that will help you pick a colour scheme for your app. This means that you will have all the shades and different colours needed for the whole app, buttons, navigation bar….

    You will see that you have a lot of icons prepared for you to use. And I mean a lot. Almost everything you can imagine is there for you in the form of an icon (Material icons). You can use them small or large because all the icons are in vector format, so you can really play around.
    The extent to which Material Design is specified is immense, that can be seen in the topic Writing. They have also specified how you should write texts on screen, how long texts should be, what kind of tone you should use and how to address users. The same goes for images as they explain in detail why and how you should use images.
    Last on the style list is Typography. I must say, that this was an enigma to me until I worked with a designer for a while. And without changing practically anything in the design he was able to change the app entirely using only a different font. Roboto and Noto are fonts for material design, as far as these fonts go, I don’t love them, but I don’t hate them either. But for design as a whole, it just makes sense to encapsulate it all using TypeFace. It will make a lot of difference if you use it. Try another font, and you will see the difference for yourself.

  5. Layout
    Material design is based on paper, to mimic the real world, that’s why physical properties of paper are translated to the screen. A lot of structure comes from paper design as well, like grids and margins. But all in all, it is like stacking paper structures on a background.
    There are a few pointers we could give you. For example, use the dp (Density-independent pixels) units for everything linked to the layout. For fonts, you should use sp units (Scalable pixels).

    • Margins
      You should be very conscious about margins and borders; there are rules for all the elements on the screen. The screen edge left and right margins should be 16dp, this leaves a lot of room for screens to feel free and open. For example content like text, after an icon should have a left margin of 72dp from the border of the screen, and all the horizontal margins on mobile should be 16dp. There is a whole science to it, and it is best if you always check out examples on this link. Since you are learning, try setting up a screen with margins that are instructed by material design and then reduce them to the bare minimum, you will see the difference, the screen will just feel like it is hard to use, that there is too much information on it.
    • Structure
      The Layout also describes how to structure your app. The app should have a permanent app bar and floating action button. This means that the user can access all the main actions almost all the time. For you, as a developer, this means that you need to think about what those features are really carefully since they will follow the user all the time. The bottom bar is optional, but most of the users will find it useful, so adding it will make a difference. Material design has two types of menus, side nav and right nav. Side nav covers all the elements on the upper part of the screen, but right nav does not go over the status bar. An app bar can also have action icons and a menu icon.

      The Layout of Material Design also describes how to resize your screens in order to have the best responsive UI and what to do in the case of the screen being split into two parts. There is a lot to learn about bringing a design to life with layouts, but you will learn with practice, and every new screen you build will be better, and you will understand material design even more.

  6. Components
    The whole introduction was made just for this part and for beginners, Components will be more exciting since you will see immediate results by using them. Components are the actual elements we will put on the screen of the app. And there is plenty of them.

    These are just a few components you can use:
    • Bottom Navigation
      • Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. These are buttons you see at the bottom of the screen with icons. According to the number of buttons used, buttons will have text as well.
    • Bottom Sheets
      • Bottom sheets slide up from the bottom of the screen to reveal more content. A good example is a sharing sheet or when you want to open a file and you get a list of apps you can open it in.
    • Buttons
      • Raised Button
        • A rectangular button with a background that is floating in the material style.
      • Floating Action Button
        • The round button on the right side of the screen. Usually this is the button that links the whole app together.
      • Toggle buttons
        • Toggle buttons may be used to group more buttons with different options like the alignment of a text, where 3 buttons are linked to form all alignments.
    • Chips
      • A nice example of chips are Chips that help you input a sentence faster, so that the spelling is correct. Chips can be used to choose a filter for a list of products or for tags.
    • Card
      • A Card displays information about an object, like for travel this could be departure information for an airport.. Cards make a complete set of data about that object in our case about a flight.
    • Tabs
      • Tabs are buttons like segments below the App Bar or title, like a bottom navigation they change the scope of the whole screen. In Google Play tabs are used to switch between music, movies...
    • Snackbars & toasts
      • Alerts and dialogs that briefly show info on the screen. We show how to use toasts in our Calculator course. Snackbars enable a  user to take action, for example a user can open a product screen, when a snackbar is shown. A Toast does not allow a user any action and is not pressable.
    • Text Fields
      • A text field with an animated floating label and other Material Design features.
    • Toolbars -  App Bars
      • This is the top part of most apps. Games are type of apps that do not have an App Bar and have internal navigation. App bar usually shows the name of the screen, product,... In an app bar you will also find the Menu button and actions for that screen (those three vertical dots). 

Onboarding, Feature discovery, Patterns, Accessibility
When a user starts to use an app, he must get acquainted with how the app functions. Material Design has an answer for that too. There are detailed explanations on how to present the app to the user for the first time. You will see three models of an app introduction and you can pick the best one for your app. We for example like to do it with a few intro screens.
We can also read about the formatting of the dates, what to display when and how to format it according to a time frame. I love the way they explain contrasts and the way it benefits people with sight disabilities. You also have instructions how to alert the user about an error, how to get permissions,... These are all beautiful descriptions and you will need all of them to complete the app and make it as material as you can.

What are good examples of usage
The best source for finding good apps would be Material Design Awards where you can see all the great apps featured. We have included links to winners of last year awards. Check them out and you will see that Material Design can be redesigned to look a lot different than other apps but still sticking to all the rules.

Awards 2017

Brand Expressiveness: Blinkist


Interaction Design: Eventbrite Organizer


Platform Adaptiveness: NPR One


Innovation: momondo