Android ViewPager with bottom dots

No need for that much code.

You can do all this stuff without coding so much by using only viewpager with tablayout.

Your main Layout:

<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:app="http://schemas.android.com/apk/res-auto"   android:layout_width="match_parent"   android:layout_height="wrap_content">   <android.support.v4.view.ViewPager       android:id="@+id/pager"       android:layout_width="match_parent"       android:layout_height="match_parent">   </android.support.v4.view.ViewPager>   <android.support.design.widget.TabLayout       android:id="@+id/tabDots"       android:layout_alignParentBottom="true"       android:layout_width="match_parent"       android:layout_height="wrap_content"       app:tabBackground="@drawable/tab_selector"       app:tabGravity="center"       app:tabIndicatorHeight="0dp"/></RelativeLayout>

Hook up your UI elements inactivity or fragment as follows:

Java Code:

mImageViewPager = (ViewPager) findViewById(R.id.pager);TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);tabLayout.setupWithViewPager(mImageViewPager, true);

That's it, you are good to go.

You will need to create the following xml resource file in the drawable folder.

tab_indicator_selected.xml

<?xml version="1.0" encoding="utf-8"?><shape    android:innerRadius="0dp"    android:shape="ring"    android:thickness="4dp"    android:useLevel="false"    xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="@color/colorAccent"/></shape>

tab_indicator_default.xml

<?xml version="1.0" encoding="utf-8"?>    <shape xmlns:android="http://schemas.android.com/apk/res/android"            android:innerRadius="0dp"            android:shape="oval"            android:thickness="2dp"            android:useLevel="false">            <solid android:color="@android:color/darker_gray"/>    </shape>

tab_selector.xml

 <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/tab_indicator_selected"          android:state_selected="true"/>    <item android:drawable="@drawable/tab_indicator_default"/></selector>

Feeling as lazy as I am? Well, all the above code is converted into a library!UsageAdd the following in your gradle:implementation 'com.chabbal:slidingdotsplash:1.0.2'Add the following to your Activity or Fragment layout.

<com.chabbal.slidingdotsplash.SlidingSplashView        android:id="@+id/splash"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:imageResources="@array/img_id_arr"/>

Create an integer array in strings.xml e.g.

<integer-array name="img_id_arr">   <item>@drawable/img1</item>   <item>@drawable/img2</item>   <item>@drawable/img3</item>   <item>@drawable/img4</item></integer-array>

Done!Extra in order to listen page changes use addOnPageChangeListener(listener);Github link.

My handmade solution:

In the layout:

<LinearLayout        android:orientation="horizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/dots"        />

And in the Activity

private final static int NUM_PAGES = 5;private ViewPager mViewPager;private List<ImageView> dots;@Overrideprotected void onCreate(Bundle savedInstanceState) {    // ...    addDots();}public void addDots() {    dots = new ArrayList<>();    LinearLayout dotsLayout = (LinearLayout)findViewById(R.id.dots);    for(int i = 0; i < NUM_PAGES; i++) {        ImageView dot = new ImageView(this);        dot.setImageDrawable(getResources().getDrawable(R.drawable.pager_dot_not_selected));        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                LinearLayout.LayoutParams.WRAP_CONTENT,                LinearLayout.LayoutParams.WRAP_CONTENT        );        dotsLayout.addView(dot, params);        dots.add(dot);    }    mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            selectDot(position);        }        @Override        public void onPageScrollStateChanged(int state) {        }    });}public void selectDot(int idx) {    Resources res = getResources();    for(int i = 0; i < NUM_PAGES; i++) {        int drawableId = (i==idx)?(R.drawable.pager_dot_selected):(R.drawable.pager_dot_not_selected);        Drawable drawable = res.getDrawable(drawableId);        dots.get(i).setImageDrawable(drawable);    }}

viewPager.addOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int position) {                switch (position) {    case 0:        img_page1.setImageResource(R.drawable.dot_selected);        img_page2.setImageResource(R.drawable.dot);        img_page3.setImageResource(R.drawable.dot);        img_page4.setImageResource(R.drawable.dot);        break;    case 1:        img_page1.setImageResource(R.drawable.dot);        img_page2.setImageResource(R.drawable.dot_selected);        img_page3.setImageResource(R.drawable.dot);        img_page4.setImageResource(R.drawable.dot);        break;    case 2:        img_page1.setImageResource(R.drawable.dot);        img_page2.setImageResource(R.drawable.dot);        img_page3.setImageResource(R.drawable.dot_selected);        img_page4.setImageResource(R.drawable.dot);        break;    case 3:        img_page1.setImageResource(R.drawable.dot);        img_page2.setImageResource(R.drawable.dot);        img_page3.setImageResource(R.drawable.dot);        img_page4.setImageResource(R.drawable.dot_selected);        break;    default:        break;    }            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            @Override            public void onPageScrollStateChanged(int arg0) {            }        });