Every app I did need some kind of slider, like on-board 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:
var viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
viewPager.Adapter = new MyPagerAdapter(SupportFragmentManager, funkyList);
var dots = FindViewById<TabLayout>(Resource.Id.dots);
dots.SetupWithViewPager(viewPager, true);
So we now need to make a TabLayout look like a page indicator.
The good news are that it´s pretty easy:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingBottom="@dimen/activity_horizontal_margin">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginBottom="5dp"/>
<android.support.design.widget.TabLayout
android:id="@+id/dots"
android:layout_width="match_parent"
android:layout_height="26dp"
local:tabBackground="@drawable/dot_selector"
local:tabGravity="center"
local:tabIndicatorHeight="0dp"
local:tabPaddingStart="7dp"
local:tabPaddingEnd="7dp"/>
</LinearLayout>
tabPaddingStart and tabPaddingEnd will define the separation between the dots.
I´ve used a LinearLayout here for brevity but you could use whatever layout you need. It 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 selected/unselected states:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/selected_dot" android:state_selected="true"/>
<item android:drawable="@drawable/default_dot"/>
</selector>
The selected state (selected_dot.xml):
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false">
<solid android:color="@color/page_indicator_selected_color"/>
</shape>
</item>
</layer-list>
And the default state (default_dot.xml), that is pretty much the same with a different color:
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false">
<solid android:color="@color/page_indicator_default_color"/>
</shape>
</item>
</layer-list>
As you may guess, android:thickness is the size of the dot.
That´s it!
