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

Question

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?

Intelligibility

Answer 1

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.

Intelligibility

Answer 2

Place this code is your java class:

@Override
protected void onCreate(Bundle savedBundle) {
    // TODO Auto-generated method stub
    super.onCreate(savedBundle);
    addDots();//setup dot layout 
    selectDot(0); //set initial dot position
 }

protected void addDots() {
        dots = new ArrayList<ImageView>();
        LinearLayout dotsLayout = (LinearLayout) findViewById(R.id.pager_dots);

        for (int i = 0; i < NUM_OF_DOTS; i++) {
            ImageView dot = new ImageView(this);
            dot.setImageDrawable(getResources().getDrawable(
                    R.drawable.ic_pager_dot_not_selected));

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(5, 0, 5, 0);
            dotsLayout.addView(dot, params);

            dots.add(dot);
        }
    }

    public void selectDot(int idx) {
        Resources res = getResources();
        for (int i = 0; i < NUM_PAGES; i++) {
            int drawableId = (i == idx) ? (R.drawable.ic_pager_dot_selected)
                    : (R.drawable.ic_pager_dot_not_selected);
            Drawable drawable = res.getDrawable(drawableId);
            dots.get(i).setImageDrawable(drawable);
        }
    }

Here is the layout.xml

 <LinearLayout
        android:id="@+id/pager_dots"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/activity_wizard_footer"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="5dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" />

Here is the dot images.

Treenatreenail

What element should the XML use? Should it be inside the Viewpager or not? – Intelligibility

@Intelligibility Use outside the Viewpager layout. – Treenatreenail

But what element should it be? You close the XML tag, but don't open it. – Intelligibility

Thank you. Do you also have the drawable files for the dots? – Intelligibility

@Intelligibility drawable also added – Treenatreenail

I might be stupid, but how would you use these PNGs? I'm only used to XMLs, and can't get the PNGs working in any way – Intelligibility

The dots you provided are PNG files. When I import these into Android Studio, they go into the folder MipMaps. All images I ever worked with are XML files, which are located in the drawable folder. I normally get these files via R.drawable.filename, but I don't know how to use the files from the mipmap folder. – Intelligibility

@Intelligibility move files from mipmap to drawable and then use them – Treenatreenail