Fragment Transaction Animation: Slide in and Slide Out

android animation slide out left, reverse on back

Instead of

transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right, R.anim.slide_in_left, R.anim.slide_out_right);

use

transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right, R.anim.slide_in_right, R.anim.slide_out_left);

Where R.anim.slide_in_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="-100%"
android:toXDelta="0"
android:interpolator="@android:anim/decelerate_interpolator"
android:duration="400"/>
</set>

and R.anim.slide_out_left

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="100%"
android:interpolator="@android:anim/decelerate_interpolator"
android:duration="300"/>
</set>

The arguments in this method are

setCustomAnimations(int enter, int exit, int popEnter, int popExit)

So basically

-slide new fragment in from right to left on entering

-slide out to the left when leaving current fragment

-slide old fragment from the left to the right when clicking back

-slide current fragment to the right when clicking back

As per method description

FragmentTransaction setCustomAnimations (int enter, 
int exit,
int popEnter,
int popExit)

Set specific animation resources to run for the fragments that are entering and exiting in this transaction. The popEnter and popExit animations will be played for enter/exit operations specifically when popping the back stack.

Slide up and down transaction animation fragment using navigation component in android

I had a similar issue, here is the solution I found: an anim ("slide_up") that represent the enter animation of the foreground fragment, an anim ("slide_down") that represent the exit animation of the foreground fragment and an anim ("stationary") that represent the animation for both exit and enter animation of the background fragment.

slide_up.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime"
android:fromYDelta="100%"
android:toYDelta="0%" />

slide_down.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime"
android:fromYDelta="0%"
android:toYDelta="100%" />

stationary.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime" />

nav_graph.xml (partial):

<action
android:id="@+id/action_from_backgroundFragment_to_ForegroundFragment"
app:destination="@id/foregroundFragment"
app:enterAnim="@anim/slide_up"
app:exitAnim="@anim/stationary"
app:popEnterAnim="@anim/stationary"
app:popExitAnim="@anim/slide_down" />

Maybe this can help you !

FragmentTransaction animation to slide in over top

I found a solution which works for me. I ended up using a ViewPager with a FragmentStatePagerAdapter. The ViewPager provides the swiping behavior and the FragmentStatePagerAdapter swaps in the fragments. The final trick to achieve the effect of having one page visible "under" the incoming page is to use a PageTransformer. The PageTransformer overrides the ViewPager's default transition between pages. Here is an example PageTransformer that achieves the effect with translation and a small amount of scaling on the left-hand side page.

public class ScalePageTransformer implements PageTransformer {
private static final float SCALE_FACTOR = 0.95f;

private final ViewPager mViewPager;

public ScalePageTransformer(ViewPager viewPager) {
this.mViewPager = viewPager;
}

@SuppressLint("NewApi")
@Override
public void transformPage(View page, float position) {
if (position <= 0) {
// apply zoom effect and offset translation only for pages to
// the left
final float transformValue = Math.abs(Math.abs(position) - 1) * (1.0f - SCALE_FACTOR) + SCALE_FACTOR;
int pageWidth = mViewPager.getWidth();
final float translateValue = position * -pageWidth;
page.setScaleX(transformValue);
page.setScaleY(transformValue);
if (translateValue > -pageWidth) {
page.setTranslationX(translateValue);
} else {
page.setTranslationX(0);
}
}
}

}

Transition animation between fragment

Google released the new Navigation UI library

So, now we can do the same fragment transitions from a your_named_navigation.xml resource (main > res > navigation > your_named_navigation.xml),

this an snippet code of my implementation:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
app:startDestination="@+id/first_fragment">

<fragment
android:id="@+id/first_fragment"
android:name="com.yourpackage.FirstFragment"
android:label="@string/title_first"
tools:layout="@layout/fragment_first">

<action
android:id="@+id/second_fragment_action"
app:destination="@id/second_fragment"
app:enterAnim="@anim/slide_in_right"
app:exitAnim="@anim/slide_out_left"
app:popEnterAnim="@anim/slide_in_left"
app:popExitAnim="@anim/slide_out_right" />

</fragment>

<fragment
android:id="@+id/second_fragment"
android:name="com.yourpackage.SecondFragment"
android:label="@string/title_second"
tools:layout="@layout/fragment_second">

<action ...next fragment/>

</fragment>

</navigation>

it also helps to handle clicks on back button and up button,

so, after have NavigationUi implementation in our proyect, we can call from our firstFragment instance the Navigation.findNavController method

myButton.setOnClickListener(View.OnClickListener {
//This opens our second fragment creating a stack of fragments
Navigation.findNavController(it).navigate(R.id.second_fragment_action)
})

The next Google's Codelab helped me, maybe can help you, greetings



Related Topics



Leave a reply



Submit