Widget Recent Post No.

header ads

How to create Phone Number Login in your android app | SimpleLoginApp tutorial

Learn Code With RK July 10, 2024


 Step 1 main.xml



<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout 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="#ffffff"

    tools:context=".MainActivity">


    <com.google.android.material.appbar.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@null"

        android:theme="@style/AppTheme"

        app:elevation="0dp">


        <androidx.appcompat.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            app:popupTheme="@style/AppTheme"

            app:theme="@style/AppTheme" />


    </com.google.android.material.appbar.AppBarLayout>


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_marginTop="-16dp"

        android:orientation="vertical"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <ScrollView

            android:layout_width="match_parent"

            android:layout_height="wrap_content">


            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:orientation="vertical"

                android:padding="16dp">



                <ImageView

                    android:layout_width="210dp"

                    android:layout_height="210dp"

                    android:layout_gravity="center"

                    android:src="@drawable/verification" />


                <TextView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="8dp"

                    android:layout_marginTop="16dp"

                    android:text="OTP Verification"

                    android:textAlignment="center"

                    android:textColor="#000000"

                    android:textSize="28sp"

                    android:textStyle="bold" />


                <TextView

                    android:id="@+id/otp"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="12dp"

                    android:layout_marginTop="12dp"

                    android:lineSpacingExtra="6dp"

                    android:textAlignment="center"

                    android:textSize="16sp" />


                <TextView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="16dp"

                    android:layout_marginTop="16dp"

                    android:text="Enter Mobile Number"

                    android:textAlignment="center"

                    android:textColor="#a3a3a3"

                    android:textSize="16sp" />


                <LinearLayout

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="12dp"

                    android:layout_marginTop="12dp"

                    android:weightSum="100">


                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="25"

                        android:gravity="center">


                        <ImageView

                            android:layout_width="32dp"

                            android:layout_height="32dp"

                            android:layout_gravity="center"

                            android:src="@drawable/india_logo" />


                        <ImageView

                            android:layout_width="24dp"

                            android:layout_height="24dp"

                            android:layout_gravity="center"

                            android:src="@drawable/ic_arrow_drop_down_black_24dp" />


                    </LinearLayout>


                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="75"

                        android:background="#f6f6f6">


                        <EditText

                            android:id="@+id/mobile_number"

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:background="@null"

                            android:hint="9899639212"

                            android:inputType="phone"

                            android:maxLength="10"

                            android:padding="12dp"

                            android:textColor="#000000"

                            android:textColorHint="#c7c7c8"

                            android:textSize="16sp" />


                    </LinearLayout>



                </LinearLayout>


                <Button

                    android:id="@+id/generate_otp"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:layout_marginBottom="1dp"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:layout_marginTop="24dp"

                    android:background="@drawable/buttonshape"

                    android:text="Generate OTP"

                    android:textAllCaps="false"

                    android:textColor="#FFFFFF"

                    android:textSize="16sp" />



            </LinearLayout>


        </ScrollView>

    </LinearLayout>


</androidx.coordinatorlayout.widget.CoordinatorLayout>



