My experience implementing material design — Chess pieces
Once again I am here writing about my travel implementing material design on the chess game. The main focus on this was to have vector drawables instead of png (or webp for the new features shipped with AS 2.3), in this way it would be easy to change colors and even design whenever it’s needed based on the feedback I’ve been receiving, also I don’t need to worry about having different images for each one of the supported resolutions, the vector drawables will scale as needed. For all of them I kept a size of 24dp so it won’t have issues fitting inside the squares of the board.
Main identifier and shadows
I wanted to give them a not-so-white color, I decided to go once again with the gray palette, for each one of the pieces there are some areas that would be the identifier color for the chess player (depending on if it is withe or black), for all the pieces the bottom part will be an identifier and depending of the chess piece it can have a main identifier at the middle of the piece and at the top. As for the white pieces, for these parts that can be considered as the main identifier I used the closer color to white that can be found on the palette and a grayer color for the shadow, for the parts that are not considered part of the main identifier of the chess piece I used a grayer color that doesn’t match the two previous used colors.
The same principle was applied for the black pieces… Kind of. For the main identifiers of the pieces I used the closest color to black for the shadows, a clearer one for the part that can be considered as receiving the light, for the non identifier parts I used an even clearer gray from the same palette for the shadow and the part receiving the light.
Basically, all pieces will have exactly four colors, two for the main identifiers and two for the non identifiers parts. Initially I wanted to share the same color for the non identifiers parts for either set of pieces, black and white, but that was causing some confusion between the pieces, if the set is black, the pieces should look dark and not kind of a shared gray with the white set.
One consideration when selecting the colors for the chess pieces is that the colors should not match the colors used by the themes when painting the board squares, this could cause an annoying situation with the original and gray themes, on the original theme the squares are dark gray, so I had to be careful to use the correct colors for the chess pieces, if I used at least one of the same colors used by either the dark or white square the definition of the piece shape would have been lost and would have looked a bit weird (for example, the bright sight of the main identifiers could be mixed with some of the squares background and the chess piece would have looked incomplete), this also happened with the gray theme and the withe pieces.
Another issue that came up with the received feedback was that the queen and bishop pieces looked like the same piece, if you notice bot are almost the same, with a couple of different things, first, the bishop has a rounded top shape and the queen has some kind of cross (that can be interpreted as the crown), second, the bishop has a main identifier in the middle of the body piece, the queen does not have it. My quick solution for this was to give an almost black color to the crown, for both the withe and black queen. I used this same approach for the king even if I did not receive any feedback with that chess piece, why? Because I wanted to keep some consistence with the color of the crown for these pieces.
You can find the vector drawables here in case you want to check them, I need to say that I did not created them originally, I looked for some free svg chess flat icons, they were a lot different of what I currently have and I had to make a lot of modifications for this final result.
The future
Currently I am working on replacing the old dialogs that were using a deprecated API, this, along with another couples of changes I made seems to have caused a lot of broken features on the game, I think I’ll be kind of busy working on fixing those things before posting again, I’ll try to post again here with another changes I’ve made across the game or even with something no related to this app at all.
