locked
How to add dot indicators with ViewPager RRS feed

  • Question

  • User393763 posted

    I'm very new to development in general but am having a hard time finding tutorials/resources detailing how to add dot indicators to a view pager. these dots "show" which view page element you're on. If anyone has some tutorials/guides/code examples that i can take a look at it would be greatly appreciated

    Monday, April 6, 2020 6:01 PM

Answers

  • User393764 posted

    Hello, if you need some basic dot indicator with your pager you can try this . I have written in MainActivity.cs, but you can move it in your adapter.

    ```

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/indicator"
    android:layout_alignParentBottom="true"
    android:gravity="center_horizontal"/>
    <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_alignParentTop="true"/>
    

    ```

    ``` public class MainActivity : AppCompatActivity { private ViewPager _viewPager { get; set; } private LinearLayout _dotsLayout { get; set; } private TextView[] _dots { get; set; }

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.activity_main);
             _dotsLayout = FindViewById<LinearLayout>(Resource.Id.indicator);
            _viewPager = FindViewById<ViewPager>(Resource.Id.pager);
            _viewPager.PageSelected += _viewPager_PageSelected;  //subscribe to viewPager page change
            AddDotsIndicator(0); //draw indicator at start position
        }
    
        private void _viewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
        {
            AddDotsIndicator(e.Position);
        }
    
        private void AddDotsIndicator(int pos)
        {
            _dots = new TextView[5];
            _dotsLayout.RemoveAllViews();
            for (int i = 0; i < _dots.Length; i++)
            {
                _dots[i] = new TextView(this);
                _dots[i].Text = Html.FromHtml("&#8226").ToString();
                _dots[i].TextSize = 35;
                _dots[i].SetTextColor(Android.Graphics.Color.Rgb(171, 169, 166));// customize your colors
                _dotsLayout.AddView(_dots[i]);
            }
            if (_dots.Length > 0)
                _dots[pos].SetTextColor(Android.Graphics.Color.White); //change indicator color on selected page
        }
    } 
    

    ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, April 6, 2020 7:12 PM

All replies

  • User393764 posted

    Hello, if you need some basic dot indicator with your pager you can try this . I have written in MainActivity.cs, but you can move it in your adapter.

    ```

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/indicator"
    android:layout_alignParentBottom="true"
    android:gravity="center_horizontal"/>
    <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_alignParentTop="true"/>
    

    ```

    ``` public class MainActivity : AppCompatActivity { private ViewPager _viewPager { get; set; } private LinearLayout _dotsLayout { get; set; } private TextView[] _dots { get; set; }

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.activity_main);
             _dotsLayout = FindViewById<LinearLayout>(Resource.Id.indicator);
            _viewPager = FindViewById<ViewPager>(Resource.Id.pager);
            _viewPager.PageSelected += _viewPager_PageSelected;  //subscribe to viewPager page change
            AddDotsIndicator(0); //draw indicator at start position
        }
    
        private void _viewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
        {
            AddDotsIndicator(e.Position);
        }
    
        private void AddDotsIndicator(int pos)
        {
            _dots = new TextView[5];
            _dotsLayout.RemoveAllViews();
            for (int i = 0; i < _dots.Length; i++)
            {
                _dots[i] = new TextView(this);
                _dots[i].Text = Html.FromHtml("&#8226").ToString();
                _dots[i].TextSize = 35;
                _dots[i].SetTextColor(Android.Graphics.Color.Rgb(171, 169, 166));// customize your colors
                _dotsLayout.AddView(_dots[i]);
            }
            if (_dots.Length > 0)
                _dots[pos].SetTextColor(Android.Graphics.Color.White); //change indicator color on selected page
        }
    } 
    

    ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, April 6, 2020 7:12 PM
  • User393763 posted

    Thank you very much :smile:

    Monday, April 6, 2020 8:20 PM