Step 2 opt.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout 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="#FFF"

    tools:context=".otpActivity">

    <com.google.android.material.appbar.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@null"

        android:theme="@style/AppTheme"

        app:elevation="0dp">


        <androidx.appcompat.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            app:popupTheme="@style/AppTheme"

            app:theme="@style/AppTheme" />


    </com.google.android.material.appbar.AppBarLayout>


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_marginTop="-16dp"

        android:orientation="vertical"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <ScrollView

            android:layout_width="match_parent"

            android:layout_height="wrap_content">


            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:orientation="vertical"

                android:padding="16dp">



                <ImageView

                    android:layout_width="210dp"

                    android:layout_height="210dp"

                    android:layout_gravity="center"

                    android:src="@drawable/verification" />


                <TextView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="8dp"

                    android:layout_marginTop="16dp"

                    android:text="OTP Verification"

                    android:textAlignment="center"

                    android:textColor="#000000"

                    android:textSize="28sp"

                    android:textStyle="bold" />


                <TextView

                    android:id="@+id/otp"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="12dp"

                    android:layout_marginTop="12dp"

                    android:lineSpacingExtra="6dp"

                    android:textAlignment="center"

                    android:textSize="16sp" />


                <LinearLayout

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="16dp"

                    android:layout_marginTop="16dp"

                    android:weightSum="100">


                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="16.66"

                        android:background="#f6f6f6">


                        <EditText

                            android:id="@+id/otp_box_1"

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:background="@null"


                            android:hint="&#x2731;"

                            android:inputType="phone"

                            android:maxLength="1"

                            android:padding="12dp"

                            android:textColor="#000000"

                            android:textAlignment="center"

                            android:textColorHint="#c7c7c8"

                            android:textSize="16sp" />


                    </LinearLayout>

                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="16.66"

                        android:layout_marginLeft="8dp"

                        android:background="#f6f6f6">


                        <EditText

                            android:id="@+id/otp_box_2"

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:background="@null"


                            android:hint="&#x2731;"

                            android:inputType="phone"

                            android:maxLength="1"

                            android:padding="12dp"

                            android:textAlignment="center"

                            android:textColor="#000000"

                            android:textColorHint="#c7c7c8"

                            android:textSize="16sp" />


                    </LinearLayout>


                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="16.66"

                        android:layout_marginLeft="8dp"

                        android:background="#f6f6f6">


                        <EditText

                            android:id="@+id/otp_box_3"

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:background="@null"


                            android:hint="&#x2731;"

                            android:inputType="phone"

                            android:maxLength="1"

                            android:padding="12dp"

                            android:textColor="#000000"

                            android:textAlignment="center"

                            android:textColorHint="#c7c7c8"

                            android:textSize="16sp" />


                    </LinearLayout>

                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="16.66"

                        android:layout_marginLeft="8dp"

                        android:background="#f6f6f6">


                        <EditText

                            android:id="@+id/otp_box_4"

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:background="@null"


                            android:hint="&#x2731;"

                            android:inputType="phone"

                            android:maxLength="1"

                            android:padding="12dp"

                            android:textColor="#000000"

                            android:textAlignment="center"

                            android:textColorHint="#c7c7c8"

                            android:textSize="16sp" />


                    </LinearLayout>

                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="16.66"

                        android:layout_marginLeft="8dp"

                        android:background="#f6f6f6">


                        <EditText

                            android:id="@+id/otp_box_5"

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:background="@null"


                            android:hint="&#x2731;"

                            android:inputType="phone"

                            android:maxLength="1"

                            android:padding="12dp"

                            android:textColor="#000000"

                            android:textAlignment="center"

                            android:textColorHint="#c7c7c8"

                            android:textSize="16sp" />


                    </LinearLayout>

                    <LinearLayout

                        android:layout_width="0dp"

                        android:layout_height="match_parent"

                        android:layout_weight="16.66"

                        android:layout_marginLeft="8dp"

                        android:background="#f6f6f6">


                        <EditText

                            android:id="@+id/otp_box_6"

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:background="@null"


                            android:hint="&#x2731;"

                            android:inputType="phone"

                            android:maxLength="1"

                            android:padding="12dp"

                            android:textAlignment="center"

                            android:textColor="#000000"

                            android:textColorHint="#c7c7c8"

                            android:textSize="16sp" />


                    </LinearLayout>


                </LinearLayout>


                <TextView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="16dp"

                    android:layout_marginTop="16dp"


                    android:text="Don't recieve the OTP?"

                    android:textAlignment="center"

                    android:textColor="#a3a3a3"

                    android:textSize="16sp" />

                <TextView

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_marginBottom="16dp"


                    android:text="RESEND OTP"

                    android:textAlignment="center"

                    android:textColor="@color/colorAccent"

                    android:textSize="16sp" />



                <Button

                    android:id="@+id/verify"

                    android:layout_width="match_parent"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:layout_marginBottom="1dp"

                    android:layout_marginLeft="16dp"

                    android:layout_marginRight="16dp"

                    android:layout_marginTop="24dp"

                    android:background="@drawable/buttonshape"


                    android:text="VERIFY"

                    android:textAllCaps="false"

                    android:textColor="#ffffff"

                    android:textSize="16sp" />



            </LinearLayout>


        </ScrollView>

    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>



GITHUB : https://github.com/LearncodeWithRk/Phone-Number-Login

Tags:

Post a Comment

0 Comments