Android view pager with page indicator Android view pager with page indicator android android

Android view pager with page indicator


UPDATE: 22/03/2017

main fragment layout:

       <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"            xmlns:app="http://schemas.android.com/apk/res-auto"            android:layout_width="match_parent"            android:layout_height="match_parent">            <android.support.v4.view.ViewPager                android:id="@+id/viewpager"                android:layout_width="match_parent"                android:layout_height="match_parent" />            <RadioGroup                android:id="@+id/page_group"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_horizontal|bottom"                android:layout_marginBottom="@dimen/margin_help_container"                android:orientation="horizontal">                <RadioButton                    android:id="@+id/page1"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:checked="true" />                <RadioButton                    android:id="@+id/page2"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content" />                <RadioButton                    android:id="@+id/page3"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content" />            </RadioGroup>        </FrameLayout>

set up view and event on your fragment like this:

        mViewPaper = (ViewPager) view.findViewById(R.id.viewpager);        mViewPaper.setAdapter(adapder);        mPageGroup = (RadioGroup) view.findViewById(R.id.page_group);        mPageGroup.setOnCheckedChangeListener(this);        mViewPaper.addOnPageChangeListener(this);       *************************************************       *************************************************    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {        // when current page change -> update radio button state        int radioButtonId = mPageGroup.getChildAt(position).getId();        mPageGroup.check(radioButtonId);    }    @Override    public void onPageScrollStateChanged(int state) {    }    @Override    public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {        // when checked radio button -> update current page        RadioButton checkedRadioButton = (RadioButton)radioGroup.findViewById(checkedId);        // get index of checked radio button        int index = radioGroup.indexOfChild(checkedRadioButton);        // update current page        mViewPaper.setCurrentItem(index), true);    }

custom checkbox state: Custom checkbox image android

Viewpager tutorial: http://architects.dzone.com/articles/android-tutorial-using

enter image description here


Here are a few things you need to do:

1-Download the library if you haven't already done that.

2- Import into Eclipse.

3- Set you project to use the library:Project-> Properties -> Android -> Scroll down to Library section, click Add... and select viewpagerindicator.

4- Now you should be able to import com.viewpagerindicator.TitlePageIndicator.

Now about implementing this without using fragments:

In the sample that comes with viewpagerindicatior, you can see that the library is being used with a ViewPager which has a FragmentPagerAdapter.

But in fact the library itself is Fragment independant. It just needs a ViewPager.So just use a PagerAdapter instead of a FragmentPagerAdapter and you're good to go.


I know this has already been answered, but for anybody looking for a simple, no-frills implementation of a ViewPager indicator, I've implemented one that I've open sourced. For anyone finding Jake Wharton's version a bit complex for their needs, have a look at https://github.com/jarrodrobins/SimpleViewPagerIndicator.