Merge pull request #14 from swapnil1104/interactive_animation

Added Shake animation

app/build.gradle

@@ -1,4 +1,6 @@
 apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android-extensions'
+apply plugin: 'kotlin-android'
 
 android {
     compileSdkVersion 28
@@ -28,4 +30,8 @@ dependencies {
     testImplementation 'junit:junit:4.12'
     androidTestImplementation 'androidx.test.ext:junit:1.1.1'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0'
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+}
+repositories {
+    mavenCentral()
 }

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

@@ -1,37 +1,45 @@
 package com.broooapps.otpedittext;
 
 import androidx.appcompat.app.AppCompatActivity;
+
+import android.annotation.SuppressLint;
 import android.os.Bundle;
 import android.view.View;
-import android.widget.EditText;
 import android.widget.TextView;
-import android.widget.Toast;
 
 import com.broooapps.otpedittext2.OnCompleteListener;
 import com.broooapps.otpedittext2.OtpEditText;
 
 public class MainActivity extends AppCompatActivity {
 
+    TextView textDisplay;
+    OtpEditText otpEditText;
+
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
-        OtpEditText editText = findViewById(R.id.top);
+        otpEditText = findViewById(R.id.oev_view);
+
+        textDisplay = findViewById(R.id.text_display);
+
 
-        editText.setOnCompleteListener(new OnCompleteListener() {
+        otpEditText.setOnCompleteListener(new OnCompleteListener() {
+            @SuppressLint("SetTextI18n")
             @Override
             public void onComplete(String value) {
-                Toast.makeText(MainActivity.this, "Completed " + value, Toast.LENGTH_SHORT).show();
+                textDisplay.setText("Entered Value: " + value);
             }
         });
 
+
     }
 
     public void displayText(View view) {
-
-        String input = String.valueOf(((EditText) findViewById(R.id.top)).getText());
-        ((TextView) findViewById(R.id.textView)).setText(input);
-
+        String otpValue = otpEditText.getOtpValue();
+        if (otpValue != null) {
+            textDisplay.setText("Entered Value: " + otpEditText.getOtpValue());
+        }
     }
 }

app/src/main/res/layout/activity_main.xml

@@ -4,55 +4,56 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#444444"
     tools:context=".MainActivity">
 
     <TextView
+        android:id="@+id/textView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:text="Hello World!"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="16dp"
+        android:text="Please enter the OTP"
+        app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
     <com.broooapps.otpedittext2.OtpEditText
-        android:id="@+id/top"
+        android:id="@+id/oev_view"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:clickable="false"
         android:cursorVisible="false"
         android:digits="0123456789"
         android:maxLength="6"
         android:padding="32dp"
-        app:oev_text_color="#dd1212"
+        android:hint="hi"
         android:textSize="30sp"
-        app:oev_primary_color="#CCFF00"
+        app:layout_constraintTop_toBottomOf="@+id/textView"
         app:oev_box_style="@string/style_rounded_underline"
-        app:oev_secondary_color="#DADADA"
-        app:layout_constraintTop_toTopOf="parent"
         app:oev_mask_character="*"
-        app:oev_mask_input="true" />
+        app:oev_mask_input="true"
+        app:oev_primary_color="#CCFF00"
+        app:oev_secondary_color="#DADADA"
+        app:oev_text_color="#dd1212"
+        tools:layout_editor_absoluteX="0dp" />
 
     <Button
         android:id="@+id/button"
-        android:layout_width="0dp"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:visibility="gone"
         android:onClick="displayText"
-        android:text="Click me"
+        android:text="Submit"
         app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.086"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/top" />
+        app:layout_constraintTop_toBottomOf="@id/oev_view" />
 
     <TextView
-        android:id="@+id/textView"
+        android:id="@+id/text_display"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="80dp"
+        android:layout_marginTop="15dp"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/button" />
-
+        app:layout_constraintStart_toEndOf="@+id/button"
+        app:layout_constraintTop_toBottomOf="@+id/oev_view" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

build.gradle

@@ -1,14 +1,16 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
+    ext.kotlin_version = '1.3.72'
     repositories {
         google()
         jcenter()
 
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:3.4.0'
-
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

otpedittext2/build.gradle

@@ -1,4 +1,6 @@
 apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android-extensions'
+apply plugin: 'kotlin-android'
 
 android {
     compileSdkVersion 28
@@ -30,4 +32,8 @@ dependencies {
     testImplementation 'junit:junit:4.12'
     androidTestImplementation 'androidx.test.ext:junit:1.1.1'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0'
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+}
+repositories {
+    mavenCentral()
 }

otpedittext2/src/main/java/com/broooapps/otpedittext2/OtpEditText.java

@@ -4,11 +4,12 @@
  * Created by Swapnil Tiwari on 2019-05-07.
  * [email protected]
  */
-
 import android.content.Context;
 import android.content.res.TypedArray;
 import android.graphics.Canvas;
 import android.graphics.Paint;
+
+import androidx.annotation.Nullable;
 import androidx.core.content.ContextCompat;
 import androidx.appcompat.widget.AppCompatEditText;
 import android.text.Editable;
@@ -18,12 +19,12 @@
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
-
+import android.view.animation.AnimationUtils;
 
 public class OtpEditText extends AppCompatEditText implements TextWatcher {
     public static final String XML_NAMESPACE_ANDROID = "http://schemas.android.com/apk/res/android";
 
-    private OnClickListener mClickListener;
+    private View.OnClickListener mClickListener;
 
     private Paint mLinesPaint;
     private Paint mStrokePaint;
@@ -69,9 +70,11 @@ public OtpEditText(Context context, AttributeSet attrs, int defStyleAttr) {
         init(context, attrs);
     }
 
-    private void init(Context context, AttributeSet attrs) {
+    private void init(Context context, @Nullable AttributeSet attrs) {
 
-        getAttrsFromTypedArray(attrs);
+        if (attrs != null) {
+            getAttrsFromTypedArray(attrs);
+        }
 
         mTextPaint = getPaint();
         mTextPaint.setColor(mTextColor);
@@ -168,9 +171,14 @@ private void getAttrsFromTypedArray(AttributeSet attributeSet) {
         a.recycle();
     }
 
-    @Override
-    public void setOnClickListener(OnClickListener l) {
-        mClickListener = l;
+    @Nullable
+    public String getOtpValue() {
+        if (String.valueOf(getText()).length() != mMaxLength) {
+            this.startAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.shake));
+            return null;
+        } else {
+            return String.valueOf(getText());
+        }
     }
 
     @Override
@@ -272,9 +280,6 @@ private void updateColorForLines(boolean next, boolean current) {
         }
     }
 
-    public void setOnCompleteListener(OnCompleteListener listener) {
-        completeListener = listener;
-    }
 
     @Override
     public void beforeTextChanged(CharSequence s, int start, int count, int after) {
@@ -290,4 +295,14 @@ public void afterTextChanged(Editable s) {
             completeListener.onComplete(String.valueOf(s));
         }
     }
+
+
+    @Override
+    public void setOnClickListener(OnClickListener l) {
+        mClickListener = l;
+    }
+
+    public void setOnCompleteListener(OnCompleteListener listener) {
+        completeListener = listener;
+    }
 }

otpedittext2/src/main/res/anim/shake.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android">
+    <translate android:duration="50"
+        android:fromXDelta="-3%"
+        android:repeatCount="3"
+        android:repeatMode="reverse"
+        android:toXDelta="3%"/>
+</set>

readme.md

@@ -9,6 +9,7 @@ With stunning animation, and high customizability.
 
 ![Demo with underline](images/demo2.gif)
 ![Dark theme demo](images/dark_theme_demo.gif)
+![Error animation](images/err_anim.gif)
 
 ## Packed with features
 - Add custom character limit.
@@ -51,6 +52,18 @@ Step 3. Add OtpEditText to your layout file
     />
 ```
 
+## Usage
+
+### GetOtpValue() method usage
+```
+String otpValue = otpEditText.getOtpValue();
+if (otpValue != null) {
+    textDisplay.setText("Entered Value: " + otpEditText.getOtpValue());
+}
+```
+This method when invoked, will either return the OTP value, in case this is invoked before the user inputs the desired length of characters, a shake animation will be triggered implicitly.
+
+
 ## How to customize the view.
 ### Setting desired length for the OTP(One time password code)