Open In App

Typing Animation Effect in Android

Last Updated : 21 Apr, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to implement a very important feature related to TextView. This feature can be used to show important announcements or notifications in an App. Even we can add this feature to show important links for the user as this attracts the attention of the user. So here we are going to learn how to implement that feature. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Typing Animation Effect in Android Sample GIF

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/typingt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="15dp"
        android:text="Geeks For Geeks"
        android:textColor="@color/black"
        android:textSize="30dp" />
  
    <Button
        android:id="@+id/typingb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@color/purple_500"
        android:padding="20dp"
        android:text="Typing Animation" />
      
</LinearLayout>


Step 3: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. 

// Here we are adding the first letter
new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.setText("G");
                    }
                },300);
                // After that we will be appending the next
                // letter after some time interval
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("e");
                    }
                },400);

Below is the complete code for the MainActivity.java file. 

Java




import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
      
    TextView typingt;
    Button typingb;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        typingb = findViewById(R.id.typingb);
        typingt = findViewById(R.id.typingt);
          
        typingb.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.setText("G");
                    }
                }, 300);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("e");
                    }
                }, 400);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("e");
                    }
                }, 500);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("k");
                    }
                }, 600);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("s");
                    }
                }, 700);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("f");
                    }
                }, 800);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("o");
                    }
                }, 900);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("r");
                    }
                }, 1000);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("G");
                    }
                }, 1100);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("e");
                    }
                }, 1200);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("e");
                    }
                }, 1300);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("k");
                    }
                }, 1400);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        typingt.append("s");
                    }
                }, 1500);
            }
        });
    }
}


Output:



Similar Reads

Typing Indicator in Android
Typing Indicator has been seen on various apps like Instagram, Facebook Messenger, and many more. To build a chat app Typing Indicator will help to achieve a better user interface. One can also create a Typing Indicator in the app but for that, we have to design a layout for it, and also we have to take care of indicator animation and the color dif
2 min read
How to Check Typing Status of EditText in Android?
In this article, we are going to implement an important and quite interesting feature. While Chatting with your friends over various social media platforms you may have found that if your friend is typing something then it shows Typing. Here are going to implement the same. While we start typing something, It will show typing, and when we erase eve
2 min read
Invoking Search Button in Keyboard While Typing in EditText in Android
EditText can sometimes be a way of communicating with applications. Generally, EditTexts are used to fill in information or queries by the user and execute some tasks. Once the text is typed, the information or the query can be passed in the background to make things available or do some operations. But to pass it, there should be some method like
2 min read
Android Animation using Android Studio
In today's world which is filled with full of imagination and visualizations, there are some areas that are covered with the word animation. When this word will come to anyone’s mind they always create a picture of cartoons and some Disney world shows. As we already know that among kids, animation movies are very popular like Disney world, Doraemon
5 min read
Star Shower in Android using Android Property Animation
In this article, we are going to create a star shower using android property animation. We will create a slightly more involved animation, animating multiple properties on multiple objects. For this effect, a button click will result in the creation of a star with a random size, which will be added to the background container, just out of view of t
7 min read
Shimmer Animation in Android using Jetpack Compose
Prerequisites: Basic Knowledge of KotlinBasic knowledge of Jetpack Compose Shimmer Animation was created by Facebook to show the loading screen while images are fetched from the server. Now we see shimmer animation in lots of places. In this article, we will take a look at the implementation of shimmer animation using the all-new Jetpack Compose. A
5 min read
How to Add Fade and Shrink Animation in RecyclerView in Android?
In this article, we are going to show the fade and shrink animation in RecyclerView. When we move downward then the item at the top will be fading out and then it will shrink. In the output, we can see how it is happening. We will be implementing this Java programming language. [video mp4="https://media.geeksforgeeks.org/wp-content/uploads/20210403
3 min read
How to add TextSwitcher with animation in Android using Java
A TextSwitcher is used to animate a text on a screen. It is the child class of the ViewSwitcher class. It contains only one child of type TextView. In order to set animation on TextSwitcher we have to add animation tag or we can add programmatically. Here are the some usage of TextSwitcher: Changing numbers in a Date Picker Countdown of timer clock
2 min read
Create Floating Animation for RecyclerView Items in Android
In Android, a RecyclerView is a UI element that is used to display a type of layout items in the form of a list. This list is scrollable and each element of the list is clickable. You can find more information on creating RecyclerView in this article: RecyclerView in Android with Example. RecyclerView by default has no entry or exit animation. Howe
5 min read
How to add Slide animation between activities in android?
In this article, we will learn about how to add slide screen animation between different activities to make UX better. Apps are made up of many activities and to navigate between the activities slide screen animation can be very useful. Animation plays a very critical role in any app if the app has animation in it then it surely attracts the user.
4 min read
Article Tags :
Practice Tags :