Merge pull request #1 from swapnil1104/animation

Animation support for GraphView
swapnil1104 · Mar 8, 2020 · 41a6e58 · 41a6e58
2 parents 129244b + ebae724
commit 41a6e58
Show file tree

Hide file tree

Showing 13 changed files with 327 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -5,8 +5,10 @@
 
 A highly customizable and performant custom view to render curved line graph.
 
-![screenshot 1](documentation/images/1.png)
-![screenshot 2](documentation/images/2.png)
+![Animation demo](documentation/images/animation_demo.gif)
+![Animation with straight & curved](documentation/images/straight_curved_demo.gif)
+![Animation with opaque color](documentation/images/animation_demo2.gif)
+![Animated and non animated graph](documentation/images/static_dynamic_graph_demo.gif)
 ## Packed with features
 - Add multiple line graphs within one graph plane.
 - Extensible styling options.
@@ -86,6 +88,7 @@ GraphData gd = GraphData.builder(this)
        .setStraightLine(true)                                                   // true for straight line; false for curved line graph
        .setPointRadius(10)                                                      // set point radius
        .setPointColor(R.color.Red)                                              // set point color
+       .animateLine(true)                                                       // Trigger animation for the particular graph line!
        .build();
 ```
 
@@ -97,7 +100,6 @@ dscription of the params:
 - gds... : is the array of GraphData objects.
 
 
-
 ## Sample Code
 ```
 curveGraphView = findViewById(R.id.cgv);
@@ -111,6 +113,7 @@ curveGraphView.configure(
                 .setNoDataMsg(" No Data ")                                              // Message when no data is provided to the view.
                 .setxAxisScaleTextColor(R.color.Black)                                  // Set X axis scale text color.
                 .setyAxisScaleTextColor(R.color.Black)                                  // Set Y axis scale text color
+                .setAnimationDuration(2000)                                             // Set animation duration to be used after set data.
                 .build()
 );
 
@@ -141,5 +144,14 @@ GraphData gd2 = GraphData.builder(this)
         .build();
 
 
