I am currently trying to implement a custom animation when changing fragments.
The custom animation only works one way and does not work when back is pressed. On back press the correct fragment is shown but with no animation.
My code for the fragment transaction:
FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right, R.anim.slide_in_right, R.anim.slide_out_left);
transaction.replace(R.id.frame_container, fragment, FragmentTag);
transaction.addToBackStack(null);
transaction.commit();
My code for the anim XML files:
//Slide in left
<?xml version="1.0" encoding="utf-8"?>
<set>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="-1280"
android:valueTo="0"
android:duration="500"/>
</set>
//Slide out right
<?xml version="1.0" encoding="utf-8"?>
<set>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="0"
android:valueTo="-1280"
android:duration="500"/>
</set>
//Slide in Right
<?xml version="1.0" encoding="utf-8"?>
<set>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="-1280"
android:valueTo="0"
android:duration="500"/>
</set>
//Slide out Left
<?xml version="1.0" encoding="utf-8"?>
<set>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="0"
android:valueTo="-1280"
android:duration="500"/>
</set>
The code for onBackPressed()
#Override
public void onBackPressed()
{
super.onBackPressed();
}
Any ideas where I'm going wrong? Thanks for any help
Use this code for onBackPressed:
if (getFragmentManager().getBackStackEntryCount() > 0) {
getFragmentManager().popBackStack();
} else {
super.onBackPressed();
}
Related
I have an Activity which has a BottomNavigationView.It has 2 items(Fragments).The first fragment has to enter from left and exit to the left.Similarly the second fragment has to enter from the right and exit to the right.Both the fragments enter correctly, but exits the opposite ways.Have a look here:
enter_from_left.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:shareInterpolator="false">
<translate
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="-100%"
android:toXDelta="0%"
>
</translate>
</set>
exit_to_left.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:shareInterpolator="false"
>
<translate
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0%"
android:toXDelta="-100%"
>
</translate>
</set>
enter_from_right.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:shareInterpolator="false">
<translate
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="100%"
android:toXDelta="0%"
>
</translate>
</set>
exit_to_right.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:shareInterpolator="false">
<translate
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0%"
android:toXDelta="100%">
</translate>
</set>
Code:(Exit animations work oppositely for both fragments)
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.sendSms:
FragmentTransaction transaction=getSupportFragmentManager().beginTransaction();
transaction.setCustomAnimations(R.anim.enter_from_left,R.anim.exit_to_left);
transaction.replace(R.id.fragcontainer,new SendSmsFragment());
transaction.commit();
return true;
case R.id.receiveSms:
FragmentTransaction transaction1=getSupportFragmentManager().beginTransaction();
transaction1.setCustomAnimations(R.anim.enter_from_right,R.anim.exit_to_right);
transaction1.replace(R.id.fragcontainer,new ReceiveSmsFragment());
transaction1.commit();
return true;
}
return false;
}
};
Try exit_to_right: transaction.setCustomAnimations(R.anim.enter_from_left,R.anim.exit_to_right);
I'm applying transition set for entering fragment and for exiting i want to apply slide out animation, how can i do that, here is my code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
productDetailFragment.setSharedElementEnterTransition(new DetailsTransition());
productDetailFragment.setEnterTransition(new Fade());
productDetailFragment.setExitTransition(new Slide(Gravity.RIGHT));
}
((MainActivity)context).getSupportFragmentManager()
.beginTransaction()
.replace(R.id.fragment, productDetailFragment)
.addSharedElement(viewHolder.iv, "kittenImage")
.addToBackStack(null)
.commit();
Please check below code for custom animation apply to fragment transitions:
getSupportFragmentManager()
.beginTransaction()
.setCustomAnimations( R.anim.slide_up, 0, 0, R.anim.slide_down)
.show( m_topFragment )
.commit();
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="translationY"
android:valueType="floatType"
android:valueFrom="1280"
android:valueTo="0"
android:duration="#android:integer/config_mediumAnimTime"/>
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="translationY"
android:valueType="floatType"
android:valueFrom="0"
android:valueTo="1280"
android:duration="#android:integer/config_mediumAnimTime"/>
Above i am showing you slide_up and down transition but you can use left-right and any custom objectAnimator to show animations into your fragment transition time and hope it helps you.
try something like this.! may this work fine for you.!
Fragment Transaction Example
Using Slide Example
FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();
Fade exitFade = new Fade();
exitFade.setDuration(FADE_DEFAULT_TIME);
previousFragment.setExitTransition(exitFade);
or
Transition slideTransition = new Slide(Gravity.BOTTOM);
Transition fadeTransition = new Fade();
TransitionSet set = new TransitionSet();
set.addTransition(slideTransition);
set.addTransition(fadeTransition);
Call Fragment :
FragmentManager fragmentManager = getSupportFragmentManager();
boolean fragmentPopped = fragmentManager.popBackStackImmediate("OtpFragment", 0);
Fragment fragment = null;
Bundle b = new Bundle();
if (!fragmentPopped && fragmentManager.findFragmentByTag("OtpFragment") == null) {
fragment = new OtpFragment();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.setCustomAnimations(R.anim.enter_from_right, R.anim.exit_from_left);
transaction.replace(R.id.frame_container, fragment, "OtpFragment")
.addToBackStack("OtpFragment")
.commit();
}
Create anim directory inside res folder :
now create two separate files for enter/exit animation : i.e. R.anim.enter_from_right and R.anim.exit_from_left
Enter Slide Animation :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="300" />
</set>
Exit Side animation :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="-100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="300"/>
</set>
First of all, please don't declare it as duplicate because i have been spending time on stackoverflow since last five days and i have read a lot of answers but still not able to achieve this.
I want card flip animation in my application. I tried https://developer.android.com/training/animation/cardflip.html also but exit animation is not being played there for me.
So i used two frame layouts for two fragments in a Linear Layout and then tried to rotate and translate first frame layout towards left out of screen while rotating and translating next frame layout in from right.First frame is rotating as required but translation is not there.
Please help to make frame layout translate also with rotation so that next fragment could enter the screen.
My code is:
activity_card.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:background="#color/colorPrimary"
>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
>
<FrameLayout
android:id="#+id/frame_layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
>
</FrameLayout>
<FrameLayout
android:id="#+id/frame_layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
>
</FrameLayout>
</LinearLayout>
</LinearLayout>
card_flip_left_out.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
android:propertyName="rotationY"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:startOffset="0"
android:duration="1000" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="0"
android:duration="800" />
<objectAnimator
android:propertyName="translationX"
android:valueTo="-200"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:startOffset="0"
android:duration="1000"
/>
</set>
card_flip_right_in.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Before rotating, immediately set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0" />
<!-- Rotate. -->
<objectAnimator
android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:duration="1000" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="0"
android:duration="800" />
<objectAnimator
android:propertyName="translationX"
android:valueTo="0"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:startOffset="0"
android:duration="1000"
/>
</set>
CardActivity.java:
public class CardActivity extends AppCompatActivity implements
Toolbar.OnMenuItemClickListener {
FragmentTransaction fragmentTransaction;
FrameLayout layout1, layout2;
String visibleFragment;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("Digital card");
toolbar.setTitleTextColor(Color.WHITE);
toolbar.inflateMenu(R.menu.menu);
toolbar.setOnMenuItemClickListener(this);
layout1 = (FrameLayout) findViewById(R.id.frame_layout1);
layout2 = (FrameLayout) findViewById(R.id.frame_layout2);
fragmentTransaction = getFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.frame_layout1, GeneralDetailsFragment.newInstance());
fragmentTransaction.replace(R.id.frame_layout2, AddMoreDetailsFragment.newInstance());
visibleFragment = "layout1";
fragmentTransaction.commit();
}
#Override
public boolean onMenuItemClick(MenuItem item) {
Animator anim1 = AnimatorInflater.loadAnimator(this,R.animator.card_flip_left_out);
Animator anim2 = AnimatorInflater.loadAnimator(this,R.animator.card_flip_right_in);
if(visibleFragment.equals("layout2"))
{
anim1.setTarget(layout2);
anim2.setTarget(layout1);
anim1.start();
anim2.start();
visibleFragment = "layout1";
}
else
{
anim1.setTarget(layout1);
anim2.setTarget(layout2);
anim1.start();
anim2.start();
visibleFragment = "layout2";
}
return true;
}
}
Try this way:
below is xml file for animation (left to right with rotation) and start animation on view. And make changes as per you need.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="5"
android:toDegrees="359" />
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%p" //For Y - android:fromYDelta="0%p" also -value
android:toXDelta="100%p" //For Y - android:toYDelta="50%p"
android:repeatCount="0"
android:duration="3000">
</translate>
</set>
Hope this will help you.
I found a different and pretty simple way to achieve card flip animation here . This animation is not for replacing or adding fragment using FragmentTransaction but for two frame layouts which already contain corresponding Fragment.
Sample code is:
public void flip(final View front, final View back, final int duration) {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
AnimatorSet set = new AnimatorSet();
set.playSequentially(
ObjectAnimator.ofFloat(front, "rotationY", 90).setDuration(duration / 2),
ObjectAnimator.ofInt(front, "visibility", View.GONE).setDuration(0),
ObjectAnimator.ofFloat(back, "rotationY", -90).setDuration(0),
ObjectAnimator.ofInt(back, "visibility", View.VISIBLE).setDuration(0),
ObjectAnimator.ofFloat(back, "rotationY", 0).setDuration(duration / 2)
);
set.start();
}
else {
front.animate().rotationY(90).setDuration(duration / 2).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
front.setVisibility(View.GONE);
back.setRotationY(-90);
back.setVisibility(View.VISIBLE);
back.animate().rotationY(0).setDuration(duration / 2).setListener(null);
}
});
}
}
I am working on Fragments translate animation by following link :
http://trickyandroid.com/fragments-translate-animation/
But i want to start slide down animation by pressing back button rather finishing slide up animation by pressing Action bar button .
Slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="yFraction"
android:valueType="floatType"
android:valueFrom="0.58"
android:valueTo="1.0"
android:duration="#android:integer/config_mediumAnimTime"/>
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="alpha"
android:valueType="floatType"
android:valueFrom="1"
android:valueTo="0"
android:duration="#android:integer/config_mediumAnimTime"/>
</set>
Slide.up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="yFraction"
android:valueType="floatType"
android:valueFrom="1.0"
android:valueTo="0.58"
android:duration="#android:integer/config_mediumAnimTime"/>
<objectAnimator
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="alpha"
android:valueType="floatType"
android:valueFrom="0.58"
android:valueTo="1.0"
android:duration="#android:integer/config_mediumAnimTime"/>
</set>
Code for Animation in Main Activity:
Fragment f = getFragmentManager().findFragmentByTag(LIST_FRAGMENT_TAG);
if (f != null) {
getFragmentManager().popBackStack();
} else {
getFragmentManager().beginTransaction()
.setCustomAnimations(R.anim.slide_up,
R.anim.slide_down,
R.anim.slide_up,
R.anim.slide_down)
.add(R.id.list_fragment_container, SlidingListFragment
.instantiate(this, SlidingListFragment.class.getName()),
LIST_FRAGMENT_TAG
)
.addToBackStack(null) .commit();
googleMap.getUiSettings().setAllGesturesEnabled(false);
}
}
Please help me to increase my knowledge regarding this .
Handler can be used as a lightweight timer. The key is animation will be clear as soon as activity start performing a finish, so you have to delay the finish in order to see the animation completely.
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
MainActivity.super.onBackPressed();
}
}, getResources().getInteger(android.R.integer.config_mediumAnimTime));
When I instanciate a new Activity is use a custom animation like this:
Intent registerIntent = new Intent();
registerIntent.setClassName(getPackageName(), getPackageName() + ".activity.RegisterActivity");
startActivity(registerIntent);
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
This way the current/old activity slides out to the left, while the new activity slides in from the right.
When in the new RegisterActivity I use following code to handle the animation when the user uses the "Back" button:
public void onBackPressed() {
super.onBackPressed();
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);
}
Now the current activity leaves to the right and the old activity (from before) comes back in from the left.
I also tried to handle the "Up" Navigation like this, but with no result:
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);
}
return super.onOptionsItemSelected(item);
}
How would i use a custom animation on "Up" navigation? Any suggestions on how to better use animations?
EDIT:
slide_in_left.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="500" />
</set>
slide_out_right.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="500" />
</set>
I changed the following: Now it works:
Old:
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.blue)));
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
New:
getActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.blue)));
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
If I understood... I think that this resolve.
Intent registerIntent = new Intent();
registerIntent.setClassName(getPackageName(), getPackageName() + ".activity.RegisterActivity");
startActivity(registerIntent);
overridePendingTransition(
R.anim.animation_in+right_to_left,
R.anim.animation_out_right_to_left);
public void onBackPressed() {
super.onBackPressed();
overridePendingTransition(R.anim.animation_in_left_to_right,
R.anim.animation_out_left_to_right);
}
animation_in_left_to_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="-100%" android:toXDelta="0%"
android:duration="500"/>
</set>
animation_out_left_to_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0%" android:toXDelta="200%"
android:duration="500"/>
</set>
animation_in_right_to_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="200%" android:toXDelta="0%"
android:duration="500"/>
</set>
animation_out_right_to_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0" android:toXDelta="-100%"
android:duration="500" />
</set>
you use the same logic to UP navigation