Android 3rd Party Paging Control like the one in Etsy iPhone?

Question

I am working on an Android app. Our designer has the idea that we need a paging control looks like Etsy iPhone. (See the image below)

Basically you can swipe on the grey title bar or the content to switch screen.

Is there any existing 3rd party control does this?

enter image description here

score 1 · Accepted Answer · answered Sep 12 '12 at 20:21

I would recommend you to use Jake Whartons ViewPageIndicator(or just a normal ViewPager):

Create a Fragment for every of your Layouts and set the layout to your Fragment with the onCreateView() methode inside your fragment(only if you want to have different layouts. If you have the same Layout but just different data, you can just use one Fragment and pass the data in the getItem() methode)

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
        Bundle savedInstanceState) {

        return inflater.inflate(R.layout.layout, container, false);
    }

Now create a FragmentPagerAdapter there sould be a methode called getItem(). Switch the Position and set it to your Fragment:

@Override
            public Fragment getItem(int position) {
                switch(position){
                case 0:
                    TestFragment fragment = new TestFragment();  

                    return fragment;

                case 1:
                            TestFragment2 fragment2 = new TestFragment2();  
                    return fragment2;

                }

                return defaultFragment fragment3 = new defaultFragment();  
                    return fragment3;
            }

Now you should be able to swipe to your Layouts(Fragments) easily

Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead: http://stackoverflow.com/questions/12395413 — Kev, Sep 12 '12 at 21:51
@Kev I just copyed my own answer, that I posted a while back. But you are right, I'll flag it next time :) — Ahmad, Sep 12 '12 at 22:06

Vincent Mimoun-Prat · Answer 2 · 2012-09-12T20:26:59.650

You need to use the ViewPager widget. Check out the Android developer blog to get an idea about how it works: Horizontal View Swiping with ViewPager.

If you need backwards compatibility with Android 2.x, check out the Android Compatibility Library.

All explained there: Implement Horizontal Paging (Swipe Views)

Some code from that page:

public class CollectionDemoActivity extends FragmentActivity {
    // When requested, this adapter returns a DemoObjectFragment,
    // representing an object in the collection.
    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    ViewPager mViewPager;

    public void onCreate(Bundle savedInstanceState) {
        // ViewPager and its adapters use support library
        // fragments, so use getSupportFragmentManager.
        mDemoCollectionPagerAdapter =
                new DemoCollectionPagerAdapter(
                        getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mDemoCollectionPagerAdapter);
    }
}

// Since this is an object collection, use a FragmentStatePagerAdapter,
// and NOT a FragmentPagerAdapter.
public class DemoCollectionPagerAdapter extends
        FragmentStatePagerAdapter {
    public DemoCollectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new DemoObjectFragment();
        Bundle args = new Bundle();
        // Our object is just an integer :-P
        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public int getCount() {
        return 100;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "OBJECT " + (position + 1);
    }
}

// Instances of this class are fragments representing a single
// object in our collection.
public static class DemoObjectFragment extends Fragment {
    public static final String ARG_OBJECT = "object";

    @Override
    public View onCreateView(LayoutInflater inflater,
            ViewGroup container, Bundle savedInstanceState) {
        // The last two arguments ensure LayoutParams are inflated
        // properly.
        View rootView = inflater.inflate(
                R.layout.fragment_collection_object, container, false);
        Bundle args = getArguments();
        ((TextView) rootView.findViewById(android.R.id.text1)).setText(
                Integer.toString(args.getInt(ARG_OBJECT)));
        return rootView;
    }
}


<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />

</android.support.v4.view.ViewPager>

Android 3rd Party Paging Control like the one in Etsy iPhone?

2 Answers2