Merge pull request #14 from swapnil1104/interactive_animation

Added Shake animation

Author: swapnil1104

.idea/gradle.xml

@@ -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/build.gradle

@@ -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/java/com/broooapps/otpedittext/MainActivity.java

@@ -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>

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

@@ -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
  }

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()
 }

images/err_anim.gif

@@ -4,11 +4,12 @@
  * Created by Swapnil Tiwari on 2019-05-07.
  * swapniltiwari775@gmail.com
  */
-
 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/build.gradle

@@ -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>

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

@@ -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)