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

Code

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

Design

• Sketch
  
• Two designs
  
• Style management
• Autocomplete best practices
  
• Autosize text
• Layout animations
  
• Material components

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

• Auto-updating results following best practices for autocompletion
  

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

Detail view

• Detail activity: collapsing toolbar, stacked cards, horizontal recycler views

• Generated roman numerals, auto-sized text, link text

• Star Wars card" design

Typography

@radley  •  Mixcloud  •  Github  •  LinkedIn