Search code examples
androidandroid-animationtextswitcher

Android - create sliding up animation for textview similar to movie credits

I am using a w TextSwitcher's that looks like this:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>


<TextSwitcher
    android:id="@+id/simpleTextSwitcher"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:measureAllChildren="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textAlignment="center"
        android:textSize="20sp"
        tools:text="Opening Credits" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="main star: James bond"
        android:textAlignment="center"
        android:textSize="20sp" />

</TextSwitcher>

I would like to create a slide in and a slide out animation for the textswitcher such that it looks like a movie credit's scene where the next text slides in from the bottom while the text from the top disappears by sliding upwards. I've tried a few things unsuccessfully. here is what i have so far:

my slide_in.xml animation: 

<translate
    android:duration="1000"
    android:fromYDelta="100%"
    android:toYDelta="0"
    />

and my slide_out.xml animation:

<translate
    android:duration="1000"
    android:fromYDelta="100%"
    android:toYDelta="0%p"
    />

im having difficulties with the slide out animation.

i want to be clear what i want here. i want whatever is presently visible in the textSwitcher to slide upwards and not be seen anymore and right after that for a new text to slide from the bottom to take its place.

here is how i invoke it simply:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    container.setOnClickListener { showNextText(it) }
    simpleTextSwitcher.setCurrentText("Opening Credits");

    val textAnimationIn =  AnimationUtils.
        loadAnimation(this,   R.anim.slide_in);

    val textAnimationOut =  AnimationUtils.
    loadAnimation(this,   R.anim.slide_out);

    simpleTextSwitcher.setInAnimation(textAnimationIn);
    simpleTextSwitcher.setOutAnimation(textAnimationOut);
}

 fun showNextText( view: View){
        simpleTextSwitcher.setText("main star: james bond");
}

}

here is how its behaving now:

enter image description here

what i want to happen is for the words "Opening Credits" to slide all the way to the top of the screen and never come up. and afterwards for the text" main Stars: James Bond" to slide up from the bottom to its position. Can you help me ?

Solution

  • i figured it out ...here is the slide in :

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"  >

    <translate
        android:duration="1000"
    android:fromYDelta="100%p"
    android:toYDelta="0%" />

</set>

    and the slide out: 

        <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator" android:fillAfter="true" >

    <translate
        android:duration="1000"
        android:fromYDelta="0%"
        android:toYDelta="-100%p" />

</set>

    this page was very useful for me so i could know what the p stood for in the fromYDelta

    here is the final results: enter image description here