The first ever Android Essence app review is for Quotes, built by Elisha from SimpleDeveloper. The quotes app allows users to record any thoughts they have or quotes they have heard from others. It is a great way to keep track of deep thoughts, ideas, motivational quotes, and anything else. As we go through the application and pick apart the UI, we’ll touch on the functionality of the app as well.
Arguably the first thing people will notice about your app are the colors. Before processing any information on the page, the colors will hit the user’s eyes. Quotes uses beautiful Material Design colors; Cyan as the primary color and amber as the accent. If you noticed above, the app uses the 500 level cyan for the AppBar and scaled up to the 700 level for the status bar. This is a great use of the Material Design palettes. Along with that, the text colors were chosen well to make the app very readable; I am very impressed by the color scheme.
I used the Keyline Pushing application to inspect the padding and margins on this application. This is a great tool for developers as it overlays in 8dp grid over your screen to help you ensure your application is aligned according to spec. Let’s look at the My Quotes page:
The design specs will tell you that the Cards should be at least 8dp from the edge, and like most elements the margins should be a multiple of 8dp. In this case, the developer chose to use 16dp margins and I think this was a great choice. If they were closer to the edge it would create unnecessary white space, while moving them in helps remove white space on the card, without creating an unbearably large margin.
This developer impressed me by making sure the margin was 16dp on all four sides of the card, and not doubled in between them. Typically this is achieved by adding 8dp padding on the RecyclerView, and 8dp margin on the CardView to provide consistent margins.
Once again, excellent tactics were used in regards to the text in this application. On both the main screen and the quote list, the quote text appears larger than the author to emphasize the importance of the quote itself. The header on the main screen is enlarged even more, and bolded, to clarify the purpose of that screen. Great work by the developer to make use of sizing and styling on the text to guide the user through the application.
What To Watch For
While picking and prodding this application I found a couple of things I would recommend the developer consider changing. The first is the
colorPressed state of the FloatingActionButton. When I clicked on this button, I noticed that it went white, and no longer provided a good contrast against one of the background surfaces:
As an alternative, the developer may chose to change the pressed color to a darker amber, or increase the elevation on the button when it is pressed in order to indicate an action has occurred.
Another mistake was adding a hint that was too long for a dialog’s EditText when adding a quote, so the hint runs off screen:
To work around this, the developer could find a way to wrap the hint text, or come up with a shorter hint message. I would recommend the later route.
I am deeply impressed with this User Interface. It is simple to follow, and can be used by anyone and requires little to no explanation. Bright, vibrant colors encourage the user to record uplifting thoughts that they have, and provides a great way for users to look back on how they felt in the past. The developer also made use of the newer UI components such as a FloatingActionButton, and used elevation throughout the app to create surfaces that subconsciously guide the user through the application.
What do you think of Quotes? Did you find any benefits that I overlooked? Let us know in the comments, and head to the Google Play store and download Quotes today!