At Robinhood, we’re focused on making the financial markets more accessible to everyone. Doing so means building the very best products day in and day out. This requires a keen eye, strict attention to detail, and time (lots and lots of time). So at Robinhood, we lean heavily on open source software. We’ve saved many hours by using tried-and-true open source libraries instead of reinventing the wheel. Today, we’re excited to offer our first open source library: Spark!
What is Spark?
Spark is an Android library for drawing sparklines. Sparklines are a great way to succinctly communicate the relative change of a particular value, especially so on mobile where screen space is limited. Spark makes it simple to draw sparklines in your own apps. The API should feel familiar to anyone who has used a ListView and Adapter before.
We built Spark as a very lightweight alternative to the other Android charting libraries. Spark’s initial release weighs in at only 15KB and 91 methods. This is over 95% smaller than other Android charting libraries.
Basics
Step 1: add a dependency to your build.gradle (be sure to use the latest version):
compile ‘com.robinhood.spark:spark:{latest release}’Step 2: add a SparkView to your layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.robinhood.spark.SparkView
android:id="@+id/sparkview"
android:layout_width="match_parent"
android:layout_height="match_parent" /> ...</LinearLayout>
Step 3: set a SparkAdapter on your SparkView to tell it about your points:
SparkView sparkView = (SparkView) findViewById(R.id.sparkview);
sparkView.setAdapter(new MyAdapter(data));
...
public class MyAdapter extends SparkAdapter {
private float[] yData;
public MyAdapter(float[] yData) {
this.yData = yData;
}
@Override
public int getCount() {
return yData.length;
}
@Override
public Object getItem(int index) {
return yData[index];
}
@Override
public float getY(int index) {
return yData[index];
}
}More info on features (like scrubbing and animation), how to change styling (like colors and line widths), and a complete sample app are all available in the Github repo.
Advanced
The Robinhood app has a couple of more advanced things built on top of Spark that illustrate how to achieve more advanced features.
First up - Spark will draw a ‘base line’ for you but by default it is a solid line. Robinhood’s base line is drawn as a dotted line. How do we do that? SparkView exposes the underlying Paints used when drawing. We can get the Paint used to draw the base line and then set a DashPathEffect on it.
Paint baseLinePaint = sparkView.getBaseLinePaint();
DashPathEffect dashPathEffect = new DashPathEffect(new float[] {baseLineDashLength, baseLineDashSpacing}, 0);
baseLinePaint.setPathEffect();You can use this pattern to customize the Paints however suits your app!
Second - during market hours, Robinhood’s sparklines don’t span the full width of the actual view bounds:
But Spark by default will draw all points to fill its own bounds, so how do we do that? We simply use padding on the right side of the SparkView to account for the remaining time in the day:
float daySoFarRatio = durationInMillis / fullDayInMillis;
paddingRight = getWidth() - Math.round(getWidth() * daySoFarRatio);
sparkView.setPadding(sparkView.getPaddingLeft(), sparkView.getPaddingTop(), paddingRight, sparkView.getPaddingBottom());Spark detects these padding changes, and will adjust its drawing to compensate.
Looking forward
We are excited to give back to the open source community that has given us so much already. We hope that this is the first of many future libraries that we are able to share! Come build them with us!
