swapi-v3
ANDROID DEVELOPMENT EXERCISE

Star Wars API 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

Work Timer / MicrojournalProductivity app for iPhone, iPad, & macOS

Disney Movies AnywhereSenior Android Developer, Product Designer

Star Wars API DemoAndroid design & code exercise

DayframeAutomated photo frame for social media

HD WidgetsRanked #1 paid app in 2011

App StatsPlay Store tracking and updates

CloudskipperMusic player

Starsky RoboticsUX research & design for autonomous vehicles

Exercise GoalsProduct design exercise

Flash apps2000 - 2011

Elemental design1994 - 2003

lion-nav-dark
@radley  •  Mixcloud  •  Github  •  LinkedIn