Android ViewPager's dots indictor is not moving

I am building an intro slider for my app with a viewpager and dots indicator at the bottom with two buttons for login and sign in , First I had an error with the number of dots ; they multiplied everytime I swipe , then the dots were not moving when I swipe.

activity_main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_intro"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<LinearLayout
    android:id="@+id/layoutDots"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="80dp"
    android:orientation="horizontal"></LinearLayout>

<Button
    android:id="@+id/btn_login"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_toEndOf="@+id/btn_join"
    android:layout_toRightOf="@+id/btn_join"
    android:background="#C1403D"
    android:onClick="btnLoginClick"
    android:text="Se connecter"
    android:textColor="@android:color/white" />

<Button
    android:id="@+id/btn_join"
    android:layout_width="193dp"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:background="#303952"
    android:onClick="btnJoinClick"
    android:text="S'enregistrer"
    android:textColor="@android:color/white" />

</RelativeLayout>

slide_layout.xml :

the simple slide code :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_screen">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <TextView
        android:id="@+id/slide_heading"
        android:text="header"
        android:textAlignment="center"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="@dimen/slide_title"
        android:textStyle="bold" />

    <TextView
        android:text="Description"
        android:id="@+id/slide_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="@dimen/desc_padding"
        android:paddingRight="@dimen/desc_padding"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="17dp" />

</LinearLayout>
</RelativeLayout>

SlidesAdapter.java :

public class SlidesAdapter extends PagerAdapter {

    Context context;

    public SlidesAdapter(Context context) {
        this.context = context;
    }

    public SlidesAdapter() {
    }

    public String [] slide_headings= {
            "Connectez-vous",
            "Gérez vos tâches rapidement",
            "Suivez vos progrés facilement",
            "Accéder aux services de votre université"
    };

    public String [] slide_descriptions = {
            "à \"app name\"",
            "Organisez votre travail et vos études et controlez les\n" +
                    "grâce à un agenda facile à utiliser",
            "Enregistrer les notes de matières et suivez vos progrés",
            "Découvrez les clubs, bibliothéques et les services de votre université"
    };

    @Override
    public int getCount() {
        return slide_headings.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object obj) {
        return view == obj;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);

        View view = layoutInflater.inflate(R.layout.slide_layout, container, false);

        TextView slideHeading = (TextView) view.findViewById(R.id.slide_heading);
        TextView slideDescription = (TextView) view.findViewById(R.id.slide_description);

        slideHeading.setText(slide_headings[position]);
        slideDescription.setText(slide_descriptions[position]);

        ViewPager vp = (ViewPager) container;
        container.addView(view,0);

        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ViewPager vp = (ViewPager) container;
        View view = (View) object;
        vp.removeView(view);
    }
}

MainActivity.java:

public class MainActivity extends Activity {

    private ViewPager viewPager;
    private SlidesAdapter slidesAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnLogin, btnJoin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager =  findViewById(R.id.view_pager);
        dotsLayout = findViewById(R.id.layoutDots);
        btnLogin = findViewById(R.id.btn_login);
        btnJoin = findViewById(R.id.btn_join);

        slidesAdapter = new SlidesAdapter(this);
        viewPager.setAdapter(slidesAdapter);

        addBottomDots(0);

        viewPager.addOnPageChangeListener(viewListener);

    }

    private void addBottomDots(int position) {

        dots = new TextView[4];

        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(getResources().getColor(R.color.dot_inactive));
            dotsLayout.addView(dots[i]);
        }

        if(dots.length>0){
          dots[position].setTextColor(getResources().getColor(R.color.dot_active));
        }
    }

    ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    };

}

One way could be that you use circle pager indicator instead of manually adding dots.

In your gradle add :

implementation 'fr.avianey.com.viewpagerindicator:library:2.4.1@aar'

activity_main.xml :

   <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btn_login"
        >
    </android.support.v4.view.ViewPager>

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circle_page_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/_8sdp"
        android:layout_above="@+id/btn_login"
        app:radius="4dp"/>

Then in your MainActivity.java

slidesAdapter = new SlidesAdapter(this);
viewPager.setAdapter(slidesAdapter);
mPageIndicator = (CirclePageIndicator) findViewById(R.id.circle_page_indicator);
mPageIndicator.setViewPager(mVwPager);