Android ViewPagerIndicator

Overview

Paging indicator widgets that are compatible with the ViewPager from the Android Support Library to improve discoverability of content.

ViewPagerIndicator is very useful library for paging. There are many types of paging indicator. You can research about this library from this link

78edd926-e53b-11e5-9a06-8386ae00e269 a23074ec-e53b-11e5-9aaa-8af3d1b4e180 b25c3dba-e53b-11e5-9652-21b39b10c405

This above example is CirclePageIndicator

How to use

  1. Include ViewPagerIndicator library
    Android-ViewPagerIndicator is presented as an Android library project
  2. Add layout to project
  3. <RelativeLayout
        android:id="@+id/layout_products_carousel_root_layout"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/layout_products_carousel_view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"/>
    
        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/layout_products_carousel_indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/layout_products_carousel_view_pager"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="@dimen/fragment_products_carousel_indicator_padding_bottom"/>
    </RelativeLayout>
    
  4. Add adapter
  5. this.productsCarouselViewPager = (ViewPager) view.findViewById(R.id.layout_products_carousel_view_pager);
    this.productsCarouselIndicator = (CirclePageIndicator) view.findViewById(R.id.layout_products_carousel_indicator);
    
    FragmentManager manager = super.getSupportFragmentManager();
    ProductsCarouselFragmentAdapter adapter = new ProductsCarouselFragmentAdapter(manager);
    this.productsCarouselViewPager.setAdapter(adapter);
    this.productsCarouselIndicator.setViewPager(this.productsCarouselViewPager);
    
  6. ProductsCarouselFragmentAdapter
  7. public class ProductsCarouselFragmentAdapter extends FragmentPagerAdapter implements IconPagerAdapter {
        public ProductsCarouselFragmentAdapter(FragmentManager fm) {
            super(fm);
        }
    
        @Override
        public Fragment getItem(int position) {
            return ProductsCarouselFragment.newInstance(position);
        }
    
        @Override
        public int getCount() {
            return 3;
        }
    
        @Override
        public int getIconResId(int index) {
            return R.drawable.ic_logo;
        }
    }
    
  8. ProductsCarouselFragment
  9. public final class ProductsCarouselFragment extends Fragment {
        private static final String TAG = ProductsCarouselFragment.class.getSimpleName();
    
        private int position;
    
        public static ProductsCarouselFragment newInstance(int position) {
            ProductsCarouselFragment fragment = new ProductsCarouselFragment();
            fragment.position = position;
            return fragment;
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View layout = inflater.inflate(R.layout.fragment_products_carousel, container, false);
            ButterKnife.bind(this, layout);
            this.drawView();
            return layout;
        }
    
        private void drawView() {
            // Insert your code here
        }
    }
    

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s