xwing
swapi-v3
ANDROID DEVELOPMENT EXERCISE

Star Wars Android demo

This was a code-focused demo for a potential designer/developer role. I built an app that could search and display Star Wars resources using the Star Wars API.

Context

The app was built in three phases:

  1. Simple Android development
  2. Advanced Android architecture and UX development
  3. Redesign & Kotlin rebuild for my portfolio

A practice project for redeveloping my Android skills

Code
  • Kotlin
  • MVVM
  • RxJava / Retrofit
  • Dagger
  • Androidx
  • Glide
  • Timber
Design

Categories browser

Categories browser

swapi-category-cards
  • Category activity: view pager, tab layout, and collapsing toolbar
  • Toolbar search view
  • Category fragment with view model: mutable live data and RxJava / composite disposable observables
  • Recycler view: layout animations, Glide for thumbnails
  • Cards: Material card view, auto-sized text, and alpha Material components for the notched corner.

Search

Color palette

swapi-search-results
  • Input delay, whitespace vs. space detection, and minimum query length
  • Recursive de-pagination using RxJava, composite disposables, and disposable observers (because sometimes the best results would be on page 2...)
  • Prioritized results list based on full word match, word position, and substring / position for title and model name
  • Bold-emphasized query match

Material 2.1 toolbar

Material Design uses a colored toolbar to define an app thematically. I took it to the next step, giving the app generous negative space on top while preserving a touch of color.

Instead of coloring the toolbar, I applied my primary color to the status bar. For the toolbar, I made it flat/transparent when expanded, and colored/elevated when collapsed.

swapi-iso-categories
swapi-iso-collapsed

Detail view

  • Detail activity: collapsing toolbar, stacked cards, horizontal recycler views
  • Generated roman numerals, auto-sized text, link text
  • Star Wars card" design
swapi-detail-view-people-2

Color palette

Color palette

main-colors
secondary-colors-2

Typography

text-styles
autosize-text-styles

Selected works

Starsky RoboticsUX research & design for autonomous vehicles

SWAPI: Android demoUX development exercise (2019)

Exercise goalsProduct design exercise

Disney Movies AnywhereSeinor UX Developer, Product Designer

DayframePrinciple Designer, Senior UX Developer

HD WidgetsPrinciple Designer, Senior UX Developer

App StatsPrinciple Designer, Senior UX Developer

CloudskipperPrinciple Designer, Senior UX Developer

Flash apps2000 - 2011

Elemental design1994 - 2003