Editing README.md _1

Author: swapnil1104

README.md

@@ -4,17 +4,8 @@
 
 A custom view to display information in a Linear Graph with smooth animations! 
 
-A customised EditText view serving the purpose of taking numeric **One Time Password** from a user. 
-With stunning animation, and high customizability.
-
 ![Demo with underline](images/demo.gif)
 
-## Packed with features
-- Add custom character limit.
-- Use your own color scheme.
-- Do not allow user changing cursor position for smooth functioning.
-
-
 ## How to integrate the library in your app?
 Step 1: Add it in your root build.gradle at the end of repositories:
 
@@ -29,100 +20,46 @@ Step 2. Add the dependency
 
 ```
 dependencies {
-    implementation 'com.github.swapnil1104:OtpEditText:{current_lib_ver}'
+    implementation 'com.github.swapnil1104:LinearGraphView:{current_lib_ver}'
 }
 ```
 Step 3. Add OtpEditText to your layout file
 
 ```
-<com.broooapps.otpedittext2.OtpEditText
+<com.broooapps.lineargraphview2.LinearGraphView
+    android:id="@+id/linear_graph_view"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:clickable="false"
-    android:cursorVisible="false"
-    android:digits="0123456789"
-    android:inputType="number"
-    android:maxLength="6"
-    android:padding="8dp"
-    android:textSize="30sp"
-    app:oev_primary_color="@color/red"
-    app:oev_secondary_color="@color/light_gray"
-    />
+    android:layout_height="wrap_content" />
 ```
 
-## How to customize the view.
-### Setting desired length for the OTP(One time password code)
-
-To set custom length of the OtpEditText, use 
-
-```android:maxLength="{your length}"```
-
-This will automatically generate the right amount of boxes for user to input the code in.
-
-### Setting primary custom color
-The primary color signifies the boundary of the box that requires input from user.
-To change that use,
-
-```app:oev_primary_color="@color/{your_color}"```
-
+Step 4. Refer this View in your activity file, create a List<DataModel> and populate it with your values, use this list and invoke `setData(List<DataModel> dataModel, int range)`.
 
