Adding a gap parameter to the CirclePageIndicator

Allows for extra distance between the circles if desired

Author: aldryd

library/res/values/vpi__attrs.xml

@@ -47,6 +47,8 @@
         <attr name="android:orientation"/>
         <!-- Radius of the circles. This is also the spacing between circles. -->
         <attr name="radius" format="dimension" />
+        <!-- Additional spacing between the circles. -->
+        <attr name="gap" format="dimension" />
         <!-- Whether or not the selected indicator snaps to the circles. -->
         <attr name="snap" format="boolean" />
         <!-- Color of the open circles. -->

library/res/values/vpi__defaults.xml

@@ -20,6 +20,7 @@
     <color name="default_circle_indicator_page_color">#00000000</color>
     <integer name="default_circle_indicator_orientation">0</integer>
     <dimen name="default_circle_indicator_radius">3dp</dimen>
+    <dimen name="default_circle_indicator_gap">0dp</dimen>
     <bool name="default_circle_indicator_snap">false</bool>
     <color name="default_circle_indicator_stroke_color">#FFDDDDDD</color>
     <dimen name="default_circle_indicator_stroke_width">1dp</dimen>

library/src/com/viewpagerindicator/CirclePageIndicator.java

@@ -45,6 +45,7 @@ public class CirclePageIndicator extends View implements PageIndicator {
     private static final int INVALID_POINTER = -1;
 
     private float mRadius;
+    private float mGapWidth;
     private final Paint mPaintPageFill = new Paint(ANTI_ALIAS_FLAG);
     private final Paint mPaintStroke = new Paint(ANTI_ALIAS_FLAG);
     private final Paint mPaintFill = new Paint(ANTI_ALIAS_FLAG);
@@ -84,6 +85,7 @@ public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
         final int defaultStrokeColor = res.getColor(R.color.default_circle_indicator_stroke_color);
         final float defaultStrokeWidth = res.getDimension(R.dimen.default_circle_indicator_stroke_width);
         final float defaultRadius = res.getDimension(R.dimen.default_circle_indicator_radius);
+        final float defaultGap = res.getDimension(R.dimen.default_circle_indicator_gap);
         final boolean defaultCentered = res.getBoolean(R.bool.default_circle_indicator_centered);
         final boolean defaultSnap = res.getBoolean(R.bool.default_circle_indicator_snap);
 
@@ -100,6 +102,7 @@ public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
         mPaintFill.setStyle(Style.FILL);
         mPaintFill.setColor(a.getColor(R.styleable.CirclePageIndicator_fillColor, defaultFillColor));
         mRadius = a.getDimension(R.styleable.CirclePageIndicator_radius, defaultRadius);
+        mGapWidth = a.getDimension(R.styleable.CirclePageIndicator_gap, defaultGap);
         mSnap = a.getBoolean(R.styleable.CirclePageIndicator_snap, defaultSnap);
 
         Drawable background = a.getDrawable(R.styleable.CirclePageIndicator_android_background);
@@ -185,6 +188,15 @@ public float getRadius() {
         return mRadius;
     }
 
+    public void setGapWidth(float gap) {
+        mGapWidth = gap;
+        invalidate();
+    }
+
+    public float getGapWidth() {
+        return mGapWidth;
+    }
+
     public void setSnap(boolean snap) {
         mSnap = snap;
         invalidate();
@@ -227,9 +239,9 @@ protected void onDraw(Canvas canvas) {
             shortPaddingBefore = getPaddingLeft();
         }
 
-        final float threeRadius = mRadius * 3;
+        final float threeRadius = mRadius * 3 + mGapWidth;
         final float shortOffset = shortPaddingBefore + mRadius;
-        float longOffset = longPaddingBefore + mRadius;
+        float longOffset = longPaddingBefore + mRadius + mGapWidth;
         if (mCentered) {
             longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / 2.0f) - ((count * threeRadius) / 2.0f);
         }

sample/res/layout/themed_circles.xml

@@ -34,6 +34,7 @@
         android:layout_width="fill_parent"
         android:background="#FFCCCCCC"
         app:radius="10dp"
+        app:gap="15dp"
         app:fillColor="#FF888888"
         app:pageColor="#88FF0000"
         app:strokeColor="#FF000000"

sample/src/com/viewpagerindicator/sample/SampleCirclesStyledMethods.java

@@ -22,6 +22,7 @@ protected void onCreate(Bundle savedInstanceState) {
         final float density = getResources().getDisplayMetrics().density;
         indicator.setBackgroundColor(0xFFCCCCCC);
         indicator.setRadius(10 * density);
+        indicator.setGapWidth(15 * density);
         indicator.setPageColor(0x880000FF);
         indicator.setFillColor(0xFF888888);
         indicator.setStrokeColor(0xFF000000);