I want to use a ViewPageIndicator
for my ViewPager
. I've found this DotsPageIndicator, but it seems like it's only for AndroidWear
. Funilly enough, there is pretty much exactly the same thing on the homepage of every Android 6 device, as can be seen in the image below (click for larger image).
So, is there something I'm just simply missing, and can it be implemented just as easy as all default Android stuff? Or do I still have to use an external library? If the latter is true, how would I do that?
I have found the answer to this question quite some time ago, but forgot I still had this one open, so I'm going to try to answer it now, with what I remember from back then. So be aware, it might not be perfect, but I'll try to make it as good as possible.
You will need the viewPagerIndicator
library. I believe the way to do this is to open your build.gradle (Module: app)
Gradle script, then go to dependencies
and add compile 'com.viewpagerindicator:library:2.4.1@aar'
The result should look something like this:
...
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile "com.android.support:support-v13:24.1.1"
compile 'com.android.support:appcompat-v7:24.1.1'
compile 'com.android.support:support-v4:24.1.1'
compile 'com.android.support:design:24.1.1'
compile 'com.google.android.gms:play-services-appindexing:9.4.0'
compile 'com.viewpagerindicator:library:2.4.1@aar'
}
Next, you'll need to add the PageIndicator
of your liking (I picked the Circle version) to your XML. This should be in the same XML file as the ViewPager
you want to have these indicators for. My file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<com.example.tim.timapp.CustomStuff.Misc.CustomViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"/>
<!-- Note that I use a custom ViewPager for app-specific reasons. -->
<!-- It doesn't matter if you use a custom or default VP as far as I know. -->
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/circlePageIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fillColor="@color/colorPrimary"
app:strokeColor="@color/lightGrey"/>
</LinearLayout>
Then, you'll need to initialize the PageIndicator
, and set its ViewPager
. This is done in the onCreate....()
method for whatever you're using. As a basic rule: This part should be in the same method that returns your view. Mine for instance is in a onCreateDialog()
method, because I have a ViewPager
inside a Dialog
.
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
LayoutInflater inflater = getActivity().getLayoutInflater();
// Inflate view
view = inflater.inflate(R.layout.fragment_viewpager, null);
// Initialize viewpager and set max amount of off screen pages
mPager = (ViewPager) view.findViewById(R.id.pager);
mPager.setOffscreenPageLimit(3);
// Initialize pageradapter and set adapter to viewpager
mPagerAdapter = new SettingsAdapter(inflater);
mPager.setAdapter(mPagerAdapter);
mPagerAdapter.notifyDataSetChanged();
// Initialize circlePageIndicator and set viewpager for it
CirclePageIndicator circlePageIndicator = (CirclePageIndicator) view.findViewById(R.id.circlePageIndicator);
circlePageIndicator.setViewPager(mPager);
}
If I recall correctly, that should be all.
For reference, you can check out the website for this ViewPagerIndicator
here:
http://viewpagerindicator.com
Please be aware: As far as I remember, you do not have to download anything from this website (at least not if you use Android Studio
). The first step you did should have taken care of getting the VPI
ready.
Hope this helps. Feel free to ask for clarification. Again, I can't guarantee this is exactly how it works, but it should get you going.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With