Star Wars API

Design & Code Exercise

This is an exercise demonstrating the latest Android architecture & libraries available as of Summer 2019.

The requirement was to build an app to search and display resources using the Star Wars API while demonstrating advanced UI/UX design & development.

View on Github

Overview

I was an Android developer for several years with most of my work focused on UI development using Java. I stopped just as Kotlin 1.0 was released and dependency injection was becoming popular.

This exercise gave me a chance to catch up. For the first round, I built it in Java using the latest libraries, including the Material Components beta announced at Google IO (2019).

For the second round, I rebuilt the app in Kotlin and MVVM, which significantly reduced overhead.

A practice project for redeveloping my Android skills

Design & UX

Sketch
Autocomplete best practices
Autosize text
Layout animations
Material components

Code

Kotlin
MVVM
RxJava / Retrofit
Dagger
Androidx
Glide
Timber

Categories browser

Category pages were organized using a view pager with a custom tab layout. Each page was a fragment with a view model: mutable live data and RxJava (composite disposable observables).

The thumbnail cards are built with Glide in an alpha Material card view with notched corner and auto-sizing text. Cards are arranged using a recycler view with layout animations and variable grid size.

Advanced search

Color palette

I put most of my effort into the search experience. The auto-updating results follow best practices for autocompletion.

For example, I used bold text to emphasize query matched words. Queries include an input delay, whitespace vs space detection, and minimum query length.

I also prioritized the results list based on full-word match, word position, and substring/position in both title & model values.

Finally, I applied recursive de-pagination using RxJava (composite disposables and disposable observers) because sometimes the best results would be on page 2...

Material 2.1 toolbar

I used a collapsing toolbar layout to add generous negative space at the top when the toolbar is expanded. It also made the search function less cluttered.

The search toolbar component is hidden and the toolbar reverts to the standard brand accent color with elevation when collapsed.

Detail view

I’m old enough to remember Star Wars trading cards and decided to do something similar.

I used some custom code to overlay the image over the collapsing toolbar. Stats are listed in individual Material cards based on category. The related lists at the bottom are horizontal recycler views.

The hero image has dynamic rounded corners, a white border, and a drop shadow. The hero title used auto-sizing text ranging from 32-80sp in 8sp increments. Episode numbers were converted to roman numerals.

Stat cards used auto-sizing text, 8-18sp with only 2sp increments. Link text was used for stats that had related resources.