Learn Programming Together: Android tip: Scrolling TextView by Ticker

As you can read at my previous post, Robinhood team had written a library to drawing sparkline in Android application, it's useful for us in developing applications related stocks. Moreover, this team also has an another library called Ticker - a simple Android UI component for displaying scrolling text.

Through this post, I would like to present to readers the way to use it.
DEMO VIDEO:

Importing library

In order to use it, please add this dependency to your application build.gradle:

compile 'com.robinhood.ticker:ticker:1.0.0'

Usages

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. 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” />

In programmatically code, there are some important methods to customize the view:

setCharacterList: determine how to animate from one character to another. The provided character array dictates what characters will appear between the start and end characters.
setAnimationInterpolator: set the interpolator for the transition animation.
setAnimationDuration: set the duration in milliseconds that this TickerView runs its transition animations.
setText: set displayed text for TickerView (like TextView).

Sample project code

Declaring 3 TickerView in main activity layout to make 3 types of text later:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.devexchanges.scrollingtextview.MainActivity">

    <com.robinhood.ticker.TickerView
        android:id="@+id/ticker_usd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:background="#243D99"
        android:padding="@dimen/activity_horizontal_margin"
        app:ticker_textColor="@android:color/white"
        app:ticker_textSize="20sp" />

    <com.robinhood.ticker.TickerView
        android:id="@+id/ticker_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/ticker_usd"
        android:layout_centerInParent="true"
        android:background="@color/colorPrimary"
        android:padding="@dimen/activity_horizontal_margin"
        app:ticker_textColor="@android:color/white"
        app:ticker_textSize="20sp" />

    <com.robinhood.ticker.TickerView
        android:id="@+id/ticker_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ticker_usd"
        android:layout_centerInParent="true"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:background="#0099ff"
        android:padding="@dimen/activity_horizontal_margin"
        app:ticker_textColor="@android:color/white"
        app:ticker_textSize="20sp" />

</RelativeLayout>

Generating texts for 3 TickerViews in Java code:

MainActivity.java

package info.devexchanges.scrollingtextview;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.robinhood.ticker.TickerUtils;
import com.robinhood.ticker.TickerView;

import java.text.DecimalFormat;
import java.text.NumberFormat;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    private TickerView tickerView, tickerUSD, tickerText;
    private char[] alphabetlist;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tickerView = (TickerView) findViewById(R.id.ticker_number);
        tickerUSD = (TickerView) findViewById(R.id.ticker_usd);
        tickerText = (TickerView) findViewById(R.id.ticker_text);

        alphabetlist = new char[53];
        alphabetlist[0] = TickerUtils.EMPTY_CHAR;
        for (int i = 0; i < 2; i++) {
            for (int j = 0; j < 26; j++) {
                // Add all lowercase characters first, then add the uppercase characters.
                alphabetlist[1 + i * 26 + j] = (char) ((i == 0) ? j + 97 : j + 65);
            }
        }

        tickerView.setCharacterList(TickerUtils.getDefaultNumberList());
        tickerUSD.setCharacterList(TickerUtils.getDefaultListForUSCurrency());
        tickerText.setCharacterList(alphabetlist);

        //Default data
        tickerView.setText("2000");
        tickerUSD.setText("$5,200");
        setRandomText();
        setRandomCurrency();
    }

    public void setRandomText() {
        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            public void run() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Random r = new Random();
                        int low = 1000;
                        int high = 10000;
                        final int result = r.nextInt(high - low) + low;
                        tickerView.setText("" + result);
                        handler.postDelayed(this, 1500);
                    }
                });
            }
        }, 2000);
    }

    public void setRandomCurrency() {
        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            public void run() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Random r = new Random();
                        int low = 1000;
                        int high = 10000;
                        final int result = r.nextInt(high - low) + low;
                        NumberFormat formatter = new DecimalFormat("#,###,###");
                        String usdString = formatter.format(Integer.parseInt(String.valueOf(result)));
                        tickerUSD.setText("$" + usdString);
                        tickerText.setText(generateChars(r, alphabetlist, 6));

                        handler.postDelayed(this, 1500);
                    }
                });
            }
        }, 2000);
    }

    private String generateChars(Random random, char[] list, int numDigits) {
        final char[] result = new char[numDigits];
        for (int i = 0; i < numDigits; i++) {
            result[i] = list[random.nextInt(list.length)];
        }
        return new String(result);
    }
}

Running application, we'll have this output:

Final thoughts

Up to now, you can see that very easy to building a scrolling TextView in your Android application by using a third-party library, very useful with apps have constantly updated data. Moreover, scrolling text and sparkline is used in Robinhood team application, one of best Material design apps in 2016, you should download and try!
References:

Ticker library page on @Github.
Robinhood team home page.
The introduction post about Ticker on Medium.

View Project on Github