Recently we released version 1.1 of Simple for Android. New in this release is the Send Money feature, which lets our customers schedule a payment in the form of a paper check. Our Web and iOS clients have had this feature for some time, so they paved the way in terms of hashing out the user experience and making the scheduling process easy to understand.
But what works for iOS and the Web doesn’t always work for Android. When designing the payment scheduling calendar, we wanted to incorporate some of the awesome design of the iOS version as well as the slick usability of the Web version, but we also wanted to make an experience that is fluid and uniquely Android. This is the result.
Designing for Android
Our concept for payment scheduling imposed a unique set of functional requirements that ended up dictating most of the design. To schedule a payment, users select the date they want their payment to arrive. That date is displayed at the end of the range of dates between when the payment is debited to the time it is delivered to the recipient. We also wanted to be spatially consistent: the length of a range selection should represent the length of the actual span of time the payment will be in transit.
The first iteration resembled a traditional calendar view, including paged months, headers, and borders. We quickly realized that these elements got in the way of usability. For example, a major question was how we would handle range selections across month boundaries: should we have the selection extend through dates that were disabled? Doing so would make the range appear longer than it actually is, and not doing so would cause an awkward break that violates spatial consistency.
To solve the issue, we took inspiration from the Web client and designed the calendar as a contiguous grid of dates. To accommodate free-scrolling, we made the month header stick to the top of the screen, and we update the header as the user scrolls to indicate the currently-visible month. A subtle shadow effect on the date numbers helps tie the header in with the current month. Removing the borders reduces visual noise and places the primary focus on the range selection.
The end result is natural to use, and it feels right at home on the Android platform. It also conveys the information we want to present in a simple and clean manner, and better yet, it does so quickly.
Building the calendar
No off-the-shelf Android component met all of our requirements. Before setting out to build a calendar component from scratch, we evaluated some existing products from the open-source community. We like using open-source because we can utilize some great battle-tested code that does what we need, and we get the opportunity to improve those products for the good of the community.
For this feature, we decided upon the TimesSquare library, which was developed by our friends at Square and further improved upon by the Android developer community. We liked its full-screen presentation, how easy it was to incorporate into our product, and its extensibility.
TimesSquare got us 80% to where we wanted to be, but we had to add a few features to complete our vision.
Disable arbitrary dates
Our payment partner doesn’t send checks on weekends or holidays, so we needed the ability to prevent user-selection of those dates. To accomplish this, we added a callback that every date is run through as each month view is built to determine the date’s selectability. Because TimesSquare is built as a ListView with a custom Adapter, each month view is built on-demand, thus this feature doesn’t add any noticeable startup delay.
Advanced styling for calendar cells and selection ranges
One of our design requirements was our special range selection treatment, which we affectionately dubbed the “pill”. It features rounded start and end segments, with a dark circle highlighting the estimated delivery date.
Originally, each calendar date in TimesSquare was represented using a CheckedTextView widget, which used the default drawable states to represent the state of each cell: for example,
state_enabled represented a selectable date,
state_checked represented today’s date, and the only state representing a date within the selected range was
state_selected, which didn’t give us the information we needed to style each cell appropriately.
We replaced CheckedTextView with a custom CalendarCellView that implements some more appropriate drawable states, such as
state_today. In addition, we added states for the first, middle, and last dates in a range selection, which gave us the ability to apply a different style to each.
These changes were merged into the core project on GitHub, and you can start using them in your Android projects today.
Contiguous calendar grid
A major change was to remove the calendar headers from the library and render each date in a contiguous, fluid grid. We added a callback that is called from an OnScrollListener every time the current month changes, and we use that in our client code to display our own sticky header above the calendar.
Unfortunately, this change required breaking the TimesSquare API. For now, we are maintaining our changes as a fork on our public GitHub, and we will investigate merging those changes with the core library in the near future.
In the meantime, Simple is hard at work making banking on Android the best experience it can possibly be. Check it out now at Google Play and let us know what you think!