CODEWITHSUNDEEP
androidandroid-viewpagerviewpagerindicator
Dima
Dima

Reputation: 1510

Space between elements of the indicator

How to increase/reduce space between elements of the indicator in ViewPagerIndicator?

Upvotes: 8

Views: 4863

Answers (4)

Elliott
Elliott

Reputation: 1

If you're using a vector drawable, you can fiddle with the viewportWidth and viewportHeight to create spacing between TabLayout indicators if using the dots style.

Upvotes: 0

M. Marmor
M. Marmor

Reputation: 440

You can set space by LayoutParams:

int numOfIndicators = 5;
int space = 20;

tabLayout.setupWithViewPager(myViewPager, true);
ConstraintLayout.LayoutParams params = 
         (ConstraintLayout.LayoutParams)tabLayout.getLayoutParams();//ConstraintLayout is my layout manager
params.width = numOfIndicators * space;
tabLayout.setLayoutParams(params);

(I used tabLayout with ViewPager as in this example: Android ViewPager with bottom dots)

Upvotes: 1

Omar Faroque Anik
Omar Faroque Anik

Reputation: 2609

I have used CirclePageIndicator. I was able to make more space between two indicator by the step:

  1. Open the source code of CirclePageIndicator and find the variable mRadius

  2. At the line number around 235, you will find a line like below: 

    final float threeRadius = mRadius * (some value here)
  3. Change this some value, and play with it. I used 5 for my case, it gave me a good result.

Hope it solved your problem.

Upvotes: 9

F.O.O
F.O.O

Reputation: 4960

There's no documented way to do this without some digging in.

I think @Md_Omar's answer is wrong as this increases the size of the indicator but not their separating distance.

And you could just use app:radius="5dp" instead if thats what you wanted.

See sample here

https://github.com/JakeWharton/ViewPagerIndicator/blob/master/sample/res/layout/themed_circles.xml

Upvotes: 2

Related Questions