Login Screen Design In Android Studio

Post Views: 65,516

Hello Friends today we are going to design login screen by using LinearLayout. Login screen should be attractive it is first view which user interact with that’s why is should be user friendly as well. We will begin our designing by simply creating a new project.Login Screen Design In Android Studio.

Creating New Android Project (Login Screen Design In Android Studio)

Create a new project in Android Studio File–>New–>New Project.
Enter Application Name, Package Name, Select Empty Activity and click on finish.

Add Colors

Open App–>values–>colors.xml
Specify colors which we are going to use in app.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="white">#FFFFFF</color>
    <color name="signupColor">#066e8a</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<color name="white">#FFFFFF</color>

</resources>

Add Background Image And Logo

Add background image and logo of your app.
I will attack the sample background image and logo at the end of this blog.
Paste file to mipmap folder.

Add Vector Drawable

Add vector drawable which we are going to use in our project.
Right click on Drawable folder then New–>Vector Asset.
click on Icon then Select Icon and add it to on drawable folder.

Add three vectors Person,Lock,Lock Open from Vector Asset.
You can change color of vector drawable. To change color open that drawable and change FillColor value.

Make Rounded Corner EditBox and Button

Right click on drawable folder–>New–>Drawable resource file.
Write File Name and click Ok.
We will create 3 create Drawable resource file one to make rounded corner of email and password edittext box and one for Login button and last for Signup button.
We have to add this file to Background property of edittext box and button.

shapeemail.xml for email and password editbox

<?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/transparent">
    </solid>

    <corners
        android:radius="25dp">
    </corners>

    <stroke
        android:width="1dp"
        android:color="#FFF">
    </stroke>

    <padding
        android:top="0dp"
        android:right="10dp"
        android:left="10dp"
        android:bottom="0dp">
    </padding>

</shape>

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

</solid>

<corners

android:radius="25dp">

</corners>

<stroke

android:width="1dp"

android:color="#FFF">

</stroke>

<padding

android:top="0dp"

android:right="10dp"

android:left="10dp"

android:bottom="0dp">

</padding>

</shape>

shapelogin.xml for Login Button

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

    <corners
        android:radius="25dp">
    </corners>

    <stroke
        android:width="1dp"
        android:color="#FFF">
    </stroke>

    <padding
        android:top="0dp"
        android:right="10dp"
        android:left="10dp"
        android:bottom="0dp">
    </padding>

</shape>

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

</solid>

<corners

android:radius="25dp">

</corners>

<stroke

android:width="1dp"

android:color="#FFF">

</stroke>

<padding

android:top="0dp"

android:right="10dp"

android:left="10dp"

android:bottom="0dp">

</padding>

</shape>

shapesignup.xml for signup button

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid
        android:color="@color/signupColor">
    </solid>

    <corners
        android:radius="25dp">
    </corners>

    <stroke
        android:width="1dp"
        android:color="#FFF">
    </stroke>

    <padding
        android:top="0dp"
        android:right="10dp"
        android:left="10dp"
        android:bottom="0dp">
    </padding>

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<solid

android:color="@color/signupColor">

</solid>

<corners

android:radius="25dp">

</corners>

<stroke

android:width="1dp"

android:color="#FFF">

</stroke>

<padding

android:top="0dp"

android:right="10dp"

android:left="10dp"

android:bottom="0dp">

</padding>

</shape>

Lets Design Login Screen

Open activity.xml file and put add following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@mipmap/back"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="20dp">

    <ImageView
        android:layout_width="90dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/login"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="15dp"
        android:background="@drawable/shapeemail"
        android:drawableLeft="@drawable/ic_person_black_24dp"
        android:drawablePadding="10dp"
        android:hint="Email"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textColorHighlight="@color/white"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="15dp"
        android:background="@drawable/shapeemail"
        android:drawableLeft="@drawable/ic_lock_black_24dp"
        android:drawablePadding="10dp"
        android:hint="Password"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textColorHighlight="@color/white"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Remember Me"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="0dp"
            android:textColor="@color/white"
            android:buttonTint="@color/white"
            android:checked="true"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Forget Password"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="0dp"
            android:textColor="@color/white"
            android:drawableLeft="@drawable/ic_lock_open_black_24dp"
            android:drawablePadding="6dp"
            android:padding="4dp"/>


    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Log In"
        android:shadowColor="@android:color/transparent"
        android:padding="15dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="0dp"
        android:background="@drawable/shapelogin"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Sign Up"
        android:shadowColor="@android:color/transparent"
        android:padding="15dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="0dp"
        android:background="@drawable/shapesignup"
        android:textColor="@color/white"/>




