Genius on Android: Typography and material design

The last few months have been an exciting rush of designing and building our recently released Android app—a brand new app, built from the ground up with the principles of material design. For our initial version, we designed a simple, clean UI with Genius’s bold brand colors.

That’s because the real showcase was our content—2 million song lyrics and millions more annotations from users and artists, full of rich content like quotes, in-line annotations, links, embedded videos, images, and (of course) GIFs.  We knew this content needed to render quickly and seamlessly now, and in the future, no matter how it was displayed—in a separate pane, in a complex tablet layout, or interposed with other UI elements.

To accomplish this, we used a custom TextView and custom Spans, an object that stores appearance information about a String.  Our video thumbnails, images, and GIFs are displayed by slicing this rich text and inserting it with ImageViews into a list.

I spoke at Droidcon NYC on August 28, 2015 about achieving the effects of professional print typography in Android’s native TextView, from essentials such as line spacing and custom typefaces to fully custom effects, using real-life examples from the code base of the Genius Android app.

If you’re attending Droidcon London, you can catch an expanded version of this talk, or chat with me in person, October 29-30.

Share on: ,

Next post

Introducing the Genius API!