Two list view at a time with half sliding viewpager android

Question

Can it be possible to slide the viewpager half of the screen?

My ultimate goal is to display two list view at a time, after first page slide, left list would be the previous list. So Like as below..

list1,list2

list2,list3

list3,list4

Any solutions?

Thanks

Answer 1

Okay, I am going to take a stab at this. I accomplished what (I think) you are trying to do. My application has 3 ListViews, and each list contains different content fetched from an online source and populates a ViewPager using custom adapters and ListViews. The custom adapter is then assigned to a fragment on a PagerAdapter. I copied a lot of my code from a Google resource, and will try to outline what I did.

First, I added a ViewPager to my layout for my MainActivity

activity_main.xml:

<android.support.v4.view.ViewPager 
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <!-- add a PagerTitleStrip -->
    <android.support.v4.view.PagerTitleStrip 
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>

Then, I created a separate ListView layout I could use for my custom adapters:

listview.xml

<ListView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="#E6E6E6"
    android:background="#E6E6E6"
    tools:context=".MainActivity" />

After I had these set, I dug into my activity. The rest takes place within MainActivity.java:

First, lay out some variables:

public class MainActivity extends FragmentActivity implements OnNavigationListener {

    // your pager adapter
    SectionsPagerAdapter mSectionsPagerAdapter;
    ViewPager mViewPager;

    // your custom adapters (look this up on your own if you do not understand)
    ArrayList<ListEntry> listOneArrayList = null;
    ArrayList<ListEntry> listTwoArrayList = null;   
    CustomAdapterListOne customAdapterListOne = null;
    CustomAdapterListTwo customAdapterListTwo = null;


    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // more on that in the next block...
    }
}

Now, let's get into onCreate() and start creating!

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // set up your pager adapter
    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mViewPager.setAdapter(mSectionsPagerAdapter);

    // if you want to set a default view:
    mViewPager.setCurrentItem(0);   

    // now, run some AsyncTasks to load up our lists
    // I use AsyncTasks because I fetch my data from a server
    new generateListOne().execute();
    new generateListTwo().execute();

}


/*
 * Get the entries and create a list adapter
 */
private class generateListOne extends AsyncTask<String, Void, Object> {     
    @Override
    protected Object doInBackground(String... args) {
        listOneArrayList = new ArrayList<ListEntry>();
        // this is where I would do all of my networking stuff
        // and populate my arraylist
        return null;
    }

    @Override
    protected void onPostExecute(Object result) {
        // you have to create a new xml layout for 'listview_row' to use here v
        customAdapterListOne = new CustomAdapterListOne(self, R.layout.listview_row, listOneArrayList);
        /** Very important! This is where you specify where the list goes: **/
        // * Note: Fragment pages start at 0!
        ListSectionFragment fragment = (ListSectionFragment) getSupportFragmentManager().findFragmentByTag(
            "android:switcher:"+R.id.viewpager+":0"); // <- this is where you specify where the list goes       
        if (fragment != null) {                 // <- Could be null if not instantiated yet
            if(fragment.getView() != null) {
                customAdapterListOne.notifyDataSetChanged();
                fragment.updateListOneDisplay(customAdapterListOne);
            }
        }           
    }       
}

I'm not going to write out generateListTwo(), but hopefully you understand the concept from generateListOne(). Pay very close attention to what is happening in onPostExecute(). Now, we have to write out the FragmentPagerAdapter and our ListSection Fragment. Also, we have to include our custom list Adapter. All of that stuff follows:

/*
 * Your Custom Adapter Class
 */    
private class CustomAdapterListOne extends ArrayAdapter<ListEntry> {
    /*
     * Read up on the rest of this for custom adapter if you 
     * are unfamilar. There are plenty of resources.. 
     * 
     * I am not going to type it all out.
     */
}

/*
 * SectionsPagerAdapter class for FragmentPagerAdapter title
 */
public class SectionsPagerAdapter extends FragmentPagerAdapter {
    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new ListSectionFragment();
        Bundle args = new Bundle();
        args.putInt(ListSectionFragment.ARG_SECTION_NUMBER, i + 1);
        fragment.setArguments(args);
        return fragment;            
    }

    @Override
    public int getCount() {
        // make sure this is correct
        int yourNumberOfLists = 5;
        return yourNumberOfLists;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0: return "First List";
            case 1: return "Second List";
            //case 2: etc..

        }
        return null;
    }

    public boolean onInterceptTouchEvent(MotionEvent event) {
        return false;
    }
}

/*
 * ListSectionFragment class for ListFragment(s)
 */
public static class ListSectionFragment extends ListFragment {

    public static final String ARG_SECTION_NUMBER = "section_number";
    public static int CURRENT_SECTION = 0;

    static ListSectionFragment newInstance(int num) {
        ListSectionFragment fragment = new ListSectionFragment();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;        
    }

    public void updateListOneDisplay(ArrayAdapter<ListEntry> listOneAdapter) {
        setListAdapter(listOneAdapter);
    }

    public void updateListTwoDisplay(ArrayAdapter<ListEntry> listTwoAdapter) {
        setListAdapter(listTwoAdapter);
    }

    // etc..

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Bundle args = getArguments();
        CURRENT_SECTION = args.getInt(ARG_SECTION_NUMBER);
        // note, we are using your listview here v
        View view = inflater.inflate(R.layout.listview, container, false);
        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        // and just for kicks:
        Log.i(TAG, "Item clicked: " + position);
    }

}

Don't forget your last } to close out the MainActivity.java class. Hopefully this helps someone, I know it took me forever to figure out. The effect that this code provides is similar to that of the Android Place application.

Edit: I forgot to mention when the list loads. When a list gains focus, it also loads the previous and next list. This makes it possible to transition to it and have it already be there ready to go. For example:

You go to list 2 and list 1 and list 3 are loaded. You then go to list 3 (and it transitions smoothly because it is loaded already), and list 4 and list 2 are loaded. This ensures that when you transition to a new list, it is already loaded or in the process of being generated.