How to animate content replacement in Android Bottom Sheet

Question

I have a BottomSheetDialogFragment which contains two different layouts

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include
        android:id="@+id/layout_authentication"
        layout="@layout/layout_bankid_authentication"
        app:viewModel="@{viewModel}"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/flow_sixteen_dp"
        android:layout_marginTop="@dimen/flow_twenty_four"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text_title" />

    <include
        android:id="@+id/layout_qr"
        layout="@layout/layout_bankid_qr"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/flow_sixteen_dp"
        android:layout_marginTop="@dimen/flow_twenty_four"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text_title" />
</androidx.constraintlayout.widget.ConstraintLayout>

At first, the layout_authentication is shown, and after a button click, that view should become GONE and the other layout layout_qr should be shown.

I'd like to achieve an animation for this. i.e. The layout_authentication goes to the left while the other one takes its place from the right.

How can I achieve this?

I tried something like this but didn't work very well

it.layoutAuthentication.root.apply {
    val animate = TranslateAnimation(0F, - this.width.toFloat(), 0F, 0F)
    animate.duration = 500
    animate.fillAfter = true
    this.startAnimation(animate)
    this.visibility = View.GONE
}
it.layoutQr.root.apply {
    val animate = TranslateAnimation(0F, this.width.toFloat(), 0F, 0F)
    animate.duration = 500
    animate.fillAfter = true
    this.startAnimation(animate)
    this.visibility = View.VISIBLE
}

What I am after is something like this

Answer 1

I easily fixed the issue with the help of ViewSwitcher. Add two layouts to the ViewSwicther and simply ask the view switcher to show the next layout. binding.viewSwitcher.showNext()

<ViewSwitcher
    android:id="@+id/view_switcher"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="@dimen/flow_sixteen_dp"
    android:layout_marginTop="@dimen/flow_twenty_four"
    android:inAnimation="@anim/slide_in_right"
    android:measureAllChildren="false"
    android:outAnimation="@anim/slide_out_left"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/text_title">

    <include
        android:id="@+id/layout_initiation"
        layout="@layout/layout_bankid_initiation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:viewModel="@{viewModel}" />

    <include
        android:id="@+id/layout_qr"
        layout="@layout/layout_bankid_qr_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</ViewSwitcher>