</LinearLayout>

100

101

102

103

<?xml version="1.0" encoding="utf-8"?>

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

android:background="@mipmap/back"

android:orientation="vertical"

android:gravity="center"

android:padding="20dp">

<ImageView

android:layout_width="90dp"

android:layout_height="wrap_content"

android:src="@mipmap/login"/>

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:padding="15dp"

android:background="@drawable/shapeemail"

android:drawableLeft="@drawable/ic_person_black_24dp"

android:drawablePadding="10dp"

android:hint="Email"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textColorHighlight="@color/white"/>

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:padding="15dp"

android:background="@drawable/shapeemail"

android:drawableLeft="@drawable/ic_lock_black_24dp"

android:drawablePadding="10dp"

android:hint="Password"

android:textColor="@color/white"

android:textColorHint="@color/white"

android:textColorHighlight="@color/white"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<CheckBox

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Remember Me"

android:layout_marginRight="10dp"

android:layout_marginLeft="10dp"

android:layout_marginBottom="10dp"

android:layout_marginTop="0dp"

android:textColor="@color/white"

android:buttonTint="@color/white"

android:checked="true"/>

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Forget Password"

android:layout_marginRight="10dp"

android:layout_marginLeft="10dp"

android:layout_marginBottom="10dp"

android:layout_marginTop="0dp"

android:textColor="@color/white"

android:drawableLeft="@drawable/ic_lock_open_black_24dp"

android:drawablePadding="6dp"

android:padding="4dp"/>

</LinearLayout>

<Button

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Log In"

android:shadowColor="@android:color/transparent"

android:padding="15dp"

android:layout_marginRight="10dp"

android:layout_marginLeft="10dp"

android:layout_marginBottom="10dp"

android:layout_marginTop="0dp"

android:background="@drawable/shapelogin"/>

<Button

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Sign Up"

android:shadowColor="@android:color/transparent"

android:padding="15dp"

android:layout_marginRight="10dp"

android:layout_marginLeft="10dp"

android:layout_marginBottom="10dp"

android:layout_marginTop="0dp"

android:background="@drawable/shapesignup"

android:textColor="@color/white"/>

</LinearLayout>

Download Complete Project

Subscribe To Our YouTube Channel

Like Us On Facebook

Android Code Finder

5 Comments

MbDev says:

October 2, 2018 at 10:40 am

thank you so mush

Rashed says:

February 25, 2019 at 12:50 pm

attack the sample background image and logo at the end of this blog./////
/////where is that file

1. Sumeet Jain says:
  
  February 28, 2019 at 7:23 pm
  
  https://drive.google.com/file/d/1F3-b46zOKdx0etsWYggoySWBmlBrEluk/view?usp=sharing
  
قیمت ردیاب says:

January 15, 2020 at 9:28 am

hi, thank you for posting
is there any library like bootstrap for android?

1. Sumeet Jain says:
  
  February 21, 2020 at 7:02 pm
  
  There are many library available in github. Search what type you want.

RECENT POST

5 Comments

Leave a Reply Cancel reply

Creating New Android Project (Login Screen Design In Android Studio)

Add Colors

Add Background Image And Logo

Add Vector Drawable

Make Rounded Corner EditBox and Button

shapeemail.xml for email and password editbox

shapelogin.xml for Login Button

shapesignup.xml for signup button

Lets Design Login Screen

Download Complete Project

Subscribe To Our YouTube Channel

Like Us On Facebook

Other Tutorials-

RECENT POST

5 Comments

Leave a Reply Cancel reply