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.
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
Autocomplete best practices
RxJava / Retrofit
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.
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...
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.
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.
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
Flash apps2000 - 2011
Elemental design1994 - 2003