Android view pager with page indicator

user1602259 picture user1602259 · Sep 7, 2012 · Viewed 100.3k times · Source

I need to get page indicator in the view pager file with images. Here is my code.

public class IndicatorActivity extends Activity {


 /** Called when the activity is first created. */
    @Override

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

            MyPagerAdapter adapter = new MyPagerAdapter();
            ViewPager myPager = (ViewPager) findViewById(R.id.pager);
            myPager.setAdapter(adapter);
            myPager.setCurrentItem(0);
            TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicat);
            indicator.setViewPager( myPager );
    }
}

In this code, i got an error in TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicat); as TitlePageIndicator cannot be resolved to a type. What is this error. How can I resolve it?

here is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
    <com.viewpagerindicator.TitlePageIndicator
    android:id="@+id/indicat"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" />
</LinearLayout>

What code do I need to write in the TitlePageIndicator? I want to do this without using fragments.

Me also created a class such as:

class MyPagerAdapter extends PagerAdapter {

     private static Integer[] titles = new Integer[] 
                { 
        R.drawable.jk,R.drawable.lm,R.drawable.no
                };

    public int getCount() {
            return 3;
    }

    public Object instantiateItem(View collection, int position) {

            LayoutInflater inflater = (LayoutInflater) collection.getContext()
                            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view;
            ImageView iv;

            view = inflater.inflate(R.layout.first, null);

            ((ViewPager) collection).addView(view, 0);
            switch (position) {
            case 0:
                iv = (ImageView)view.findViewById(R.id.imageView1);
                iv.setImageResource(titles[position]);
                    break;
            case 1:
                iv = (ImageView)view.findViewById(R.id.imageView1);
                iv.setImageResource(titles[position]);
                    break;
            case 2:
                 iv = (ImageView)view.findViewById(R.id.imageView1);
                iv.setImageResource(titles[position]);
                    break;
            }
            return view;
    }

    public void destroyItem(View arg0, int arg1, Object arg2) {
            ((ViewPager) arg0).removeView((View) arg2);

    }



    public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == ((View) arg1);

    }

}

Did I want to do anything more than this class?

Thanks in advance for help

Answer

vuhung3990 picture vuhung3990 · Jan 23, 2015

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