1

This is my textSwitcher code:

        <TextSwitcher
        android:id="@+id/likes_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp"
        android:inAnimation="@anim/slide_in_likes_counter"
        android:outAnimation="@anim/slide_out_likes_counter">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:padding="8dp"
            android:textColor="@color/black85"
            android:background="#E0E0E0"
            android:text="0" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:padding="8dp"
            android:textColor="@color/deep_orange_500"
            android:background="#E0E0E0"/>

    </TextSwitcher>

Its actually for a like button. When you click the like, the textSwitcher slides up to show the new like count, lets say going from 0 to 1.

Now, when you click the button again after you had clicked it once already to unlike, it slides up again to show that it went from 1 to 0.

Is there a way to make it slide down when you unlike?

The doc doesn't say much: http://developer.android.com/reference/android/widget/TextSwitcher.html

This is the slide_in_likes_counter file:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="150"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="80%p"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

This is the slide_out_likes_counter file:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="150"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="0"
        android:toYDelta="-80%p" />
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>
Simon
  • 19,658
  • 27
  • 149
  • 217

1 Answers1

1

I hope you haven't been waiting by your computer for the last 2 years for an answer...

4 separate animations are needed:

  • slide_up_in and slide_up_out (in the UP direction, which you've already implemented)
  • slide_down_in and slide_down_out (in the DOWN direction)

slide_down_in and slide_down_out are copies of the first two with their fromYDelta and toYDelta inverted respectively.

slide_up_in (based on your slide_in_likes_counter)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="150"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="80%p"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

slide_up_out (based on your slide_in_likes_counter)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="150"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="0"
        android:toYDelta="-80%p" />
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

slide_down_in (new)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="150"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="-80%p"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

slide_down_out (new)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="150"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromYDelta="0"
        android:toYDelta="80%p" />
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

Before you call setText on the TextSwitcher, be sure to reset the in and out animations:

// Slide up
textSwitcher.setInAnimation(context, R.anim.slide_up_in)
textSwitcher.setOutAnimation(context, R.anim.slide_up_out)

// Slide down
textSwitcher.setInAnimation(context, R.anim.slide_down_in)
textSwitcher.setOutAnimation(context, R.anim.slide_down_out)
nickhrsn
  • 21
  • 2