My experience implementing Material Design — Project setup

Fernando De La Cruz
AndroidPub
Published in
4 min readFeb 28, 2017

--

MD Chess, my Droidfish fork

A few months ago I was kind of bored so I started to look for some Android games to play and kill some time, somehow I discovered this excellent chess game that has an old fashioned UI (it looks like an android 2.3 app) and not so intuitive navigation at some parts of the game.

I did some research about the game and I found that the author open sourced the game on github and it was on active development, adding features, fixing bugs, but he wasn’t improving the UI/UX, something weird because you know, the material design guidelines have been around for a couple of years and this game has been in active development for at least five years, I thought to myself that this was a good opportunity to practice my little-almost-nothing android development knowledge.

Here is the github repository for the original project.

Project setup

Droidfish github repo

The first thing I noted is that the project structure seems to be old as well, no graddle configuration and nothing of the android studio project structure. Basically and old eclipse project. I looked in the forked repositories for one with an android studio configuration/structure, I found a couple of them but were outdated by a few years. The best match I was able to find was Material Chess — ChessTastic by Avijit Ghosh whom were already trying to implement material design to the chess game.

Droidfish UI

I forked this repo and started to work on it. There were a few things that made me change my approach on this project. Comparing the code from Material Chess — ChessTastic with Droidfish I found that most of the code seemed to be outdated, there were classes on Droidfish that weren’t present on ChessTastic, ChessTastic only had english support compared to Droidfish original language support that is for 9 different languages, there wasn’t support for different screen sizes for the chess pieces, those chess pieces designs were great, but did not looked great on high resolution screens (chess pieces looked weird on my old nexus 7 2013 tablet).

I took the decision to get rid of all the code from ChessTastic keeping only the repo at github without creating a new one and then use the original Droidfish code. It wasn’t that easy to accomplish this task, but at the end I had the original Droidfish code working with android studio.

Material Chess — ChessTastic UI

After being able to run the project on Android studio I found what seemed to be a little issue, but it wasn’t that little, it was big enough to make the game unplayable when trying to use the Stockfish engine. The main feature of Droidfish is that the out of the box installation includes Stockfish, considered by a lot of people to be the best chess engine out there. This particular engine is build using C++ code so to use it with the Android game it is needed to ship it as a native library. To make this work I had to learn how to build native libraries using Android studio ndk tools, which having zero experience with it was really difficult to do. Being patient and trying different configurations helped me to get it to work. I even pushed a version of the game to the play store without the support to Stockfish because of this issue.

Then I had all I needed to have the game functionality on point and only then I started to modify the UI. The first thing that came to my mind was to get a minimal version with a few basic concepts of material design implemented: the color palette and some basic UI changes across the game.

Here is the repo I’ve been working on.

In the next part article I’ll cover the update on the navigation drawer, the toolbar and the color palette.

--

--

Fernando De La Cruz
AndroidPub

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