Learning about Material Design

Learning about Material Design

I briefly talked about the module in my Nanodegree centred around Material Design in one of my previous blog posts. The module was called “Make Your App Material” and the main goal was to take an app which already contained much of its functionality and change the visuals to follow the material design guidelines. Here is a link to my Github page for this project.

Here is Google’s promotional video to give you an idea of what Material Design looks like:

It’s all about bold design and colours, tactile layers and dynamic and instructive movement. The app that was supplied as the starting point was called XYZ Reader and looked like this:

XYZ Reader Before

Looking at the current state it’s pretty obvious that a lot of things need changing before it can be considered an attractive app.

The most obvious aspect is probably the colour scheme (grey on grey with a murky green highlight).

We also need to change the photo’s to fill the area instead of showing up thumbnail size in the top left corner.

After that it would be useful to take a look at the font as a crisp and readable font can make a world of difference to an app (especially one based around reading).

It would also be nice to have optimised layouts for landscape views and tablet views.

Finally some animations will make the transitions between the list view and the detail view a lot more pleasing to the user.

Colour

I chose a colour scheme based on the logo provided:

The launcher icon for XYZ Reader

In Material Design you usually have a primary colour, a primary dark colour and an accent colour (which should highly contrast the primary colour). It is good practice to create a colors.xml file that holds all your colours and then to refer to them elsewhere in your code. This way if you need to change the colours you only need to change the xml file, not the code.

Here I use the colours to set the theme of the app:

The colour and style xml files

The colours are set in colors.xml and then referred to in styles.xml. The app them applies the style as its theme.

Fonts

I decided to use the Roboto font which is a good all rounder and should be readable on lots of different pixel densities. To change the font I have to add the .ttf asset files to the project and then when the app is running these assets are accessed and then applied to the relevant text views:

Setting the fonts

Layout

Layouts are mostly defined in XML. You have to combine views in a hierarchy so that they display in the correct order, overlapping properly or splitting the screen the way you want it to. When making the layouts it’s important to make sure it will look good on any sized phone or tablet in portrait or landscape. You can do this by creating folders with size qualifiers:

Folders for different layouts

In this example you can see a folder for landscape and a folder for when the smallest width is 600dp (Density Pixel). The regular layout folder is for anything that doesn’t fit into the other qualifiers. When the app detects a device or device orientation that matches one of the qualifying folders then it loads the XML files from that folder instead of the default one.

Motion

For this project I decided to try my hand at the Shared Element Transition. I talked a lot more about this in my previous blog post called “That Shared Element Transition…

When the user clicks on one of the articles in the list view then the image for that article should expand to the size and position of the same image in the Detail View. This creates a smooth and interesting transition between the two fragments.

Other touches

Some other aspects of the design that were implemented was using a coordinator view for the List View so the toolbar would scroll with the list until it reaches a certain size and then the material would lift up to allow the list to pass underneath. The coordinator view seems very powerful and I’m looking forward to playing around with what else it can do in a future blog post.

There is also a parallax scroll used on the detail page which gives some visual interest. Here is what it all looks like in comparison with the originally provided app:

Leave a Reply

Your email address will not be published. Required fields are marked *