Tutorial - Implement Android View Pager with Dot Indicator
Android does not have a “Dot Page Indicator” similar to most launchers or some apps where when you swipe between multiple pages, it indicates you on which page you are currently on, out of the available pages.
For this reason I created a simple tutorial to create something similar to the above needs but using radio buttons. There are so many custom components which are out there, which you can use for this purpose, but if you are someone who like to create a similar looking control by only using native components, then this tutorial is for you.
Let’s create a blank android studio project and add an empty activity. This will be our placeholder.
Add the following XML to the your placeholder activity layout. The parent layout can be anything but I’m using a linear layout for my desired style.
Linear Layout orientations - The parent Linear layout orientation must be set to vertical and the nested one which contains the radio buttons must have the orientation to horizontal.
Radiogroup - This is used to group all the buttons so that only one button is clicked within the group at any given time.
android:buttonTint - This determines the color of the radio button but sadly only works in API 21 and above.
Let’s add the Activity code
Let’s create variables to assign out UI components
Now let’s assign these variables on onCreate method and bind to listeners
Now let’s write the pager adapter. If we are not going to use this adapter anywhere else lets define it as a private class.
Now you will have some compilation errors as Page1Fragment, Page2Fragment and Page3Fragment are not defined. Not to worry we will define them now.
Lets create fragments that can be loaded as pages, for demo purposes, let’s create 3 pages.
rinse and repeat 2 more times for Page 2 and Page 3 make sure you name the classes as per the names given in the Pager adapter.
That’s it, you should end up with a dot page indicator similar to the one demoed in at the start of the article. If you have any questions or clarifications, Please leave your comments below.