#2 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 'androidx.constraintlayout:constraintlayout:1.1.3

    repositories {

        maven { url "https://oss.sonatype.org/content/repositories/snapshots" }
        maven { url "https://oss.sonatype.org/content/repositories/releases" }

    }

    dependencies {
        implementation 'com.github.captain-miao:optroundcardview:1.0.0'
    }

    implementation 'de.hdodenhof:circleimageview:3.0.0'

}

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/signin_page_background" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="45dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:padding="15dp">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:tint="#191919"
                android:src="@drawable/baseline_arrow_back_ios_24" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Back"
                android:textColor="#191919"
                android:textSize="20sp"
                android:textStyle="bold" />
        </LinearLayout>


    </LinearLayout>


    <com.github.captain_miao.optroundcardview.OptRoundCardView
        android:id="@+id/optRoundCardView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout"
        app:optRoundCardBackgroundColor="#353758"
        app:optRoundCardCornerRadius="50dp"
        app:optRoundCardElevation="0dp"
        app:optRoundCardLeftBottomCorner="false"
        app:optRoundCardLeftTopCorner="true"
        app:optRoundCardRightBottomCorner="false"
        app:optRoundCardRightTopCorner="true">

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="80dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Welcome Back"
                    android:textAlignment="center"
                    android:textColor="#9394B8"
                    android:textSize="17sp"
                    android:textStyle="bold" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="30dp"
                    android:background="@android:color/transparent"
                    android:hint="Username"
                    android:padding="15dp"
                    android:textColor="@android:color/white"
                    android:textColorHint="@android:color/white"
                    android:textStyle="bold" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginStart="40dp"
                    android:layout_marginEnd="40dp"
                    android:background="#5A5A5A" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="30dp"
                    android:background="@android:color/transparent"
                    android:hint="Password"
                    android:padding="15dp"
                    android:textColor="@android:color/white"
                    android:textColorHint="@android:color/white"
                    android:textStyle="bold" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginStart="40dp"
                    android:layout_marginEnd="40dp"
                    android:background="#5A5A5A" />

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="40dp"
                    android:layout_marginEnd="30dp"
                    android:background="@drawable/button_login_background"
                    android:text="Log in"
                    android:textAllCaps="false"
                    android:textColor="@android:color/white"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="20dp"
                    android:layout_marginEnd="30dp"
                    android:background="@drawable/button_another_account_background"
                    android:elevation="0dp"
                    android:text="Another Account"
                    android:textAllCaps="false"
                    android:textColor="@android:color/white"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <com.github.captain_miao.optroundcardview.OptRoundCardView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="60dp"
                    app:optRoundCardCornerRadius="30dp"
                    app:optRoundCardLeftBottomCorner="false"
                    app:optRoundCardLeftTopCorner="true"
                    app:optRoundCardRightBottomCorner="false"
                    app:optRoundCardRightTopCorner="true">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:clickable="true"
                            android:focusable="true"
                            android:foreground="?android:attr/selectableItemBackground"
                            android:padding="15dp"
                            android:text="Sign up"
                            android:onClick="OpenSignupPage"
                            android:textColor="#191919"
                            android:textSize="25sp"
                            android:textStyle="bold" />
                    </LinearLayout>
                </com.github.captain_miao.optroundcardview.OptRoundCardView>


            </LinearLayout>

        </androidx.core.widget.NestedScrollView>


    </com.github.captain_miao.optroundcardview.OptRoundCardView>

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        android:elevation="0dp"
        android:src="@drawable/user_image"
        app:layout_constraintBottom_toTopOf="@+id/optRoundCardView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/optRoundCardView" />

</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">

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

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="45dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:padding="15dp">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/baseline_arrow_back_ios_24"
                android:tint="#191919" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Back"
                android:textColor="#191919"
                android:textSize="20sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>


    <com.github.captain_miao.optroundcardview.OptRoundCardView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:optRoundCardCornerRadius="50dp"
        app:optRoundCardElevation="0dp"
        app:optRoundCardLeftBottomCorner="false"
        app:optRoundCardLeftTopCorner="true"
        app:optRoundCardRightBottomCorner="false"
        app:optRoundCardRightTopCorner="true"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout">

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_marginTop="80dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Create\naccount"
                    android:textStyle="bold"
                    android:textSize="25dp"
                    android:textColor="#191919"
                    android:layout_marginStart="30dp"/>

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="30dp"
                    android:background="@android:color/transparent"
                    android:hint="Name"
                    android:drawableEnd="@drawable/user_icon"
                    android:drawableTint="#696969"
                    android:padding="15dp"
                    android:textColor="#191919"
                    android:textColorHint="#696969"
                    android:textStyle="bold" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginStart="40dp"
                    android:layout_marginEnd="40dp"
                    android:background="#696969" />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="30dp"
                    android:background="@android:color/transparent"
                    android:hint="E-mail"
                    android:drawableEnd="@drawable/email_icon"
                    android:drawableTint="#696969"
                    android:padding="15dp"
                    android:textColor="#191919"
                    android:textColorHint="#696969"
                    android:textStyle="bold" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginStart="40dp"
                    android:layout_marginEnd="40dp"
                    android:background="#696969" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="30dp"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="30dp"
                    android:background="@android:color/transparent"
                    android:hint="Password"
                    android:drawableEnd="@drawable/pasword_icon"
                    android:drawableTint="#696969"
                    android:padding="15dp"
                    android:textColor="#191919"
                    android:textColorHint="#696969"
                    android:textStyle="bold" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginStart="40dp"
                    android:layout_marginEnd="40dp"
                    android:background="#696969" />

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_marginStart="50dp"
                    android:layout_marginTop="80dp"
                    android:layout_marginEnd="50dp"
                    android:layout_marginBottom="80dp"
                    android:background="@drawable/button_signin_background"
                    android:text="Sign in"
                    android:textAllCaps="false"
                    android:textColor="@android:color/white"
                    android:textSize="20sp"
                    android:textStyle="bold" />
            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

    </com.github.captain_miao.optroundcardview.OptRoundCardView>

</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/-2-Sign-in---Sign-up-UI-design-2019

Comments

Post a Comment