Search code examples
androidandroid-viewpagerviewpagerindicator

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?


Solution

  • 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.