#1 Sign in / Sign up UI 2019 The best UI design using Android Studio full tutorial with Source Code

Hello, guys, I am back with new tutorials and from now I will make many videos and posts. So in this post, we will see how we make a Sign in Signup UI with 2019 design pattern.


Here is the Video tutorial




So, first of all, create a new project in the android studio here in this project I am using Androidx components.

so, first of all, add this dependency in your app level build file and sync this project.

dependencies {

    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'com.google.android.material:material:1.1.0-alpha07'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    
}

Here in this project implementation 'com.google.android.material:material:1.1.0-alpha07'  is use to get the design library.

Now copy drawable files from this link and past it in your project drawable file. Download



Now open your activity_main.xml file and paste this code to get the sign in page design.

<?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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/background_image_one_signin" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="116dp"
        android:layout_marginEnd="8dp"
        android:text="Welcome\nBack"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.174"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:orientation="vertical">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="30dp"
            android:backgroundTint="@android:color/transparent"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:padding="15dp"
            android:textColor="#292929"
            android:textColorHint="#797979" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="4dp"
            android:layout_marginEnd="30dp"
            android:background="#999999" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="30dp"
            android:backgroundTint="@android:color/transparent"
            android:hint="Password"
            android:inputType="textPassword"
            android:padding="15dp"
            android:textColor="#292929"
            android:textColorHint="#797979" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="4dp"
            android:layout_marginEnd="30dp"
            android:background="#999999" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:layout_height="wrap_content">

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerInParent="true"
                android:src="@drawable/round_arrow_forward_24"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="30dp"
                android:tint="@android:color/white"
                android:layout_marginBottom="20dp"
                android:elevation="0dp"
                app:elevation="0dp"
                android:backgroundTint="#4E525B"
                app:fabCustomSize="80dp"
                tools:ignore="RelativeOverlap" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:layout_marginStart="30dp"
                android:text="Sign in"
                android:textColor="#191919"
                android:textSize="25sp"
                android:padding="15dp"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="20dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:layout_marginStart="30dp"
                android:padding="15dp"
                android:onClick="OpenSignupPage"
                android:text="Sign up"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerInParent="true"
                android:layout_marginEnd="30dp"
                android:padding="15dp"
                android:text="Forgot Password"
                android:textSize="18sp"
                android:textStyle="bold" />
        </RelativeLayout>
    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>
Now open MainActivity.java file and add this code it will allow you to open the signup page



import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
        getWindow().setStatusBarColor(Color.TRANSPARENT);
        setContentView(R.layout.activity_main);
    }

    public void OpenSignupPage(View view) {
        startActivity(new Intent(MainActivity.this,SignupActivity.class));
    }
}
Now create a new blank activity with name SIgnupActivity and then open activity_signup.xml file and paste this code.

<?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"
    tools:context=".SignupActivity">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background_image_one_signup"
        android:scaleType="centerCrop"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="8dp"
        android:text="Welcome\nBack"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.151"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="bottom">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="30dp"
            android:backgroundTint="@android:color/transparent"
            android:hint="Name"
            android:inputType="textEmailAddress"
            android:padding="15dp"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="4dp"
            android:layout_marginEnd="30dp"
            android:background="#B1B1B1" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="30dp"
            android:backgroundTint="@android:color/transparent"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:padding="15dp"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="4dp"
            android:layout_marginEnd="30dp"
            android:background="#B1B1B1" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="30dp"
            android:backgroundTint="@android:color/transparent"
            android:hint="Password"
            android:inputType="textEmailAddress"
            android:padding="15dp"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="4dp"
            android:layout_marginEnd="30dp"
            android:background="#B1B1B1" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:layout_height="wrap_content">

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerInParent="true"
                android:src="@drawable/round_arrow_forward_24"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="30dp"
                android:tint="@android:color/white"
                android:layout_marginBottom="20dp"
                android:elevation="0dp"
                app:elevation="0dp"
                android:backgroundTint="#4E525B"
                app:fabCustomSize="80dp"
                tools:ignore="RelativeOverlap" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:layout_marginStart="30dp"
                android:text="Sign up"
                android:textColor="@android:color/white"
                android:textSize="25sp"
                android:padding="15dp"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="20dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:layout_marginStart="30dp"
                android:padding="15dp"
                android:text="Sign in"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

        </RelativeLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Now open SIgnupActivity.java file and paste this code.



import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.WindowManager;

public class SignupActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
        getWindow().setStatusBarColor(Color.TRANSPARENT);
        setContentView(R.layout.activity_signup);
    }
}
Now run this application and see how it look like

Here is the Video tutorial





Download source code from here-> https://github.com/MonsterTechnoGit/Signin-Signup-UI-design-2019/

Comments

Post a Comment