Home » Android » android – customize padding and margin in IconPageIndicator

android – customize padding and margin in IconPageIndicator

Posted by: admin June 15, 2020 Leave a comment

Questions:

I am trying to implement a custom IconPageIndicator – viewpager. I want to customize the margins and paddings of the icons displayed in com.viewpagerindicator.IconPageIndicator. So I wrote my custom IconPageIndicator and CustomLinearLayout. I changed the dividerPadding variable in CustomLinearLayout. Here is the code. But this doesn’t seem to work. The margins and paddings are still the same. Any help?

class CustomLinearLayout extends LinearLayout {
private static final int[] LL = new int[] {
/* 0 */ android.R.attr.divider,
/* 1 */ android.R.attr.showDividers,
/* 2 */ android.R.attr.dividerPadding,
};
private static final int LL_DIVIDER = 10;
private static final int LL_SHOW_DIVIDER = 2;
private static final int LL_DIVIDER_PADDING = 10;
private Drawable mDivider;
private int mDividerWidth;
private int mDividerHeight;
private int mShowDividers;
private int mDividerPadding;
public CustomLinearLayout(Context context, int themeAttr) {
super(context);
TypedArray a = context.obtainStyledAttributes(null, LL, themeAttr, 0);
setDividerDrawable(a.getDrawable(CustomLinearLayout.LL_DIVIDER));
mDividerPadding = a.getDimensionPixelSize(LL_DIVIDER_PADDING, 0);
mShowDividers = a.getInteger(LL_SHOW_DIVIDER, SHOW_DIVIDER_NONE);
a.recycle();
}
public void setDividerDrawable(Drawable divider) {
if (divider == mDivider) {
return;
}
mDivider = divider;
if (divider != null) {
mDividerWidth = divider.getIntrinsicWidth();
mDividerHeight = divider.getIntrinsicHeight();
} else {
mDividerWidth = 5;
mDividerHeight = 5;
}
setWillNotDraw(divider == null);
requestLayout();
}
@Override
protected void measureChildWithMargins(View child, int parentWidthMeasureSpec, int widthUsed, int parentHeightMeasureSpec, int heightUsed) {
final int index = indexOfChild(child);
final int orientation = getOrientation();
final LayoutParams params = (LayoutParams) child.getLayoutParams();
if (hasDividerBeforeChildAt(index)) {
if (orientation == VERTICAL) {
//Account for the divider by pushing everything up
params.topMargin = 10;
} else {
//Account for the divider by pushing everything left
params.leftMargin = 10;
}
}
final int count = getChildCount();
if (index == count - 1) {
if (hasDividerBeforeChildAt(count)) {
if (orientation == VERTICAL) {
params.bottomMargin = 10;
} else {
params.rightMargin = 10;
}
}
}
super.measureChildWithMargins(child, parentWidthMeasureSpec, widthUsed, parentHeightMeasureSpec, heightUsed);
}
@Override
protected void onDraw(Canvas canvas) {
if (mDivider != null) {
if (getOrientation() == VERTICAL) {
drawDividersVertical(canvas);
} else {
drawDividersHorizontal(canvas);
}
}
super.onDraw(canvas);
}
private void drawDividersVertical(Canvas canvas) {
final int count = getChildCount();
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child != null && child.getVisibility() != GONE) {
if (hasDividerBeforeChildAt(i)) {
final android.widget.LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) child.getLayoutParams();
final int top = child.getTop() - lp.topMargin/* - mDividerHeight*/;
drawHorizontalDivider(canvas, top);
}
}
}
if (hasDividerBeforeChildAt(count)) {
final View child = getChildAt(count - 1);
int bottom = 0;
if (child == null) {
bottom = getHeight() - getPaddingBottom() - mDividerHeight;
} else {
//final LayoutParams lp = (LayoutParams) child.getLayoutParams();
bottom = child.getBottom()/* + lp.bottomMargin*/;
}
drawHorizontalDivider(canvas, bottom);
}
}
private void drawDividersHorizontal(Canvas canvas) {
final int count = getChildCount();
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child != null && child.getVisibility() != GONE) {
if (hasDividerBeforeChildAt(i)) {
final android.widget.LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) child.getLayoutParams();
final int left = child.getLeft() - lp.leftMargin/* - mDividerWidth*/;
drawVerticalDivider(canvas, left);
}
}
}
if (hasDividerBeforeChildAt(count)) {
final View child = getChildAt(count - 1);
int right = 0;
if (child == null) {
right = getWidth() - getPaddingRight() - mDividerWidth;
} else {
//final LayoutParams lp = (LayoutParams) child.getLayoutParams();
right = child.getRight()/* + lp.rightMargin*/;
}
drawVerticalDivider(canvas, right);
}
}
private void drawHorizontalDivider(Canvas canvas, int top) {
mDivider.setBounds(getPaddingLeft() + mDividerPadding, top,
getWidth() - getPaddingRight() - mDividerPadding, top + mDividerHeight);
mDivider.draw(canvas);
}
private void drawVerticalDivider(Canvas canvas, int left) {
mDivider.setBounds(left, getPaddingTop() + mDividerPadding,
left + mDividerWidth, getHeight() - getPaddingBottom() - mDividerPadding);
mDivider.draw(canvas);
}
private boolean hasDividerBeforeChildAt(int childIndex) {
if (childIndex == 0 || childIndex == getChildCount()) {
return false;
}
if ((mShowDividers & SHOW_DIVIDER_MIDDLE) != 0) {
boolean hasVisibleViewBefore = false;
for (int i = childIndex - 1; i >= 0; i--) {
if (getChildAt(i).getVisibility() != GONE) {
hasVisibleViewBefore = true;
break;
}
}
return hasVisibleViewBefore;
}
return false;
}
}
public class CustomIconPageIndicator extends HorizontalScrollView implements PageIndicator {
private final CustomLinearLayout mIconsLayout;
private ViewPager mViewPager;
private OnPageChangeListener mListener;
private Runnable mIconSelector;
private int mSelectedIndex;
public CustomIconPageIndicator(Context context) {
this(context, null);
}
public CustomIconPageIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
setHorizontalScrollBarEnabled(false);
mIconsLayout = new CustomLinearLayout(context, com.viewpagerindicator.R.attr.vpiIconPageIndicatorStyle);
addView(mIconsLayout, new LayoutParams(WRAP_CONTENT, FILL_PARENT, Gravity.CENTER));
}
private void animateToIcon(final int position) {
final View iconView = mIconsLayout.getChildAt(position);
if (mIconSelector != null) {
removeCallbacks(mIconSelector);
}
mIconSelector = new Runnable() {
public void run() {
final int scrollPos = iconView.getLeft() - (getWidth() - iconView.getWidth()) / 2;
smoothScrollTo(scrollPos, 0);
mIconSelector = null;
}
};
post(mIconSelector);
}
@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
if (mIconSelector != null) {
// Re-post the selector we saved
post(mIconSelector);
}
}
@Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mIconSelector != null) {
removeCallbacks(mIconSelector);
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
if (mListener != null) {
mListener.onPageScrollStateChanged(arg0);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
if (mListener != null) {
mListener.onPageScrolled(arg0, arg1, arg2);
}
}
@Override
public void onPageSelected(int arg0) {
setCurrentItem(arg0);
if (mListener != null) {
mListener.onPageSelected(arg0);
}
}
@Override
public void setViewPager(ViewPager view) {
if (mViewPager == view) {
return;
}
if (mViewPager != null) {
mViewPager.setOnPageChangeListener(null);
}
PagerAdapter adapter = view.getAdapter();
if (adapter == null) {
throw new IllegalStateException("ViewPager does not have adapter instance.");
}
mViewPager = view;
view.setOnPageChangeListener(this);
notifyDataSetChanged();
}
public void notifyDataSetChanged() {
mIconsLayout.removeAllViews();
IconPagerAdapter iconAdapter = (IconPagerAdapter) mViewPager.getAdapter();
int count = iconAdapter.getCount();
for (int i = 0; i < count; i++) {
ImageView view = new ImageView(getContext(), null, com.viewpagerindicator.R.attr.vpiIconPageIndicatorStyle);
view.setImageResource(iconAdapter.getIconResId(i));
view.setTag(""+i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int viewPosition = Integer.parseInt(v.getTag().toString());
mViewPager.setCurrentItem(viewPosition);
}
});
mIconsLayout.addView(view);
}
if (mSelectedIndex > count) {
mSelectedIndex = count - 1;
}
setCurrentItem(mSelectedIndex);
requestLayout();
}
@Override
public void setViewPager(ViewPager view, int initialPosition) {
setViewPager(view);
setCurrentItem(initialPosition);
}
@Override
public void setCurrentItem(int item) {
if (mViewPager == null) {
throw new IllegalStateException("ViewPager has not been bound.");
}
mSelectedIndex = item;
mViewPager.setCurrentItem(item);
int tabCount = mIconsLayout.getChildCount();
for (int i = 0; i < tabCount; i++) {
View child = mIconsLayout.getChildAt(i);
boolean isSelected = (i == item);
child.setSelected(isSelected);
if (isSelected) {
animateToIcon(item);
}
}
}
@Override
public void setOnPageChangeListener(OnPageChangeListener listener) {
mListener = listener;
}
}
How to&Answers:

