Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ViewPager animation fade in/out instead of slide

I got the FragmentBasics example from here. Is there a way make the ViewPager animation simply fade in and out when I swipe instead of sliding left and right? I've been trying some stuff with PageTransformer, but no success, I can still see it sliding. So I guess I need to somehow force its position to stay put, while sliding my finger only affects the alpha.

public class SecondActivity extends Activity {  SectionsPagerAdapter mSectionsPagerAdapter;  ViewPager mViewPager;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_second);      // Create the adapter that will return a fragment for each of the three     // primary sections of the activity.     mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager());      // Set up the ViewPager with the sections adapter.     mViewPager = (ViewPager) findViewById(R.id.pager);     mViewPager.setPageTransformer(false, new FadePageTransformer());     mViewPager.setAdapter(mSectionsPagerAdapter); }  @Override public boolean onCreateOptionsMenu(Menu menu) {      // Inflate the menu; this adds items to the action bar if it is present.     getMenuInflater().inflate(R.menu.second, menu);     return true; }  @Override public boolean onOptionsItemSelected(MenuItem item) {     // Handle action bar item clicks here. The action bar will     // automatically handle clicks on the Home/Up button, so long     // as you specify a parent activity in AndroidManifest.xml.     int id = item.getItemId();     if (id == R.id.action_settings) {         return true;     }     return super.onOptionsItemSelected(item); }  public class SectionsPagerAdapter extends FragmentPagerAdapter {      public SectionsPagerAdapter(FragmentManager fm) {         super(fm);     }      @Override     public Fragment getItem(int position) {         // getItem is called to instantiate the fragment for the given page.         // Return a PlaceholderFragment (defined as a static inner class below).         return PlaceholderFragment.newInstance(position + 1);     }      @Override     public int getCount() {         // Show 3 total pages.         return 3;     }      @Override     public CharSequence getPageTitle(int position) {         Locale l = Locale.getDefault();         switch (position) {         case 0:             return getString(R.string.title_section1).toUpperCase(l);         case 1:             return getString(R.string.title_section2).toUpperCase(l);         case 2:             return getString(R.string.title_section3).toUpperCase(l);         }         return null;     } }  public static class PlaceholderFragment extends Fragment {     /**      * The fragment argument representing the section number for this fragment.      */     private static final String ARG_SECTION_NUMBER = "section_number";      /**      * Returns a new instance of this fragment for the given section number.      */     public static PlaceholderFragment newInstance(int sectionNumber) {         PlaceholderFragment fragment = new PlaceholderFragment();         Bundle args = new Bundle();         args.putInt(ARG_SECTION_NUMBER, sectionNumber);         fragment.setArguments(args);         return fragment;     }      public PlaceholderFragment() {     }      @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {         View rootView = inflater.inflate(R.layout.fragment_second, container, false);         TextView textView = (TextView) rootView.findViewById(R.id.section_label);         textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));         return rootView;     } }  public class FadePageTransformer implements ViewPager.PageTransformer {         public void transformPage(View view, float position) {              if (position < -1 || position > 1) {                 view.setAlpha(0);             }             else if (position <= 0 || position <= 1) {                 // Calculate alpha. Position is decimal in [-1,0] or [0,1]                 float alpha = (position <= 0) ? position + 1 : 1 - position;                 view.setAlpha(alpha);             }             else if (position == 0) {                 view.setAlpha(1);             }         }     } 
like image 826
KKO Avatar asked Aug 02 '14 14:08

KKO


People also ask

How many methods does the PageTransformer of a ViewPager expose?

PageTransformer interface and supply it to the view pager. The interface exposes a single method, transformPage() . At each point in the screen's transition, this method is called once for each visible page (generally there's only one visible page) and for adjacent pages just off the screen.

How does ViewPager2 work?

So a Viewpager is an android widget that is used to navigate from one page to another page by swiping left or right using the same activity. So when we use Viewpager, we can add different layouts in one activity and this can be done by using the fragments.

How do I turn off animations in ViewPager?

I finally found out: the issue can be solved by just calling the mViewPager. setCurrentItem(position) with an extra parameter to false , which is the smooth scroll for the ViewPager . After this, the scroll will be done without any smoothing and thus the animations won't be seen.

When should I use ViewPager?

ViewPager in Android is a class that allows the user to flip left and right through pages of data. This class provides the functionality to flip pages in app. It is a widget found in the support library. To use it you'll have to put the element inside your XML layout file that'll contain multiple child views.


1 Answers

This should work better for the fade in/out transform:

public void transformPage(View view, float position) {     view.setTranslationX(view.getWidth() * -position);             if(position <= -1.0F || position >= 1.0F) {         view.setAlpha(0.0F);     } else if( position == 0.0F ) {         view.setAlpha(1.0F);     } else {          // position is between -1.0F & 0.0F OR 0.0F & 1.0F         view.setAlpha(1.0F - Math.abs(position));     } } 
like image 192
murena Avatar answered Sep 20 '22 19:09

murena