Android Responsive Login Screen Design using Constraint Layout

Create Login Fragment

fragment_login.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/Constraint1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/backcolor">

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideTop"
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.18" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageviewPhone"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/baseline_on_device_training_24"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/guideTop"
            app:layout_constraintWidth_percent="0.3" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/TextviewLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="@string/login"
            android:textColor="@color/white"
            android:textSize="40sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/imageviewPhone" />

        <!-- Add the remaining views based on your layout -->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
   <color name="backcolor">#043134</color>
    <color name="backagain">#407A7C</color>
    <color name="ButtonColor">#3DD8D4</color>
</resources>

Strings.xml

<resources>
    <string name="app_name">LoginScreen</string>
    <string name="login">LOGIN</string>
    <string name="comeback">Come back with your ID</string>
    <string name="EasyLogin">For easy, fast, and secure login</string>
    <string name="username">User Name</string>
    <string name="password">Password</string>
    <string name="ForgotPass">Forgot password?</string>
    <string name="or">OR</string>
    <string name="Nota">Not a member?</string>
    <string name="signup">Sign Up</string>
    <string name="email">Email</string>
    <string name="confirmPass">Confirm Password</string>
</resources>

background_round.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/backcolor"/>
    <corners android:radius="30dp"/>
    <stroke android:width="1dp"
        android:color="@color/backagain"/>
</shape>

Right-click on Drawable Vector Asset

baseline_on_device_training.xml

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="#79BEE9">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M11,16h2v1h-2z"/>

    <path
        android:fillColor="@android:color/white"
        android:pathData="M12,11c-1.1,0 -2,0.9 -2,2c0,0.74 0.4,1.38 1,1.72v0.78h2v-0.78c0.6,-0.35 1,-0.98 1,-1.72C14,11.9 13.1,11 12,11z"/>

    <path
        android:fillColor="@android:color/white"
        android:pathData="M18,1.01L6,1C4.9,1 4,1.9 4,3v18c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2V3C20,1.9 19.1,1.01 18,1.01zM18,18H6V6h12V18z"/>

    <path
        android:fillColor="@android:color/white"
        android:pathData="M16.01,15.95C16.63,15.12 17,14.11 17,13s-0.37,-2.12 -0.99,-2.95l-1.07,1.07c0.35,0.54 0.56,1.19 0.56,1.88s-0.21,1.34 -0.56,1.88L16.01,15.95z"/>

    <path
        android:fillColor="@android:color/white"
        android:pathData="M9.06,14.88C8.71,14.34 8.5,13.69 8.5,13c0,-1.93 1.57,-3.5 3.5,-3.5v1.25l2.25,-2l-2.25,-2V8c-2.76,0 -5,2.24 -5,5c0,1.11 0.37,2.12 0.99,2.95L9.06,14.88z"/>
</vector>