My experience implementing Material Design — Colors, toolbar & navigation.

One of the icon drafts

Hi everyone and welcome back! It is time to continue sharing with you this journey I’ve made in these last months.

The first part of this series is here.

Note: Currently I’m working on implementing a new library for the dialogs (Droidfish code is using deprecated methos for dialog generation) and redesigning a couple of components based on user comments. So, what you see here may be different from what you can see if you install the app from the play store.

Color

Current icon wih remanents of the old color palette

In a project that I was working with some friends for an open stack hackathon we used a color gray palette so I liked it, I intended to use this color as the primary palette for the app and use an orange and after a yellow colors for the accent values.

I made a couple of icons using these color, like the one you can see at the top, using the primary color (normal and dark) and the accent color with a darker accent color for the shadow. I used a different model for the pawn in the icon which was different from the one you can see here. I changed it because it didn’t look well with the new chess pieces I added, but that’s an story for a future post.

So comming back to the color palette. For all the material design values (colors and metrics) I used this library which I highly recommend, with this library you don’t need to setup the actual values from the material design documentation each time you want to change something, instead you only reference the name of the value that you want to use.

It is easier to change the values with this library

Since I started to use the android medium app I liked how they use the colors black and gray, which made me to decide to use that palette instead of the blue gray. Currently I’m using the color red for the accent color… But I don’t like it so much, if anyone has any suggestion for the accent color please let me know.

Here is the toolbar and the system bar with the primary colors of the app.

Droidfish support different theme colors, which I adapted to something close to those original colors but using the material palette.

Droidfish set the themes colors using strings values hardcoded…

Each one of the themes sets a different color for a lot of different components, such as the arrows (there are six arrows, each one with its own color), selected square, the chess pieces (I think this is for the previous pieces wich were created using a font) and some other things. At the moment I decided to change only the color of the two first values for each theme, meaning that it would change only the color of the squeares at the board.

Also Droidfish originally was changing all the colors (even those on the system bar and the toolbar when I added it), I changed this behavior so I can keep the primary color palette on the toolbar and show a unique identity for the app.

So you know, I keep some consistency with the app toolbar in each theme.

Toolbar

Here comes something interesting…

Where is the toolbar?
There it is! But wait… You’re not Droidfish…

There is no toolbar at Droidfish, ChessTastic has one, but as you can see there is no clock and there is no chess engine name. How can I use a toolbar and keep the clocks and the engine name?

That was simple, I rearranged the layout. Something that I didn’t liked from Droidfish were the actions buttons used in the same space that shows all the movements by the player and when the computer is thinking.

Looks weird and a little invasive, also, no material design icons there

I liked how ChessTasstic used two of these buttons at the toolbar and I kept that approach, for the other actions, I moved them to the navigation drawer. I created a new view for the chess engine name and the clocks and I put that view below the board and on top of the list of moves.

My approach to keep the engine name.

The creation of the toolbar was easy, I created a new activity on android with a toolbar and used the created classes/layouts as a base for my new toolbar.

Now I have a reusable layout for the toolbar, a layout that includes this toolbar and the content of the screen (the board to play and the board to edit are the two screens that uses this toolbar), I set the content of the toolbar on each activity, in this way I don’t use the undo/redo buttons on the edit screen.

Easy, don’t you think?

Navigation drawer

Droidfish has two navigation drawers and ChessTastic has one, but…

Droidfish left navigation drawer
And the right drawer
ChessTastic only navigation drawer

The thing with the Droidfish approach is that is doesn’t have something to signal that there is a navigation drawer in both sides, only the initial tour tells that, but without that you can not know that there is something there.

ChessTastic has the hambuger icon that transforms on the arrow, but is not following the material design guideline at all, the drawer is below the icon instead of being over all the layout.

My approach is a bit different

I did a kind of merge between the two approachs from Droidfish and ChessTasstic and following the material design guidelines, I kept only one navigation drawer but without icons, my initial approach was to include icons, but I decided to go without icons at the moment. Also I grouped the actions on the drawer in small groups of related actions, first group for the game options, second one for the files that can be loaded into the game and so on. At the top I’m including the app name and the app icon, this, at the moment, is a placeholder, why? Because in the future I want to implement the play games services, my intention is that users can log on with their account and set up a user photo (or it may be taken from their google account) and show the players name. More about these ideas in a future post.

And now?

So far I’ve shared my thinking process for some of the decisions I’ve made about the UI, there is more to come. In the next post I’ll show you more about the icons used for the chess pieces, the app icon, some other parts of the UI that weren’t so consistent and how I changed them.

I hope you liked this, if there is anything you would like to know more about tell me and I would try to expand it more. Also you can send me an e-mail with questions, comments or whatever you want to say me, I’ll read it!

Fullstack ninja dev @noteninja, yes, that is the actual name