Welcome to "phones gallery" part 9. In the last parts we create the login screen and implement the google login/ design the signup screen. Check all the previous parts from here :
In this part we will design the otp screen.
OTP EditText background
First we need to create a background resource file inside our drawable folder and name it otp_bg.xml.
My otp_bg.xml file :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/purple2"/>
<corners android:radius="5dp"/>
<stroke android:width="2dp"
android:color="@color/gray1"/>
</shape>
activity_otp.xml
Now we need to modify the new otp activity like this :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash_bg"
tools:context=".Otp">
<TextView
android:id="@+id/otpTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="@string/sms_verification"
android:textColor="@color/white"
android:fontFamily="@font/titillium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"
android:layout_marginHorizontal="10dp"/>
<ImageView
android:id="@+id/otpVector"
android:layout_width="match_parent"
android:layout_height="220dp"
android:src="@drawable/sms_vector"
app:layout_constraintTop_toBottomOf="@id/otpTitle"
android:layout_marginTop="20dp"
android:layout_marginHorizontal="10dp"/>
<TextView
android:id="@+id/otpInfoText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/we_have_sent_you_a_verification_code_to_this_phone_number"
app:layout_constraintTop_toBottomOf="@id/otpVector"
android:textColor="@color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"
android:textSize="15sp"
android:fontFamily="@font/ubuntu"
android:gravity="center"
android:layout_marginHorizontal="20dp"/>
<TextView
android:id="@+id/phoneHolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/otpInfoText"
android:text="+213000000000"
android:textColor="@color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:textSize="17sp"
android:layout_marginTop="10dp"
android:fontFamily="@font/ubuntu"
android:layout_marginHorizontal="10dp"/>
<LinearLayout
android:id="@+id/otpLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@id/phoneHolder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center"
android:layout_marginTop="20dp"
android:layout_marginHorizontal="10dp">
<EditText
android:id="@+id/otpOne"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_marginEnd="5dp"
android:background="@drawable/otp_bg"
android:fontFamily="@font/ubuntu"
android:textColor="@color/white"
android:textSize="15sp" />
<EditText
android:id="@+id/otpTwo"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_marginEnd="5dp"
android:background="@drawable/otp_bg"
android:fontFamily="@font/ubuntu"
android:textColor="@color/white"
android:textSize="15sp" />
<EditText
android:id="@+id/otpThree"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_marginEnd="5dp"
android:background="@drawable/otp_bg"
android:fontFamily="@font/ubuntu"
android:textColor="@color/white"
android:textSize="15sp" />
<EditText
android:id="@+id/otpFour"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_marginEnd="5dp"
android:background="@drawable/otp_bg"
android:fontFamily="@font/ubuntu"
android:textColor="@color/white"
android:textSize="15sp" />
<EditText
android:id="@+id/otpFive"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_marginEnd="5dp"
android:background="@drawable/otp_bg"
android:fontFamily="@font/ubuntu"
android:textColor="@color/white"
android:textSize="15sp" />
<EditText
android:id="@+id/otpSix"
android:layout_width="50dp"
android:layout_height="match_parent"
android:background="@drawable/otp_bg"
android:textColor="@color/white"
android:fontFamily="@font/ubuntu"
android:textSize="15sp"/>
</LinearLayout>
<Button
android:id="@+id/verifyBtn"
android:layout_width="match_parent"
android:layout_height="60dp"
android:backgroundTint="@color/orange1"
app:layout_constraintTop_toBottomOf="@id/otpLayout"
android:layout_marginTop="10dp"
android:text="@string/verify"
android:fontFamily="@font/titillium"
android:textAllCaps="false"
android:textSize="17sp"
android:textStyle="bold"
android:layout_marginHorizontal="10dp"/>
<Button
android:id="@+id/resendBtn"
android:layout_width="match_parent"
android:layout_height="60dp"
android:backgroundTint="@color/orange1"
app:layout_constraintTop_toBottomOf="@id/verifyBtn"
android:layout_marginTop="10dp"
android:text="@string/resend_code"
android:fontFamily="@font/titillium"
android:textAllCaps="false"
android:textSize="17sp"
android:textStyle="bold"
android:visibility="gone"
android:layout_marginHorizontal="10dp"/>
<Button
android:id="@+id/changeNumberBtn"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#00000000"
android:text="@string/this_is_not_your_phone_number"
app:layout_constraintBottom_toBottomOf="parent"
android:fontFamily="@font/ubuntu"
android:textSize="15sp"
android:textAllCaps="false"
android:layout_marginHorizontal="10dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent">
<View
android:id="@+id/loadingView"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="@color/white"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Youtube
See the youtube video from here :
Thanks for watching enjoy!!