Smooth text change in android animation

Question

I want to add animation in android text view so that when a text changes it should change smoothly and slowly. Like, fade in or fade out when the text changes. Is it possible in Android using animations? I did so far;

Main Activity

public class MainActivity extends AppCompatActivity {

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

        Button btn = (Button) findViewById(R.id.btn);
         tv = (TextView)findViewById(R.id.textview);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                    tv.setText(String.valueOf(Integer.valueOf((String) tv.getText()) + 1));
            }
        });
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center_horizontal"
    tools:context="com.example.namal.smoothtextchange.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:id="@+id/textview"
        android:textSize="150sp"

        android:layout_height="wrap_content"
        android:text="0" />

    <Button
        android:text="Change"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textview"
        android:id="@+id/btn" />
</RelativeLayout>

Answer 1

Use a TextSwitcher

<TextSwitcher
  android:layout_marginTop="50dp"
  android:id="@+id/textSwitcher"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal">
    <TextView 
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
    <TextView 
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</TextSwitcher>

Array of Strings to show in TextSwitcher

String textToShow[] = {"Main HeadLine", "Your Message", "New In Technology"};

You have to set animation

mSwitcher.setInAnimation(context, android.R.anim.slide_in_left);
mSwitcher.setOutAnimation(context, android.R.anim.slide_out_right);

Animation is triggered by calling method setText(CharSequence text)

// When clicked on Button TextSwitcher will switch between texts
btnNext.setOnClickListener(new View.OnClickListener() {
    public void onClick (View v) {
    
       currentIndex++;
       // If index reaches maximum reset it
       if (currentIndex == textToShow.length) {
          currentIndex = 0;
       }

       mSwitcher.setText(textToShow[currentIndex]);
}});

If you want to set text without animation, call method setCurrentText(CharSequence text) .

Answer 2

If you want to support Android 4+. check out the Transitions Everywhere lib. You can achieve all sorts of different animations with backward compatibility.

Here you can find some examples.

Just a few lines and you are good to go!

TransitionManager.beginDelayedTransition(transitionsContainer,
        new ChangeText().setChangeBehavior(ChangeText.CHANGE_BEHAVIOR_OUT_IN));

Now all you have to do is change the text and all the magic is done for you.

Answer 3

This is my extension for fadOut fadIn a new text.

// TextViewExtensions

fun TextView.setTextAnimation(text: String, duration: Long = 300, completion: (() -> Unit)? = null) {
    fadOutAnimation(duration) {
        this.text = text
        fadInAnimation(duration) {
            completion?.let {
                it()
            }
        }
    }
}

// ViewExtensions

fun View.fadOutAnimation(duration: Long = 300, visibility: Int = View.INVISIBLE, completion: (() -> Unit)? = null) {
    animate()
            .alpha(0f)
            .setDuration(duration)
            .withEndAction {
                this.visibility = visibility
                completion?.let {
                    it()
                }
            }
}

fun View.fadInAnimation(duration: Long = 300, completion: (() -> Unit)? = null) {
    alpha = 0f
    visibility = View.VISIBLE
    animate()
            .alpha(1f)
            .setDuration(duration)
            .withEndAction {
                completion?.let {
                    it()
                }
            }
}

• Example :

textView. setTextWithAnimation("Hello world", 500)

Answer 4

You can use TranslateAnimation

An animation that controls the position of an object.

    btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
             TranslateAnimation animObj= new TranslateAnimation(0,tv.getWidth(), 0, 0);
             animObj.setDuration(2000);
             tv.startAnimation(animObj);
             tv.setText(String.valueOf(Integer.valueOf((String) tv.getText()) + 1));
            }
        });

You can check below links for demo case

1. Android Animation Example
2. Android Working with XML Animations

Answer 5

add android:animateLayoutChanges=true to root view , then in code behind

  call this line of code at onCreate


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
    ((ViewGroup) findViewById(R.id.llRoot)).getLayoutTransition()
      .enableTransitionType(LayoutTransition.CHANGING);
   }

Answer 6

The easiest way to do this is:

btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                        ViewGroup parent=(ViewGroup) tv.getParent();                 //get parent of the TextView
                        parent.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);            //enable animations
                        tv.setText(String.valueOf(Integer.valueOf((String) tv.getText()) + 1));                   //change the text
        }
    });

Now, your text should change slowly and nicely

Answer 7

Use this in onCreate() , before change text in your textview:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout parentLayout = (LinearLayout)view.findViewById(R.id.container);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            LayoutTransition layoutTransition = new LayoutTransition();
            layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
            parentLayout.setLayoutTransition(layoutTransition);
        }    
        ......    
    }