Awesome LogIn/SignIn UI/UX design tutorial with source code

So Let's Start with following Steps

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activityfrom templates. 

2. Enable AppCompact-V7 and design in app/build.gradle. And Sync the project.

android {
    compileSdkVersion 28    defaultConfig {
        applicationId "com.mohitthakur.loginlayout"        minSdkVersion 14        targetSdkVersion 28        versionCode 1        versionName "1.0"        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"    }
    buildTypes {
        release {
            minifyEnabled false            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'    implementation 'com.android.support.constraint:constraint-layout:1.1.3'    testImplementation 'junit:junit:4.12'    androidTestImplementation 'com.android.support.test:runner:1.0.2'    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'}

3.  Now open your styles.xml file and past all of the code from below 

<resources>
    <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>
</resources>

4.  Now open your activity_main.xml file and past all of the code from below for the LogIn Activity. 

<?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/loginRoot" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fafafa" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/bvbv" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"> <ImageView android:id="@+id/imageView3" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerHorizontal="true" android:tint="#fff" android:layout_marginBottom="8dp" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="80dp" android:src="@drawable/logo" /> <LinearLayout android:id="@+id/linearLayout" android:layout_width="350dp" android:layout_height="wrap_content" android:layout_below="@id/imageView3" android:layout_centerHorizontal="true" android:layout_marginBottom="50dp" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="32dp" android:background="#fff" android:foregroundGravity="center" android:gravity="center" android:orientation="vertical"> <EditText android:id="@+id/etxt_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginEnd="5dp" android:layout_marginStart="5sp" android:background="@android:color/transparent" android:drawableLeft="@drawable/ic_email_black_24dp" android:drawablePadding="15dp" android:fontFamily="monospace" android:hint="E-mail address" android:inputType="text" android:padding="10dp" android:textColor="#292929" android:textColorHint="#6e6e6e" android:textSize="16sp" android:textStyle="bold" android:layout_marginRight="5dp" android:layout_marginLeft="5sp" /> <EditText android:id="@+id/etxt_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginEnd="5dp" android:layout_marginStart="5sp" android:background="@android:color/transparent" android:drawableLeft="@drawable/ic_lock_outline_black_24dp" android:drawablePadding="15dp" android:fontFamily="monospace" android:hint="Password" android:inputType="textPassword" android:padding="10dp" android:textColor="#292929" android:textColorHint="#6e6e6e" android:textSize="16sp" android:textStyle="bold" android:layout_marginRight="5dp" android:layout_marginLeft="5sp" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout3" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@id/linearLayout" android:layout_centerHorizontal="true" android:layout_marginBottom="8dp" android:background="#000" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:gravity="center"> <Button android:id="@+id/btn_login" android:layout_width="250dp" android:layout_height="wrap_content" android:background="#000" android:fontFamily="monospace" android:text="enter" android:textColor="@android:color/white" android:textSize="20dp" android:textStyle="bold" /> <ProgressBar android:id="@+id/progressBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:foregroundGravity="center" android:visibility="gone" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="230dp" android:layout_alignParentBottom="true" android:gravity="center"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:gravity="center" android:orientation="horizontal"> <Button android:id="@+id/forgot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="30dp" android:background="#181c20" android:clickable="true" android:focusable="true" android:fontFamily="monospace" android:text="Forgot Password?" android:textColor="#fff" android:textSize="16sp" android:textStyle="bold" android:layout_marginRight="30dp" /> <Button android:id="@+id/signup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#181c20" android:clickable="true" android:focusable="true" android:fontFamily="monospace" android:text="New Here? Sign Up" android:textColor="#fff" android:textSize="16sp" android:textStyle="bold" /> </LinearLayout> </LinearLayout> </RelativeLayout> <View android:id="@+id/animate_view" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimaryDark" android:visibility="invisible" /> </RelativeLayout>

view rawactivity_main.xml hosted with ❤ by GitHub

5.  Now open your MainActivity.java  file and past all of the code from below for the  LogIn Activity. 

package com.mohitthakur.loginlayout; import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button; button = (Button) findViewById(R.id.btn_login); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"sign-in clicked" , Toast.LENGTH_SHORT).show(); } }); Button button1; button1 = (Button) findViewById(R.id.forgot); button1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"Forgot password clicked" , Toast.LENGTH_SHORT).show(); } }); Button button2; button2 = (Button) findViewById(R.id.signup); button2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"sign-up clicked" , Toast.LENGTH_SHORT).show(); } }); } }

view rawMainActivity.java hosted with ❤ by GitHub

 That's All for this post and  Thanks for visiting and thanks for your time if you have any suggestions and want to share any feed back then comment down below and if you face any issue then let me know in the comment section also share this with your friends

Download Source Code :)