VectorIntegerView (viv) is custom view to display integers on Android via great animations minSdkVersion 21.

Paths for vector drawables drawables are taken here.

• viv_vector_integer initial integer to show (0 by default).
• viv_digit_color color of integer (black by default).

• @integer/viv_animation_duration defines duration of animation (400ms by default).
• @dimen/viv_digit_size defines size of one digit (24dp by default).
• @dimen/viv_digit_translateX applied to all avd-digits, to center them horizontally.
• @dimen/viv_digit_translateY applied to all avd-digits, to center them vertically.
• @dimen/viv_digit_strokewidth applied to all avd-digits.
• @dimen/viv_digit_margin_horizontal applied to all digit-views (-3dp by default). This is needed to make horizontal spaces between digits smaller, because avd-digits are square.

<com.qwert2603.vector_integer_view.VectorIntegerView
    android:id="@+id/vectorIntegerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:viv_digit_color="#ff8000"
    app:viv_vector_integer="14" />

Digit can be set also via code as BigInteger as well as digit color:

final VectorIntegerView vectorIntegerView = findViewById(R.id.vectorIntegerView);
vectorIntegerView.setInteger(
        vectorIntegerView.getInteger().add(BigInteger.ONE),
        /* animated = */ true
);
vectorIntegerView.setDigitColor(getColor(R.color.colorAccent));

Also there is overloaded function that allows set integer as long:

vectorIntegerView.setInteger(1918L, false);

For example see demo-app.

VectorIntegerView is implemented by RecyclerView and each digit is ImageView with <animated-selector> drawable.

Animation are controlled by custom RecyclerView's item animator: DigitItemAnimator.

When animated each digit stays on it's own position. This is done via DiffUtil in DigitAdapter.

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

dependencies {
        implementation 'com.github.qwert2603:VectorIntegerView:x.y.z'
}