A simple page-indicator for your android view-pager
May 28, 2017
1 minute read
Every app I did needed some kind of slider, like on-boards or walkthroughs, product sliders, help tutorials, photo slide-shows, etc.
In the past I´ve done some view pagers with those circle page indicators in Android that involved using either 3rd party libraries or a ton of code. That was before Lollipop came out. This is now very obvious and ridiculously simple but I´m sharing it here in case you don´t know about it.
With a little xml we are going to convert this:
into something like this:
Making the connection between the view-pager and our page indicator (TabLayout) takes a single line:
So we now need to make a TabLayout look like a page indicator.
Good news are that it´s pretty easy:
tabPaddingStart and tabPaddingEnd will define the separation between the dots.
I´ve used a LinearLayout here for brevety but you could use whatever layout you need. It really doesn´t matter.
To have TabLayout available in your project you must install the nuget Xamarin.Android.Support.Design.
Now take a look at the dot_selector.xml. It defines the the selected/unselected states:
The selected state (selected_dot.xml):
And the default state (default_dot.xml), that is pretty much the same with a different color:
As you may guess, android:thickness is the size of the dot.
Pixyll is an open-source Jekyll theme that's built by John Otander.
When he's not writing code and building things, he likes to ski. A. Lot.