Slide animation with navigation component
Finally I found the way how to do it.
- in a graph, set the animation:
<action
android:id="@+id/action_DetailsFragment"
app:enterAnim="@anim/slide_left"
app:exitAnim="@anim/wait_anim"
app:popEnterAnim="@anim/wait_anim"
app:popExitAnim="@anim/slide_right"
app:destination="@id/detailsFragment" />Creatie animations:
slide_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:duration="300"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>slide_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:duration="300"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="100%"
android:toYDelta="0%" />
</set>wait_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300">
</translate>To make it look better, in DetailsFragment add:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) ViewCompat.setTranslationZ(getView()!!, 100f) }
You can also add
sharedElementTransitionsto make your animation more unique.
So far I was ably to improve animation using:
SharedElement for some parts of a screen
adding alpha to the animation
increasing the speed of a slide animation so the "empty space" is not that visible
But still wasn't able to implement "IOS - like" slide animation.