xwing
swapi-v3

Design & Code Exercise

Star Wars API

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.

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

swapi-category-cards

Categories browser

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...

swapi-search-results

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.

swapi-iso-categories
swapi-iso-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.

swapi_details_screens_array2_cropped

Color palette

swapi_color_swatch_group_accent
swapi_color_swatch_group_dark
swapi_color_swatch_group_light

Mocks

Color palette

swapi-catalog-evolution

Categories browser

swapi-detail-evolution

Details card

Selected works

Time journalProductivity app for iPhone, iPad, & macOS

OmnicellDesign library & interactive kiosks

Star Wars APIAndroid design & code exercise

Exercise goalsProduct design exercise

Starsky RoboticsUX research & design for autonomous trucks

Disney Movies AnywhereSenior Android Developer, Product Designer

DayframeAutomated photo frame for social media

HD WidgetsRanked #1 paid app in 2011

App StatsPlay Store tracking and updates

CloudskipperMusic player

Flash apps2000 - 2011

Elemental design1994 - 2003

lion-nav-dark

@radley  •  Twitch  •  Mixcloud  •  Github  •  LinkedIn