Today was a day to fix Navigation Drawer layout. Yet another hours spent adapting Google Android components and elements to Google Android Guidelines.
Everything started with struggle to log in to app. That was the moment I noticed ‘Facebook Log In’ button was multiline in my Genymotion emulation. So I fixed it and tested on different resolutions. Now it looks like it was designed:
I also fixed string resources and now it is ‘Log In…’, not ‘Login…’. After I logged in I started my Navigation Drawer intrigues.
First I fixed the font sizes of the top bar (red here). As there is no Medium weight supported by all devices I made the text that is supposed to be Medium 16sp and the text that is supposed to be Normal 14 sp. That gave the visual distinction needed.
Next I fixed the paddings of all elements. Now they match values Google offers in Material Design guidelines. Almost all the time these values are like “all paddings 16 dp” but not always, so double checking is never redundant. E.g. username and ‘Logged in with Facebook’ are not padded 16dp from bottom, but are centered vertically in the box 56dp high and padded 8dp from the bottom.
All list items are not padded 16dp on top and bottom, no, they are just vertically aligned.
That’s how it was supposed to be. Okay, I did it this way.
From left to right: font-size, paddings and icons set; icons colours (Google advices using different opacities for different situations on one coloured set of icons) and line added (line is needed to separate items with different logic, while first items show different sections, Log Out logs out) — I wrote my first lines of Java code to show that thing line before ‘Log Out’ item; all paddings and margins fixed to comply Material Design guidelines.
After all the coding stuff will be done, the Navigation Drawer will look as close as it possible to this:
I also saved the pictures to show Anton how My Videos section should look like and, what a pity, found no scripts to export Sketch App designs to bootstrap ready something.
I’d like all icons to be SVG, because that will provide normal antialiasing and resolution support on different Android devices. We decided that I will save all the icons and send them to Anton.
I also drew a couple of error messages as Petro asked but didn’t slice them into XML yet.
We’ve discussed with Yahel Parthenos the way he sees the Sessions section of the website. He got a lot of information and it contacts my thoughts much. I have to think about it for some time — we need to create something awesome but with easy first step that can be implemented really fast.
As we have almost all awesome bios for the team slide in the deck by Valentina, I am ready to start finishing the newest LIVE4 GoPro deck. But we lack John’s bio, so I reminded him about it.