Android view pager with page indicator
Solution 1
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.
Solution 2
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
Solution 3
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.
Solution 4
I have also used the SimpleViewPagerIndicator from @JROD. It also crashes as described by @manuelJ.
According to his documentation:
SimpleViewPagerIndicator pageIndicator = (SimpleViewPagerIndicator) findViewById(R.id.page_indicator);
pageIndicator.setViewPager(pager);
Make sure you add this line as well:
pageIndicator.notifyDataSetChanged();
It crashes with an array out of bounds exception because the SimpleViewPagerIndicator is not getting instantiated properly and the items are empty. Calling the notifyDataSetChanged results in all the values being set properly or rather reset properly.
Solution 5
Just an improvement to the nice answer given by @vuhung3990. I implemented the solution and works great but if I touch one radio button it will be selected and nothing happens.
I suggest to also change page when a radio button is tapped. To do this, simply add a listener to the radioGroup:
mPager = (ViewPager) findViewById(R.id.pager);
final RadioGroup radioGroup = (RadioGroup)findViewById(R.id.radiogroup);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radioButton :
mPager.setCurrentItem(0, true);
break;
case R.id.radioButton2 :
mPager.setCurrentItem(1, true);
break;
case R.id.radioButton3 :
mPager.setCurrentItem(2, true);
break;
}
}
});
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on November 15, 2020Comments
-
Admin over 3 years
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);
asTitlePageIndicator 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