# A simple page-indicator for your android view-pager

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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698361268862/65b17250-d431-48d8-9d26-70acf93565b1.png align="center")

into something like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698361283983/3aadf77b-ef36-43be-9355-1f03b1272612.png align="center")

Making the connection between the view-pager and our page indicator (`TabLayout`) takes a single line:

```csharp
var viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
viewPager.Adapter = new MyPagerAdapter(SupportFragmentManager, funkyList);

var dots = FindViewById<TabLayout>(Resource.Id.dots);
dots.SetupWithViewPager(viewPager, true); // <- magic here
```

So we now need to make a `TabLayout` look like a page indicator.  
The good news are that it´s pretty easy:

```xml
<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
<?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
<?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
<?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!