Android ExpandingPager Card Peek/pop Controller

 Looking for some different and creative ideas for your content in your android application. This expanding paper card view library might be a great alternative for you. We all have experienced how cool the applications are displayed when we press the home button. The applications running in the background provide a picture of the content inside. And, when clicked opens up the actual application. A similar concept is applied to the android expanding paper car controller.

However, this has additional features to fit perfectly inside an android application. The concept is really amazing and can help in having multiple contents. Not only the concept but also the UI and animation applied are soothing. A flawless peek and pop concept, where you can peek into a card and expand it. Also, squeeze the card to explore other card view elements.

Undoubtedly, the controller is a perfect fit for your application. However, it can depend on your requirement but might save it for later use. Talking about the functionality, the card view is contained with a short description and full content. So, when a user pops one card, they will be able to slide through other. And, peek into another card’s short description or the full content.

Overview

With the above gif, you will be able to see a glimpse of the design. The animations are soothing and the design has a great UI. A very satisfying concept to easily move from one content to another, simply with the use of cards.

To showcase the card size while peeking. You can also see a short description popping out.

Requirement

The expanded paper currently only works on a minimum of 5.0. However, the developer is eager to make it work on other versions if possible.

Setup

Just extends ExpandingViewPagerAdapter in your Fragment Adapter and setup the ExpandingViewPager

ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = (ViewPager) findViewById(...);
     
    viewPager.setAdapter( new CustomViewPagerAdapter(getSupportFragmentManager()) );

    ExpandingFactory.setupViewPager(ViewPager viewPager);
}

Adapter

Just extends ExpandingViewPagerAdapter in your Fragment Adapter, which returns ExpandingFragment`

public class CustomViewPagerAdapter extends ExpandingViewPagerAdapter {

    @Override
    public Fragment getItem(int position) {
        return CustomExpandingFragment.newInstance();
    }

}

Your ExpandingFragment must return a FragmentTop and a FragmentBottom

public class CustomExpandingFragment extends ExpandingFragment {

    @Override
    public Fragment getFragmentFront() {
        return CustomFragmentTop.newInstance();
    }

    @Override
    public Fragment getFragmentBottom() {
        return CustomFragmentBottom.newInstance();
    }
}

Fragments

Top

Avoid set of the full-screen event as it might affect the main click event 

public class CustomFragmentTop extends Fragment  {
    
  
}

Bottom

Create your top fragment implementing ExpandingFragment.ChildTop

public class CustomFragmentBottom extends Fragment  {
    

}

BackPress

@Override
public void onBackPressed() {
    if(!expandingViewPager.onBackPressed(viewPager)){
        super.onBackPressed();
    }
}

Download complete project source code from GitHub