-### Setting secondary custom color
-The secondary color signifies the boundary of the boxes that do not require input from user.
-To change that use,
+The second param is the entire span graph view, and `value` param in each DataModel object will occupy a percent length.
+Width of each item is calculated by `model.value / range * viewWidth`.
+```
+LinearGraphView lgv = findViewById(R.id.linear_graph_view);
 
-```app:oev_secondary_color="@color/{your_color}"```
+List<DataModel> dataList = new ArrayList<>();
 
-###  Using multiple style options.
-There are 4 style options that are available within the library for now.
-- rounded box
-- square box
-- underline
-- rounded underline
+dm.add(new DataModel("One", "#00ffff", 100));
+dm.add(new DataModel("Two", "#74EEA1", 250));
+dm.add(new DataModel("Three", "#f2002f", 100));
+dm.add(new DataModel("four", "#B61CB3", 180));
 
-To use any of these styles, please add ```app:oev_box_style="@string\{box_style_input}"```
-attribue.
-I have provided string resources for simpler usage.
-```
-    <string name="style_square">square_box</string>
-    <string name="style_rounded">rounded_box</string>
-    <string name="style_underline">underline</string>
-    <string name="style_rounded_underline">rounded_underline</string>
-```
-Suppose you want the rounded underline option to be displayed. Then, please add:
-`app:oev_box_style="@string/style_rounded_underline" ` in the OtpEditText xml code.
-
-### Masking input characters with Asterisk.
-Functionality to mask the input with any special character has been introduced. 
-To mask the input;
-```
-app:oev_mask_input="true" 
-```
-xml property must be introduced in the XML layout file.
+lgv.setData(dm, 999);
 
-#### Masking with any other special character.
-To mask input with any character other than `*` you can do the following;
-```
-app:oev_mask_character="ø"
 ```
+The above code will result in this:
+![Demo with underline](images/demo2.gif)
 
-P.S. Please note that, in case of masking with a special character other than `*`, specify string with length one, otherwise the input string will be truncated to length 1.
+## How to customize the view.
+### Setting custom border color
 
-### OnComplete callback for the View
-To implement an OnComplete callback, use `setOnCompleteListener` setter method and pass on an interface implementation.
-eg:
-```
-editText.setOnCompleteListener(new OnCompleteListener() {
-        @Override
-        public void onComplete(String value) {
-            Toast.makeText(MainActivity.this, "Completed " + value, Toast.LENGTH_SHORT).show();
-        }
-    });
-```
+To use a custom color for the border of LinearGraphView, use
 
-This callback will be triggered when the number of characters is equal to the `android:maxLength` value.
+```app:lgv_border_color="@color/colorAccent"```
 
-## For optimum usage; Please note.
-* Specify `android:textSize` according to your needs.
-* Specify `android:padding` according to your needs, there are no paddings drawn by default.
-* Specify `android:layout_height` according to the `textSize` you've provided. The view will try to center the text with a vertical biasing of `0.6f`.
+### Setting border animation duration
+To change the animation duration of the initial border transition, use
 
+```app:lgv_border_anim_duration="{TIME_IN_MS}"```

app/src/main/java/com/broooapps/lineargraphview/MainActivity.java

@@ -21,10 +21,10 @@ protected void onCreate(Bundle savedInstanceState) {
 
         List<DataModel> dm = new ArrayList<>();
 
-        dm.add(new DataModel("One", "#123123", 200));
-        dm.add(new DataModel("two", "#abcdef", 200));
-        dm.add(new DataModel("three", "#cdebad", 200));
-        dm.add(new DataModel("four",  "#abbcde", 200));
+        dm.add(new DataModel("One", "#00ffff", 100));
+        dm.add(new DataModel("Two", "#74EEA1", 250));
+        dm.add(new DataModel("Three", "#f2002f", 100));
+        dm.add(new DataModel("four", "#B61CB3", 180));
 
         lgv.setData(dm, 999);
     }

images/demo2.gif

@@ -5,7 +5,7 @@
 
 public class DataModel {
 
-    int data;
+    int value;
 
     @ColorInt
     int colorInt;
@@ -15,24 +15,24 @@ public class DataModel {
     @Nullable
     String title;
 
-    public DataModel(String title, int colorInt, int data) {
-        this.data = data;
+    public DataModel(String title, int colorInt, int value) {
+        this.value = value;
         this.title = title;
         this.colorInt = colorInt;
     }
 
-    public DataModel(String title, String colorRes, int data) {
-        this.data = data;
+    public DataModel(String title, String colorRes, int value) {
+        this.value = value;
         this.title = title;
         this.colorRes = colorRes;
     }
 
-    public int getData() {
-        return data;
+    public int getValue() {
+        return value;
     }
 
-    public void setData(int data) {
-        this.data = data;
+    public void setValue(int value) {
+        this.value = value;
     }
 
     public String getColorRes() {

lineargraphview2/src/main/java/com/broooapps/lineargraphview2/DataModel.java

@@ -214,7 +214,7 @@ public void startAnim() {
             paint.setColor(Color.parseColor(model.colorRes));
             dataPaintList.add(paint);
 
-            float curWidth = model.data / totalValue * width;
+            float curWidth = model.value / totalValue * width;
             if (curWidth < cornerRadius) {
                 curWidth = cornerRadius * 1.5F;
             }

lineargraphview2/src/main/java/com/broooapps/lineargraphview2/LinearGraphView.java

@@ -2,6 +2,6 @@
 <resources>
 
     <color name="linear_graph_border">#000</color>
-    <color name="linear_graph_bg">#f2f2f2</color>
+    <color name="linear_graph_bg">#B61CB3</color>
 
 </resources>