C# Programming Tutorial(8920128728): Login Screen Design In Android Studio

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.

colors.xml
1
2
3
4
5
6
7
8
<?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>

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.

dashboard design in android studiovector asset

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.

vector change color

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

shapeemail.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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

shapelogin.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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

shapesignup.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?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.

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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>

C# Programming Tutorial(8920128728)

Thursday 20 July 2023

Login Screen Design In Android Studio