You are not setting margins correctly in right method.

Go Library project–>IconPageIndicator and edit notifyDataSetChanged() method as below:

 public void notifyDataSetChanged() { mIconsLayout.removeAllViews(); IconPagerAdapter iconAdapter = (IconPagerAdapter) mViewPager.getAdapter(); int count = iconAdapter.getCount(); for (int i = 0; i < count; i++) { ImageView view = new ImageView(getContext(), null, R.attr.vpiIconPageIndicatorStyle); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); lp.setMargins(10 , 10, 0 , 0 ); // Here you can set margins. view.setLayoutParams(lp); view.setImageResource(iconAdapter.getIconResId(i)); view.setTag(""+i); view.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { int viewPosition = Integer.parseInt(v.getTag().toString()); mViewPager.setCurrentItem(viewPosition); } }); mIconsLayout.addView(view); } if (mSelectedIndex > count) { mSelectedIndex = count - 1; } setCurrentItem(mSelectedIndex); requestLayout(); } 

don’t forget to clean the library project and rebuild it.I hope it works.

Answer:

You can define the padding on the drawable itself like this:

indicator.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:left="4dp" android:right="4dp"> <shape android:shape="oval"> <solid android:color="@color/white" /> <size android:width="10dp" android:height="10dp" /> </shape> </item> </layer-list> 

and change your adapter to specify the icon resource like this:

private class MyViewPagerAdapter extends FragmentPagerAdapter implements IconPagerAdapter { // suppressed other adapter methods @Override public int getIconResId(int i) { return R.drawable.page_indicator; } }