-curveGraphView.setData(5, 1000, gd, gd2);
+//TODO(Swapnil) Optimize the setting logic code.
+/** This needs to be done, onMeasure of Layout isn't called if setData is called in onCreate 
+  * If anyone can take this up as their first issue, it'd be great!
+  */
+new Handler().postDelayed(new Runnable() {
+    @Override
+    public void run() {
+        curveGraphView.setData(5, 1000, gd, gd2);
+    }
+}, 250);
 ```
diff --git a/app/src/main/java/com/broooapps/curvegraphview/MainActivity.java b/app/src/main/java/com/broooapps/curvegraphview/MainActivity.java
@@ -3,13 +3,17 @@
 import androidx.appcompat.app.AppCompatActivity;
 
 import android.os.Bundle;
+import android.os.Handler;
 
 import com.broooapps.graphview.CurveGraphConfig;
 import com.broooapps.graphview.CurveGraphView;
 import com.broooapps.graphview.models.GraphData;
 import com.broooapps.graphview.models.PointMap;
 
 public class MainActivity extends AppCompatActivity {
+
+
+    CurveGraphView curveGraphView2;
     CurveGraphView curveGraphView;
 
     @Override
@@ -21,48 +25,59 @@ protected void onCreate(Bundle savedInstanceState) {
 
         curveGraphView.configure(
                 new CurveGraphConfig.Builder(this)
-                        .setAxisColor(R.color.Blue)                                           // Set X and Y axis line color stroke.
-                        .setIntervalDisplayCount(7)                                           // Set number of values to be displayed in X ax
+                        .setAxisColor(R.color.Blue)                                            // Set number of values to be displayed in X ax
                         .setGuidelineCount(4)                                                   // Set number of background guidelines to be shown.
                         .setGuidelineColor(R.color.Red)                                         // Set color of the visible guidelines.
                         .setNoDataMsg(" No Data ")                                              // Message when no data is provided to the view.
                         .setxAxisScaleTextColor(R.color.Black)                                  // Set X axis scale text color.
                         .setyAxisScaleTextColor(R.color.Black)                                  // Set Y axis scale text color
+                        .setAnimationDuration(2000)                                             // Set Animation Duration
                         .build()
         );
 
 
         PointMap pointMap = new PointMap();
-        pointMap.addPoint(0, 100);
         pointMap.addPoint(1, 200);
-        pointMap.addPoint(2, 500);
         pointMap.addPoint(3, 400);
         pointMap.addPoint(4, 100);
         pointMap.addPoint(5, 600);
 
-        GraphData gd = GraphData.builder(this)
+        final GraphData gd = GraphData.builder(this)
                 .setPointMap(pointMap)
                 .setGraphStroke(R.color.Black)
-                .setGraphGradient(R.color.gradientStartColor, R.color.gradientEndColor)
+                .setGraphGradient(R.color.gradientStartColor2, R.color.gradientEndColor2)
+                .animateLine(true)
                 .setPointColor(R.color.Red)
                 .setPointRadius(5)
                 .setStraightLine(true)
                 .build();
 
         PointMap p2 = new PointMap();
-        p2.addPoint(0, 140);
-        p2.addPoint(1, 700);
+        p2.addPoint(0, 440);
+        p2.addPoint(1, 0);
         p2.addPoint(2, 100);
         p2.addPoint(3, 0);
-        p2.addPoint(4, 190);
+        p2.addPoint(4, 400);
+        p2.addPoint(5, 200);
 
-        GraphData gd2 = GraphData.builder(this)
+        final GraphData gd2 = GraphData.builder(this)
                 .setPointMap(p2)
                 .setGraphStroke(R.color.Green)
                 .setGraphGradient(R.color.gradientStartColor, R.color.gradientEndColor)
+                .animateLine(true)
                 .build();
 
+        new Handler().postDelayed(new Runnable() {
+            @Override
+            public void run() {
+                curveGraphView.setData(5, 600, gd, gd2);
+            }
+        }, 250);
+    }
+
+    @Override
+    protected void onResume() {
+        super.onResume();
 
-        curveGraphView.setData(5, 1000, gd);
     }
 }
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -6,12 +6,13 @@
     android:layout_height="match_parent"
     tools:context=".MainActivity">
 
+
     <com.broooapps.graphview.CurveGraphView
         android:id="@+id/cgv"
         android:layout_width="0dp"
         android:layout_height="250dp"
-        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="1.0"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -4,8 +4,10 @@
     <color name="colorPrimaryDark">#00574B</color>
     <color name="colorAccent">#D81B60</color>
 
-    <color name="gradientStartColor">#B59C27B0</color>
-    <color name="gradientEndColor">#C6311B92</color>
+    <color name="gradientStartColor">#C34DD0</color>
+    <color name="gradientEndColor">#4A4DD0</color>
+    <color name="gradientStartColor2">#FFC400</color>
+    <color name="gradientEndColor2">#B2FF59</color>
 
 
 </resources>
diff --git a/documentation/images/animation_demo.gif b/documentation/images/animation_demo.gif
diff --git a/documentation/images/animation_demo2.gif b/documentation/images/animation_demo2.gif
diff --git a/documentation/images/static_dynamic_graph_demo.gif b/documentation/images/static_dynamic_graph_demo.gif
diff --git a/documentation/images/straight_curved_demo.gif b/documentation/images/straight_curved_demo.gif
diff --git a/graphview/src/main/java/com/broooapps/graphview/CurveGraphConfig.java b/graphview/src/main/java/com/broooapps/graphview/CurveGraphConfig.java
@@ -1,5 +1,6 @@
 package com.broooapps.graphview;
 
+import android.app.AlertDialog.Builder;
 import android.content.Context;
 
 import androidx.annotation.ColorInt;
@@ -28,6 +29,8 @@ public class CurveGraphConfig {
 
     int intervalCount;
 
+    long animationDuration;
+
     String noDataMsg;
 
     private CurveGraphConfig(Builder builder) {
@@ -38,6 +41,7 @@ private CurveGraphConfig(Builder builder) {
         intervalCount = (builder.intervalCount == 0) ? 5 : builder.intervalCount;
         guidelineCount = (builder.guidelineCount == 0) ? 5 : builder.guidelineCount;
         noDataMsg = (builder.noDataMsg == null) ? "NO DATA" : builder.noDataMsg;
+        animationDuration = builder.animationDuration;
         builder.ctxWeakRef.clear();
     }
 
@@ -60,6 +64,8 @@ public static class Builder {
 
         int intervalCount = 0;
 
+        long animationDuration = 2000;
+
         String noDataMsg = null;
 
         private Builder() {
@@ -104,6 +110,11 @@ public Builder setIntervalDisplayCount(int intervalCount) {
             return this;
         }
 
+        public Builder setAnimationDuration(long duration) {
+            this.animationDuration = duration;
+            return this;
+        }
+
         public CurveGraphConfig build() {
             return new CurveGraphConfig(this);
         }