What is the best solution to implement Cross-Fade animation to a TextView in android without relative layout visibility change

Question

My current implementation is as follows and it is working fine. Here I'm using 2 TextViews in a RelativeLayout.

adapterHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        if (isLogin) {
                            mHolder.mUser.setVisibility(View.VISIBLE);
                            mHolder.mUser.animate().alpha(1f)
                                    .setDuration(500)
                                    .setListener(null);
                            mHolder.mDate.animate()
                                    .alpha(0.0f)
                                    .setDuration(500)
                                    .setListener(new AnimatorListenerAdapter() {
                                        @Override
                                        public void onAnimationEnd(Animator animation) {
                                            super.onAnimationEnd(animation);
                                            mHolder.mDate.setVisibility(View.INVISIBLE);
                                        }
                                    });

                            isLogin = false;
                        } else {
                            mHolder.mDate.setVisibility(View.VISIBLE);
                            mHolder.mDate.animate().alpha(1f)
                                    .setDuration(500)
                                    .setListener(null);
                            mHolder.mUser.animate().alpha(0.0f)
                                    .setDuration(500)
                                    .setListener(new AnimatorListenerAdapter() {
                                        @Override
                                        public void onAnimationEnd(Animator animation) {
                                            super.onAnimationEnd(animation);
                                            mHolder.mUser.setVisibility(View.INVISIBLE);
                                        }
                                    });
                            isLogin = true;
                        }
                    }
                });

This was done with the help of a Relative Layout. Here is the Layout part used to do the visibility change.

.
<RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_marginBottom="@dimen/margin_10"
                            android:layout_height="wrap_content">
                            <TextView
                                android:id="@+id/commitUser"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textSize="@dimen/header_title"
                                android:textStyle="bold"
                                />
                            <TextView
                                android:id="@+id/commitDate"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textSize="@dimen/header_title"
                                android:textStyle="bold"
                                />
                        </RelativeLayout>
.

But its not a smooth animation. I'm sure there are better solutions from experienced people.

Answer 1

The simple solution found for this would be using AlphaAnimation with AnimationListener in the TextView. Below is the code sample used for achieving this effect.

bt_change.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
            alphaAnimation.setDuration(200);
            alphaAnimation.setRepeatCount(1);
            alphaAnimation.setRepeatMode(Animation.REVERSE);
            alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) { }
                @Override
                public void onAnimationEnd(Animation animation) { }
                @Override
                public void onAnimationRepeat(Animation animation) {
                    if (pressed) {
                        my_text.setText("HELLO");
                        pressed = false;
                    } else {
                        my_text.setText("WORLD");
                        pressed = true;
                    }
                }
            });
            my_text.startAnimation(alphaAnimation);
        }
    });

Here is my xml

<Button
    android:id="@+id/changeBtn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:text="Button" />

<TextView
    android:id="@+id/my_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="TextView" />

There are other solutions also available as suggested by users (TextSwitcher). Please provide useful links as it can be used for future uses.