I've been trying to switch fragments inside a fragmentStatePagerAdapter, but even though I was able to change from fragment C-D in the same position; I have not been able to animate the transition.
I would appreciate any suggestions to achieve this effect:
A - B - C | -> Flip transition back and forth D
ABC or ABD have the normal animation transition, but when in C if I click a button I need to swap the fragment D with a flip animation and if I'm looking at D flip back to C.
*You can animate it using a * PageTransformer.
See the below sample code.
public class MainActivity extends FragmentActivity {
SectionsPagerAdapter mSectionsPagerAdapter;
ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// activity_main.xml should contain a ViewPager with the id "@+id/pager"
setContentView(R.layout.activity_main);
// Create the adapter that will return a fragment for each of the three
// primary sections of the app.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
// set the card transformer and set reverseDrawingOrder to true, so the fragments are drawn from the right to
// the left
mViewPager.setPageTransformer(true, new CardTransformer(0.7f));// Animation.
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = new DummyFragment();
return fragment;
}
@Override
public int getCount() {
return 10;
}
}
public static class DummyFragment extends Fragment {
public DummyFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
LinearLayout root = new LinearLayout(getActivity());
root.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
root.setOrientation(LinearLayout.VERTICAL);
for (int r = 0; r < 5; r++) {
LinearLayout row = new LinearLayout(getActivity());
row.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0, 1.0f));
row.setOrientation(LinearLayout.HORIZONTAL);
row.setGravity(Gravity.CENTER);
for (int c = 0; c < 4; c++) {
ImageView icon = new ImageView(getActivity());
icon.setLayoutParams(new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f));
icon.setScaleType(ScaleType.CENTER);
icon.setImageResource(R.drawable.ic_launcher);
row.addView(icon);
}
root.addView(row);
}
return root;
}
}
public class CardTransformer implements PageTransformer {
private final float scalingStart;
public CardTransformer(float scalingStart) {
super();
this.scalingStart = 1 - scalingStart;
}
@Override
public void transformPage(View page, float position) {
if (position >= 0) {
final int w = page.getWidth();
float scaleFactor = 1 - scalingStart * position;
page.setAlpha(1 - position);
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
page.setTranslationX(w * (1 - position) - w);
}
}
}
}
or
You can use ViewPagerTransforms Libraray.
It will animate during switching fragment.
The training documentation details how to create a card-flip animation. To implement this as you described, all you need to do is nest the last two fragments (the 'C' and 'D' fragments) of the ViewPager in a single fragment; then apply the animation to the transition:
public class CardFlipFragment extends Fragment {
private boolean mShowingBack = false;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_card_flip, container, false);
if(savedInstanceState == null) {
getChildFragmentManager()
.beginTransaction()
.add(R.id.container, new FrontFragment())
.commit();
}
return view;
}
public void onFlip(View view) {
if(mShowingBack) {
getChildFragmentManager().popBackStack();
} else {
mShowingBack = true;
getChildFragmentManager()
.setCustomAnimations(
R.animator.card_flip_right_in,
R.animator.card_flip_right_out,
R.animator.card_flip_left_in,
R.animator.card_flip_left_out)
.replace(R.id.container, new BackFragment())
.addToBackStack(null)
.commit();
}
}
}
