Dots design in Viewpager with androidx

Question

Applying the solution of this link Android ViewPager with bottom dots I found that in androidx, with implementation "com.google.android.material:material:1.0.0" I cannot adjust the width of the dots and I cannot adjust the margin between the dots.

<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">
<!-- activity_screen_slide.xml -->
<androidx.viewpager.widget.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/viewPagerDots"
        app:tabIndicatorFullWidth="false"
        app:tabPaddingStart="16dp"
        app:tabPaddingEnd="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabBackground="@drawable/tab_dot_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />
</RelativeLayout>

drawable/viewpager_dot_indicator_default.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >

    <solid
        android:color="@color/colorPrimary" />
</shape>

drawable/viewpager_dot_indicator_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:height="160dp"
        android:width="160dp"/>
  <solid
        android:color="@color/red" />
</shape>

This is what i want

this is what i have

score 0 · Accepted Answer · answered Apr 19 '20 at 18:41

If you want dots in for your viewpager I suggest you to use this code. It will give you perfect dots as you choose.

First create a linear layout for the dots and set its orientation to horizontal.

Then in your Java file declare the array of textview

TextView[] setDots;

Now add the following code snippet.

private void addDots(int position){

    setDots = new TextView[3]; // No. of dots. Here you'll get three dots.
    dots.removeAllViews();

    for (int i = 0; i<setDots.length; i++){
        setDots[i] = new TextView(this);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            setDots[i].setText(HtmlCompat.fromHtml("&#8226;", HtmlCompat.FROM_HTML_MODE_LEGACY));
        }
        setDots[i].setTextSize(35); //Dots size.

        dots.addView(setDots[i]);
    }

    if (setDots.length > 0){
        setDots[position].setTextColor(getResources().getColor(R.color.colorPrimaryDark, getTheme())); //Change the color as your need.
    }
}

Then inside the ViewPager.OnPageChangedListener add the dots.

 @Override
 public void onPageSelected(int position) {
            addDots(position);
 }

Finally i used gradientDrawable instead TextView – Ornitologo Apr 20 '20 at 07:51 — Ornitologo, Apr 20 '20 at 07:51

Dots design in Viewpager with androidx

1 Answers1