Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a default DotsPageIndicator for Android mobile (not wear)?

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?

like image 274
Timmiej93 Avatar asked Mar 25 '16 14:03

Timmiej93


1 Answers

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.

like image 76
Timmiej93 Avatar answered Oct 16 '22 17:10

Timmiej93