Android How to Animate TextView Text

Android How to Animate TextView Text

Animations are a great way to bring life into our app. Animating views are easy, but How to animate text. For animating text (not TextView) we are going to use HTextView a free library available on GitHub. Before checking the actual code below is the demo video.

For our demo app, we have six HTextView and we are animating different texts in all the HTextView. For using HTextView we are going to add HTextView dependencies in-app Gradle file.

def htextview_version = "0.1.2"
compile "com.hanks:htextview-base:$htextview_version"        // base library
compile "com.hanks:htextview-fall:$htextview_version"        // optional
compile "com.hanks:htextview-fade:$htextview_version"        // optional
compile "com.hanks:htextview-line:$htextview_version"        // optional
compile "com.hanks:htextview-rainbow:$htextview_version"     // optional
compile "com.hanks:htextview-typer:$htextview_version"       // optional
compile "com.hanks:htextview-scale:$htextview_version"       // optional
compile "com.hanks:htextview-evaporate:$htextview_version"   // optional

Sync, your project.

Following are the code for activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.vlemonn.java.blog.htextview.MainActivity">

    <com.hanks.htextview.fall.FallTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        android:id="@+id/textView"
        android:textSize="20sp"
        android:gravity="center"
         />


    <com.hanks.htextview.line.LineTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        android:id="@+id/textViewLine"
        app:animationDuration="1000"
        android:textSize="20sp"
        app:lineColor="#1367bc"
        app:lineWidth="4dp"
        android:gravity="center"
        />

    <com.hanks.htextview.fade.FadeTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        android:id="@+id/textViewFade"
        app:animationDuration="1000"
        android:textSize="20sp"
        android:gravity="center"
        />


    <com.hanks.htextview.typer.TyperTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        android:id="@+id/textViewTyper"
        app:charIncrease="3"
        app:typerSpeed="80"
        android:textSize="20sp"
        android:gravity="center"
        />


    <com.hanks.htextview.rainbow.RainbowTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        android:id="@+id/textViewRainBow"
        android:textSize="20sp"
        app:colorSpace="150dp"
        app:colorSpeed="4dp"
        android:gravity="center"
        />


    <com.hanks.htextview.scale.ScaleTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        android:id="@+id/textViewScale"
        android:textSize="20sp"
        android:gravity="center"
        />

</LinearLayout>

In our MainActivity.java file, we are first initializing all the HTextView. We have a String Array for different messages. We are changing all HTextView text with time using String Array. Following is the code for MainActivity.java file

package com.vlemonn.java.blog.htextview;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.hanks.htextview.base.HTextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    
    private HTextView textView,textViewScale,textViewRainBow,textViewTyper,textViewFade,textViewLine;
    int delay = 2000; //milliseconds
    Handler handler;
    ArrayList<String> arrMessages = new ArrayList<>();
    int position=0;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /* Some Sample Messages for Animation */
        arrMessages.add("Hello, vLemonn!");
        arrMessages.add("Hello, World!");
        arrMessages.add("Free Android Tutorials");
        arrMessages.add("By Mayank Sanghvi");
        arrMessages.add("@vLemonn");
        arrMessages.add("Subscribe, Share, Like");
        arrMessages.add("Support Us");
        
        /* Initialize HTextView */
        textView = findViewById(R.id.textView);
        textViewScale= findViewById(R.id.textViewScale);
        textViewRainBow= findViewById(R.id.textViewRainBow);
        textViewTyper= findViewById(R.id.textViewTyper);
        textViewFade= findViewById(R.id.textViewFade);
        textViewLine= findViewById(R.id.textViewLine);

        /* First Message */
        textView.animateText(arrMessages.get(position));
        textViewScale.animateText(arrMessages.get(position));
        textViewRainBow.animateText(arrMessages.get(position));
        textViewTyper.animateText(arrMessages.get(position));
        textViewFade.animateText(arrMessages.get(position));
        textViewLine.animateText(arrMessages.get(position));
        position++;
        
        /* Change Messages every 2 Seconds */
        handler = new Handler();
        handler.postDelayed(new Runnable(){
            public void run(){

                handler.postDelayed(this, delay);
                if(position>=arrMessages.size())
                    position=0;
                textView.animateText(arrMessages.get(position));
                textViewScale.animateText(arrMessages.get(position));
                textViewRainBow.animateText(arrMessages.get(position));
                textViewTyper.animateText(arrMessages.get(position));
                textViewFade.animateText(arrMessages.get(position));
                textViewLine.animateText(arrMessages.get(position));
                position++;
            }
        }, delay);

    }
}

Now below is the output of our App.

FileDownload
HTextView.zipLogin to Download
0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share