One of the guiding principles the Robinhood’s app engineering teams value above all else is user experience. We believe that a delightful and intuitive user experience helps distinguish our app from the others and highlight the shift from the traditional financial behemoths to the agile mobile-first brokerage that is Robinhood. We are thankful that our UI/UX-driven engineering efforts are well received by both our customers and the industry as a whole, and they resulted in two design awards for our iOS and Android apps in the first year of their respective launches. However, we are not done yet. We constantly look for ways to evolve and refactor our app in the face of new standards and expectations. We search for new open source and framework libraries and tools because we believe that the less code we write and thus need to maintain, the better and more flexible it is for us down the road. We listen to our customers’ suggestions and feedback in order to improve our app. We do all of these while at the same time maintaining the high standards that we set for, and our customers expect from, all of Robinhood engineering.
To this end, Robinhood app engineering teams focus on creating high-performance mobile architectures and UI modules so that our apps run smoothly and efficiently across all devices. One such module that we built pretty early on was the ticker text module, named after the stock price tickers that you normally see on Wall Street. When we were building the ticker module on Android, we had a few main requirements:
- High performance: animation should not cause any lag in the UI, particularly during scroll and fling.
- Low memory usage: e.g. do not use multiple views underneath.
- Easily pluggable: the core logic should be properly encapsulated so the UI module can be easily reused across screens.
- Simple, extensible API: very minimal efforts required to redefine how the text is rendered or animated.
- Minimum possible Android SDK version requirement
With these goals in mind, we developed the first version of our ticker module and shipped it with our initial Android public release. After a few minor stumbles and some iterations, we are glad to announce that we are offering Ticker to the open source community!
What is Ticker?
Ticker is a simple Android UI component for displaying scrolling text. Think about how an odometer scrolls when going from one number to the next, that is similar to what Ticker does. The Ticker handles smooth animations between strings and also handle string resizing (e.g. animate from “9999” to “10000”).
You can specify how the animations proceed by defining an array of characters in order. Each character displayed by Ticker is controlled by this array which dictates how to animate from a starting character to a target character. For example, if you just use a basic ASCII character list, when animating from ‘A’ to ‘Z’, it will go from ‘A’ -> ‘B’ -> … ‘Z’. The character ordering does not wrap around, meaning that to animate from ‘Z’ to ‘A’ it will go from ‘Z’ -> ‘Y’ -> … -> ‘A’.
Let’s revisit our requirements above and talk about how we achieved them.
High performance / low memory usage
We decided to extend from the base View class and achieve everything by drawing directly onto the canvas. The primary benefit from this is having full flexibility and control over memory allocations and minimize performance impact by using native draw operations. We pre-allocate and pre-compute as much as possible for each transition so that the only thing we need to do in the draw path is perform the actual drawing operations. The performance test UI included in the Ticker sample library is a bit over-zealous but animates smoothly with a screen full of tickers.
Easily pluggable / simple, extensible API
The Ticker can be used easily by defining and customizing the view (currently supports customization for text color, size, interpolator, and duration) either via XML or programmatically. The public API is actually fairly limited at the moment, and we’ll work on the best ways to expose more functionality and customizations as different use-cases come up.
To define a TickerView, you can include it in your XML layout:
<com.robinhood.ticker.TickerView
android:id=”@+id/tickerView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
app:ticker_textColor=”?colorPrimary”
app:ticker_textSize=”16sp” />Customize the view in code and set an appropriate character list to dictate the animation behavior, and you are done!
final TickerView tickerView = findViewById(R.id.tickerView);
tickerView.setAnimationInterpolator(new OvershootInterpolator());
tickerView.setCharacterList(TickerUtils.getDefaultNumberList());
tickerView.setText(“1234”);
…
tickerView.setText(“4321”);Minimum possible Android SDK version requirement
Ticker requires API 12 and above because it uses the framework’s animator library. Android devices running ICS and above is around 98% globally so hopefully this minimum version requirement won’t be an issue.
