How do you create an Android View Pager with a dots indicator? -

probably many of (as me), have problem creating viewpager bottom dots, this:

how create such android viewpager?

all need are: viewpager, tablayout , 2 drawables selected , default dots.

firstly, have add tablayout our screen layout, , connect viewpager. can in 2 ways:

---

nested tablayout in viewpager

<android.support.v4.view.viewpager     android:id="@+id/photos_viewpager"     android:layout_width="match_parent"     android:layout_height="match_parent">      <android.support.design.widget.tablayout         android:layout_width="match_parent"         android:layout_height="wrap_content"/> </android.support.v4.view.viewpager> 

in case tablayout automatically connected viewpager, tablayout next viewpager, not on him.

---

separate tablayout

<android.support.v4.view.viewpager     android:id="@+id/photos_viewpager"     android:layout_width="match_parent"     android:layout_height="match_parent"/>  <android.support.design.widget.tablayout     android:id="@+id/tab_layout"     android:layout_width="match_parent"     android:layout_height="wrap_content"/> 

in case, can put tablayout anywhere, have connect tablayout viewpager programmatically

viewpager pager = (viewpager) view.findviewbyid(r.id.photos_viewpager); pageradapter adapter = new photosadapter(getchildfragmentmanager(), photosurl); pager.setadapter(adapter);  tablayout tablayout = (tablayout) view.findviewbyid(r.id.tab_layout); tablayout.setupwithviewpager(pager, true); 

once created our layout, have prepare our dots. create 3 files: selected_dot.xml, default_dot.xml , tab_selector.xml.

---

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="8dp"             android:uselevel="false">             <solid android:color="@color/coloraccent"/>         </shape>         </item> </layer-list> 

---

default_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="8dp"             android:uselevel="false">             <solid android:color="@android:color/darker_gray"/>         </shape>         </item> </layer-list> 

---

tab_selector.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> 

---

now need add 3 lines of code tablayout in our xml layout.

app:tabbackground="@drawable/tab_selector" app:tabgravity="center" app:tabindicatorheight="0dp"