Colorful Login Design For Android

colorful Android Login Screen Example

Colorful Login Design

Hello Friends, today I will teach you how to create login screen design in Android.

Follow step by step:

First, open Android Studio and Create a new project.

We create a new project by clicking "Start a new Android Studio Project".  Select "Empty Activity" and click next.

Fill in the application name column with "My Login 2", then click Next.

Enter the Package name of your application. In this project we enter "com.akshayarora.mylogin2".

Now select Project Language Java because we use Java for this project.

Now Select minimum SDK you need or want, In this project, we are working on Minimum SDK Level 21 "Android 5.0 (Lollipop)". Now click on finish.

After the application is successfully built, you can simply make adjustments to the following sections.

First open build.Gradle file and implement design dependency and sync the project after entering dependency.

implementation 'com.google.android.material:material:1.2.0-alpha05'

Open the colors.xml file in app/res/values/colors.xml, and change it like this:
res/values/colors.xml:-

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="colorYellow">#ffeb3b</color>
    <color name="colorPurple">#9c27b0</color>
    <color name="colorBlue">#00b0ff</color>
</resources>

Now open the strings.xml file in the res/values/strings.xml directory and change it to something like the following:-
res/values/strings.xml:-

<resources>
    <string name="app_name">My Login 2</string>
    <string name="login_text">Login</string>
    <string name="email">Enter Email</string>
    <string name="password">Enter Password</string>
    <string name="forgot_password">Forgot Password?</string>
    <string name="new_account">Don\'t have an account ?</string>
    <string name="sign_up">Sign Up</string>
    <string name="name">Enter Name</string>
    <string name="confirm_pass">Confirm Password</string>
    <string name="already_account">Already have an account ?</string>
</resources>

Now open the styles.xml file and change the theme in the material theme.
res/values/styles.xml:-

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Note:- You need to change the theme otherwise the app will crash in some devices.

Now create some Drawable resource files in the drawable directory, by right-clicking on the drawable directory, select the new/drawable resource file.

res/drawable/shape_button.xml:-

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorYellow">
    <item>
        <shape android:shape="rectangle">
            <gradient android:startColor="@color/colorPurple"
                android:endColor="@color/colorBlue"/>
            <corners android:radius="50dp" />
        </shape>
    </item>
</ripple>

Note:- we will use the ripper effect on button click that's why we will use ripper on this drawable file.

res/drawable/shape_center.xml:-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:radius="20dp"/>
</shape>

res/drawable/shape_left_background.xml:-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomRightRadius="40dp"
        android:topRightRadius="40dp" />
    <gradient
        android:angle="225"
        android:centerColor="@android:color/holo_purple"
        android:endColor="@color/colorYellow"
        android:startColor="@color/colorBlue"
        android:type="linear" />
</shape>

Now you need the logo

Android

Adjustment to several layouts:-
changes the activity_login.xml, signup_main.xml layout so that it will be as below:-

activity_login.xml:-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <RelativeLayout
        android:id="@+id/logo_layout"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:padding="10dp"
            android:src="@drawable/android_logo" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottom_layout"
        android:layout_below="@+id/logo_layout"
        android:background="@drawable/shape_left_background"
        android:elevation="25dp" />


    <LinearLayout
        android:id="@+id/main_layout"
        android:layout_width="320dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@drawable/shape_center"
        android:elevation="50dp"
        android:orientation="vertical"
        android:paddingStart="40dp"
        android:paddingTop="30dp"
        android:paddingEnd="40dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/login_text"
            android:textColor="@color/colorBlue"
            android:textSize="24sp" />


        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email"
                android:inputType="textEmailAddress" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            app:passwordToggleEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/colorBlue"
                android:hint="@string/password"
                android:inputType="textPassword" />

        </com.google.android.material.textfield.TextInputLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="end"
            android:text="@string/forgot_password" />

    </LinearLayout>

    <Button
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/main_layout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-20dp"
        android:background="@drawable/shape_button"
        android:stateListAnimator="@null"
        android:text="@string/login_text"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:translationZ="55dp" />

    <LinearLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:padding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/new_account"
            android:textColor="@android:color/black" />

        <TextView
            android:id="@+id/textView_Sign_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="@string/sign_up"
            android:textColor="@color/colorBlue"
            android:textSize="20sp" />

    </LinearLayout>

</RelativeLayout>

signup_main.xml:-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <RelativeLayout
        android:id="@+id/logo_layout"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:padding="10dp"
            android:src="@drawable/android_logo" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_layout"
        android:layout_below="@+id/logo_layout"
        android:background="@drawable/shape_left_background"
        android:elevation="25dp" />


    <LinearLayout
        android:id="@+id/main_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        android:background="@drawable/shape_center"
        android:elevation="50dp"
        android:orientation="vertical"
        android:paddingStart="40dp"
        android:paddingTop="20dp"
        android:paddingEnd="40dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/sign_up"
            android:textColor="@color/colorBlue"
            android:textSize="24sp" />

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/name"
                android:inputType="text" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email"
                android:inputType="textEmailAddress" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:passwordToggleEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/password"
                android:inputType="textPassword" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="40dp"
            app:passwordToggleEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/confirm_pass"
                android:inputType="textPassword" />

        </com.google.android.material.textfield.TextInputLayout>

    </LinearLayout>

    <Button
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/main_layout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-20dp"
        android:background="@drawable/shape_button"
        android:stateListAnimator="@null"
        android:text="@string/sign_up"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:translationZ="55dp" />

    <LinearLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:padding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/already_account"
            android:textColor="@android:color/black" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="@string/login_text"
            android:textColor="@color/colorBlue"
            android:textSize="20sp" />

    </LinearLayout>

</RelativeLayout>

LoginActivity.java:-

package com.akshayarora.mylogin2;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class LoginActivity extends AppCompatActivity {

    private TextView textViewSignUp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        textViewSignUp = (TextView)findViewById(R.id.textView_Sign_up);
        textViewSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(LoginActivity.this,SignupActivity.class));
            }
        });
    }
}

Note:- we will use Intent for opening the Signup activity.

SignupActivity.java:-

package com.akshayarora.mylogin2;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class SignupActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.signup_main);
    }
}

Next, add entries for LoginActivity and SignupActivity in the Manifest.xml file. The complete Manifest file for the login and registration form in Android should be as follows:-

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.akshayarora.mylogin2">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".SignupActivity" />
        <activity android:name=".LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

After all, the steps are complete please try running it on your device. I hope this article helps you.

Login Screen Design

Signup Screen Design

Enjoy!