Rectangular Page Indicator

README.md

@@ -1,16 +1,16 @@
 
-###**PageIndicatorView**
+### **PageIndicatorView**
 [ ![Download](https://api.bintray.com/packages/romandanylyk/maven/pageindicatorview/images/download.svg) ](https://bintray.com/romandanylyk/maven/pageindicatorview/_latestVersion)[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-PageIndicatorView-green.svg?style=true)](https://android-arsenal.com/details/1/4555)  
 [![API](https://img.shields.io/badge/API-14%2B-brightgreen.svg?style=flat)](https://android-arsenal.com/api?level=14)
 
 
-`PageIndicatorView` will simplify your life while you working with Android `ViewPager` and need to indicate selected page. It's easy to setup and customize as you need with run-time preview rendering.
+`PageIndicatorView` is light library to indicate ViewPager's selected page with different animations and ability to customize it as you need.
 
-![](https://github.com/romandanylyk/PageIndicatorView/blob/master/assets/preview_anim_drop.gif?raw=true)
+![](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/preview_anim_drop.gif)
 
-###**Integration**
+### **Integration**
 To add `pageindicatorview` to your project, first make sure in root `build.gradle` you have specified the following repository:
-```java
+```groovy
     repositories {
         jcenter()
     }
@@ -20,12 +20,24 @@ To add `pageindicatorview` to your project, first make sure in root `build.gradl
 Once you make sure you have `jcenter` repository in your project, all you need to do is to add the following line in `dependencies` section of your project `build.gradle`.
 
 See latest library version [ ![Download](https://api.bintray.com/packages/romandanylyk/maven/pageindicatorview/images/download.svg) ](https://bintray.com/romandanylyk/maven/pageindicatorview/_latestVersion)
-```java
+```groovy
 compile 'com.romandanylyk:pageindicatorview:X.X.X'
 ```
-Keep in mind, that `PageIndicatorView` has min [API level 14](https://developer.android.com/about/dashboards/index.html)
+If your project already use `appcompat-v7` support library, you can omit `PageIndicatorView` dependencies by adding a single .aar file to your project, that will decrease total amount of methods used in your project.
+
+```groovy
+compile 'com.romandanylyk:pageindicatorview:X.X.X@aar'
+```
+
+Keep in mind, that `PageIndicatorView` has min [API level 14](https://developer.android.com/about/dashboards/index.html) and these dependencies:
+
+```groovy
+ compile 'com.android.support:support-annotations:25.3.0'
+ compile 'com.android.support:support-compat:25.3.0'
+ compile 'com.android.support:support-core-ui:25.3.0'
+```
 
-###**Usage Sample**
+### **Usage Sample**
 During implementation of `PageIndicatorView` I tried to make it's setup as easy as possible. 
 After you set adapter to your `ViewPager`, all you need to do is to `setViewPager()` and that's it! `PageIndicatorView` will get count from your adapter and start working with instance of your `ViewPager` automatically.  
 
@@ -48,18 +60,23 @@ Keep in mind that all public methods are also exist as attributes, so you can ev
         attrs:piv_viewPager="@id/viewPager"/>
 ```
 
-###**Customization**
+### **Customization**
 One of the most important feature of every custom view is ability to customize its look as user need. By calling the following methods (or attributes) you will be able to customize `PageIndicatorView` as you need.
 
 ```java
+//set shape
+setShape(IndicatorShape shape)
 //set size
 setCount(int count)
 setDynamicCount(boolean dynamicCount)
-
+setCornerRadius(int cornerRadiusDp)
 setRadius(int radiusDp)
 setPadding(int paddingDp)
 setStrokeWidth(int strokeDp)
 
+setAutoVisibility(boolean autoVisibility)
+setOrientation(Orientation orientation)
+
 //set color
 setUnselectedColor(int color)
 setSelectedColor(int color)
@@ -74,33 +91,28 @@ setProgress(int selectingPosition, float progress)
 setSelection(int position)
 ```
 
-```xml
-// set orientation
-app:orientation="{vertical||horizontal}"
-```
-
 ![](https://github.com/romandanylyk/PageIndicatorView/blob/master/assets/attributes.gif?raw=true)
 
 Here you can see all the animations `PageIndicatorView` support.
 
-Name| Support version| Preview
--------- | --- | ---
-`AnimationType.NONE`| 0.0.1 | ![anim_none](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_none.gif)
-`AnimationType.COLOR`| 0.0.1 |![anim_color](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_color.gif)
-`AnimationType.SCALE`| 0.0.1 |![anim_scale](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_scale.gif)
-`AnimationType.SLIDE`| 0.0.1 |![anim_slide](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_slide.gif)
-`AnimationType.WORM`| 0.0.1 |![anim_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_worm.gif)
-`AnimationType.FILL`| 0.0.6 |![anim_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_fill.gif)
-`AnimationType.THIN_WORM`| 0.0.7 |![anim_thin_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_thin_worm.gif)
-`AnimationType.DROP`| 0.1.0 |![anim_drop](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_drop.gif)
-`AnimationType.SWAP`| 0.1.1 |![anim_swap](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_swap.gif)
-
-###**Release Note**
+Name| Circle Supported| Circle Preview | Rectangle Supported | Rectangle Preview  
+-------- | --- | --- | --- | --| 
+`AnimationType.NONE`| 0.0.1 | ![anim_none](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_none.gif)|TBD|![anim_rect_none](assets/anim_rect_none.gif)
+`AnimationType.COLOR`| 0.0.1 |![anim_color](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_color.gif)|TBD|![anim_rect_color](assets/anim_rect_color.gif)
+`AnimationType.SCALE`| 0.0.1 |![anim_scale](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_scale.gif)|TBD|![anim_rect_scale](assets/anim_rect_scale.gif)
+`AnimationType.SLIDE`| 0.0.1 |![anim_slide](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_slide.gif)|TBD|![anim_rect_slide](assets/anim_rect_slide.gif)
+`AnimationType.WORM`| 0.0.1 |![anim_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_worm.gif)|TODO|
+`AnimationType.FILL`| 0.0.6 |![anim_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_fill.gif)|TBD|![anim_rect_fill](assets/anim_rect_fill.gif)
+`AnimationType.THIN_WORM`| 0.0.7 |![anim_thin_worm](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_thin_worm.gif)|TODO|
+`AnimationType.DROP`| 0.1.0 |![anim_drop](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_drop.gif)|TBD|![anim_rect_drop](assets/anim_rect_drop.gif)
+`AnimationType.SWAP`| 0.1.1 |![anim_swap](https://raw.githubusercontent.com/romandanylyk/PageIndicatorView/master/assets/anim_swap.gif)|TBD|![anim_rect_swap](assets/anim_rect_swap.gif)
+
+### **Release Note**
 See release notes on [github releases](https://github.com/romandanylyk/PageIndicatorView/releases) or [Bintray release notes](https://bintray.com/romandanylyk/maven/pageindicatorview#release).
 
-###**License**
+### **License**
 
-    Copyright 2016 Roman Danylyk
+    Copyright 2017 Roman Danylyk
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

pageindicatorview/build.gradle

@@ -13,7 +13,7 @@ ext {
     siteUrl = 'https://github.com/romandanylyk/PageIndicatorView'
     gitUrl = 'https://github.com/romandanylyk/PageIndicatorView.git'
 
-    libraryVersion = '0.1.1'
+    libraryVersion = '0.2.0'
 
     developerId = 'romandanylyk'
     developerName = 'Roman Danylyk'

pageindicatorview/src/main/java/com/rd/PageIndicatorView.java

@@ -15,6 +15,7 @@
 import android.util.Pair;
 import android.view.View;
 import com.rd.animation.type.*;
+import com.rd.draw.IndicatorShape;
 import com.rd.draw.data.Indicator;
 import com.rd.draw.data.Orientation;
 import com.rd.draw.data.PositionSavedState;
@@ -395,6 +396,24 @@ public long getAnimationDuration() {
         return manager.indicator().getAnimationDuration();
     }
 
+
+    /**
+     * Set the shape to display as an indicator.
+     * Default animation type is {@link IndicatorShape#CIRCLE}.
+     *
+     * @param shape type of shape, one of {@link IndicatorShape}
+     */
+    public void setShape(@Nullable IndicatorShape shape) {
+        manager.onValueUpdated(null);
+
+        if (shape!= null) {
+            manager.indicator().setShape(shape);
+        } else {
+            manager.indicator().setShape(IndicatorShape.CIRCLE);
+        }
+        invalidate();
+    }
+
     /**
      * Set animation type to perform while selecting new circle indicator.
      * Default animation type is {@link AnimationType#NONE}.

pageindicatorview/src/main/java/com/rd/draw/IndicatorShape.java

@@ -0,0 +1,3 @@
+package com.rd.draw;
+
+public enum IndicatorShape { CIRCLE, RECTANGLE}

pageindicatorview/src/main/java/com/rd/draw/controller/AttributeController.java

@@ -8,6 +8,7 @@
 import android.util.AttributeSet;
 import android.view.View;
 import com.rd.animation.type.*;
+import com.rd.draw.IndicatorShape;
 import com.rd.draw.data.Indicator;
 import com.rd.draw.data.Orientation;
 import com.rd.draw.data.RtlMode;
@@ -28,6 +29,7 @@ public void init(@NonNull Context context, @Nullable AttributeSet attrs) {
         initColorAttribute(typedArray);
         initAnimationAttribute(typedArray);
         initSizeAttribute(typedArray);
+        initShapeAttribute(typedArray);
         typedArray.recycle();
     }
 
@@ -86,6 +88,11 @@ private void initAnimationAttribute(@NonNull TypedArray typedArray) {
         indicator.setRtlMode(rtlMode);
     }
 
+    private void initShapeAttribute(@NonNull TypedArray typedArray) {
+        int shapeIndex = typedArray.getInt(R.styleable.PageIndicatorView_piv_indicatorShape,IndicatorShape.CIRCLE.ordinal());
+        indicator.setShape(getIndicatorShape(shapeIndex));
+    }
+
     private void initSizeAttribute(@NonNull TypedArray typedArray) {
         int orientationIndex = typedArray.getInt(R.styleable.PageIndicatorView_piv_orientation, Orientation.HORIZONTAL.ordinal());
         Orientation orientation;
@@ -123,11 +130,29 @@ private void initSizeAttribute(@NonNull TypedArray typedArray) {
             stroke = 0;
         }
 
+        int rectWidth = (int) typedArray.getDimension(R.styleable.PageIndicatorView_piv_rectWidth,DensityUtils.dpToPx(Indicator.DEFAULT_RECT_WIDTH_DP));
+        if( rectWidth < 0 ) {
+            rectWidth = 0;
+        }
+
+        int rectHeight = (int) typedArray.getDimension(R.styleable.PageIndicatorView_piv_rectHeight,DensityUtils.dpToPx(Indicator.DEFAULT_RECT_HEIGHT_DP));
+        if( rectHeight < 0 ) {
+            rectHeight = 0;
+        }
+
+        int cornerRadius = (int) typedArray.getDimension(R.styleable.PageIndicatorView_piv_cornerRadius,DensityUtils.dpToPx(Indicator.DEFAULT_CORNER_RADIUS_DP));
+        if( cornerRadius < 0 ) {
+            cornerRadius = 0;
+        }
+
         indicator.setRadius(radius);
         indicator.setOrientation(orientation);
         indicator.setPadding(padding);
         indicator.setScaleFactor(scaleFactor);
         indicator.setStroke(stroke);
+        indicator.setRectWidth(rectWidth);
+        indicator.setRectHeight(rectHeight);
+        indicator.setCornerRadius(cornerRadius);
     }
 
     private AnimationType getAnimationType(int index) {
@@ -150,9 +175,20 @@ private AnimationType getAnimationType(int index) {
                 return AnimationType.DROP;
             case 8:
                 return AnimationType.SWAP;
+            default:
+                return AnimationType.NONE;
         }
+    }
 
-        return AnimationType.NONE;
+    private IndicatorShape getIndicatorShape(int index) {
+        switch (index) {
+            case 0:
+                return IndicatorShape.CIRCLE;
+            case 1:
+                return IndicatorShape.RECTANGLE;
+            default:
+                return IndicatorShape.CIRCLE;
+        }
     }
 
     private RtlMode getRtlMode(int index) {

pageindicatorview/src/main/java/com/rd/draw/data/Indicator.java

@@ -3,6 +3,7 @@
 import android.support.annotation.NonNull;
 import android.view.View;
 import com.rd.animation.type.AnimationType;
+import com.rd.draw.IndicatorShape;
 
 public class Indicator {
 
@@ -13,6 +14,10 @@ public class Indicator {
     public static final int DEFAULT_RADIUS_DP = 6;
     public static final int DEFAULT_PADDING_DP = 8;
 
+    public static final int DEFAULT_RECT_WIDTH_DP = 20;
+    public static final int DEFAULT_RECT_HEIGHT_DP = 12;
+    public static final int DEFAULT_CORNER_RADIUS_DP = 3;
+
     private int height;
     private int width;
     private int radius;
@@ -45,6 +50,10 @@ public class Indicator {
     private Orientation orientation;
     private AnimationType animationType;
     private RtlMode rtlMode;
+    private IndicatorShape shape;
+    private int rectWidth;
+    private int rectHeight;
+    private int cornerRadius;
 
     public int getHeight() {
         return height;
@@ -249,4 +258,36 @@ public int getViewPagerId() {
     public void setViewPagerId(int viewPagerId) {
         this.viewPagerId = viewPagerId;
     }
+
+    public void setShape(IndicatorShape shape) {
+        this.shape = shape;
+    }
+
+    public IndicatorShape getShape() {
+        return shape;
+    }
+
+    public void setRectWidth(int rectWidth) {
+        this.rectWidth = rectWidth;
+    }
+
+    public int getRectWidth() {
+        return rectWidth;
+    }
+
+    public void setRectHeight(int rectHeight) {
+        this.rectHeight = rectHeight;
+    }
+
+    public int getRectHeight() {
+        return rectHeight;
+    }
+
+    public void setCornerRadius(int cornerRadius) {
+        this.cornerRadius = cornerRadius;
+    }
+
+    public int getCornerRadius() {
+        return cornerRadius;
+    }
 }

pageindicatorview/src/main/java/com/rd/draw/drawer/type/BaseDrawer.java

@@ -1,7 +1,11 @@
 package com.rd.draw.drawer.type;
 
+import android.graphics.Canvas;
 import android.graphics.Paint;
+import android.graphics.RectF;
 import android.support.annotation.NonNull;
+
+import com.rd.draw.IndicatorShape;
 import com.rd.draw.data.Indicator;
 
 class BaseDrawer {
@@ -13,4 +17,55 @@ class BaseDrawer {
         this.paint = paint;
         this.indicator = indicator;
     }
+
+    private void drawRectWithCenter(Canvas canvas, Paint paint,
+                                      int centerX, int centerY, int width, int height) {
+        canvas.drawRect(centerX-(width/2),
+                centerY-(height/2),
+                centerX+(width/2),
+                centerY+(height/2),
+                paint);
+    }
+
+    private void drawRectWithCenter(Canvas canvas, Paint paint,
+                                    int centerX, int centerY, int width, int height, int cornerRadius) {
+        canvas.drawRoundRect( new RectF(centerX-(width/2),
+                centerY-(height/2),
+                centerX+(width/2),
+                centerY+(height/2)),
+                cornerRadius,cornerRadius,paint);
+    }
+
+    void drawIndicator(Canvas canvas, Paint paint, int centerX, int centerY ) {
+        drawIndicator(canvas,paint,centerX,centerY,
+                indicator.getRadius(),indicator.getRectWidth(),indicator.getRectHeight());
+    }
+
+    void drawIndicator(Canvas canvas, Paint paint, int centerX, int centerY,
+                       float radius, int rectWidth, int rectHeight ) {
+        if ( indicator.getShape() == IndicatorShape.CIRCLE ) {
+            canvas.drawCircle(centerX, centerY, radius, paint);
+        } else if ( indicator.getShape() == IndicatorShape.RECTANGLE ) {
+            if ( indicator.getCornerRadius() > 0 ) {
+                drawRectWithCenter(
+                        canvas,
+                        paint,
+                        centerX,
+                        centerY,
+                        rectWidth,
+                        rectHeight,
+                        indicator.getCornerRadius());
+            } else {
+                drawRectWithCenter(
+                        canvas,
+                        paint,
+                        centerX,
+                        centerY,
+                        rectWidth,
+                        rectHeight);
+            }
+        }
+    }
+
+
 }