Android Application Design Series - Login ,Registration

Android Application Design Series - Login ,Registration

To develop awesome android application we first need the Attractive UI for the Application is key for make an android application successful.



To design below screen in your application just copy and paste the following code and you will get the design. If you want to develop such kind of design then watch my videos   on Learning and sharing with KD 


Bird House App

For Login Screen Design Code -


 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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red_500"
    android:orientation="vertical">

    <com.kd.banner.Common.MyTextViewBody
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Birds House"
        android:textColor="@color/white"
        android:layout_margin="28sp"
        android:textSize="34sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="20sp">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:theme="@style/TextLabel" >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/white"
                android:hint="User ID"
                 />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10sp"
            android:layout_marginTop="10sp"
            android:theme="@style/TextLabel"

          >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/white"

                android:hint="Password"
                />
        </android.support.design.widget.TextInputLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="14sp"
            android:layout_marginTop="14sp"
            android:orientation="horizontal">
            <CheckBox
                android:layout_width="wrap_content"
                android:text="Remember me"
                android:textColor="@color/white"
                android:buttonTint="@color/white"
                android:layout_height="wrap_content" />
            <com.kd.banner.Common.MyTextViewHeader
                android:layout_width="wrap_content"
                android:text="@string/forgotPass"
                android:textColor="@color/white"
                android:layout_weight="1"
                android:gravity="end"
                android:layout_height="wrap_content" />

        </LinearLayout>
        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:text="SIGN IN"
            android:textColor="@color/red_500"
            android:background="@color/white"
            android:gravity="center_horizontal"
            android:padding="14sp"
            android:layout_height="wrap_content" />
        <com.kd.banner.Common.MyTextViewHeader
            android:id="@+id/tvsignup"
            android:layout_width="wrap_content"
            android:text="Not a member? Sign Up"
            android:textColor="@color/white"
            android:layout_marginTop="20sp"
            android:layout_gravity="center_horizontal"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

For Registration Screen Design Code -


 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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="28sp">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Mobile Number" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10sp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Confirm Password" />
    </android.support.design.widget.TextInputLayout>

    <com.kd.banner.Common.MyTextViewHeader
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20sp"
        android:layout_marginTop="20sp"
        android:background="@color/red_500"
        android:gravity="center_horizontal"
        android:padding="14sp"
        android:text="SIGN UP"
        android:textColor="@color/white" />

    <com.kd.banner.Common.MyTextViewHeader
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Already have an account? Sign In" />
</LinearLayout>

MyTextViewHeader.java


 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
package com.kd.banner.Common;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by admin on 01/04/2017.
 */
public class MyTextViewHeader extends TextView {

    public MyTextViewHeader(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MyTextViewHeader(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyTextViewHeader(Context context) {
        super(context);
        init();
    }

    private void init() {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
                "Montserrat-Regular.ttf");
        setTypeface(tf);
    }

}

MyTextViewBody.java


 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
package com.kd.banner.Common;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by admin on 07/07/2017.
 */
public class MyTextViewBody extends TextView {

    public MyTextViewBody(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MyTextViewBody(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyTextViewBody(Context context) {
        super(context);
        init();
    }

    private void init() {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
                "Painter_PERSONAL_USE_ONLY.ttf");
        setTypeface(tf);
    }

}

Resources Used -

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


Download Font Painter_PERSONAL_USE_ONLY and Montserrat-Regular and Paste in asset


folder

Comments

Post a Comment

Popular posts from this blog

Android Application Design Series -SkyLine App Design

Image
Android Application Design Series -SkyLine App Design  To develop awesome android application we first need the Attractive UI for the Application is key for make an android application successful. To design below screen in your application just copy and paste the following code and you will get the design. If you want to develop such kind of design then watch my videos on Learning and sharing with KD  For Login Screen Design Code - 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 <?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" android:layout_width= "match_parent" android:layout_height= ...
Read more

Android Application Design - Stylish Android Application Login Registration Design

Image
Android Application Design - Stylish Android Application Login Registration Design To develop awesome android application we first need the Attractive UI for the Application is key for make an android application successful. To design below screen in your application just copy and paste the following code and you will get the design. If you want to develop such kind of design then watch my videos on Learning and sharing with KD  Stylish Android Application Design For Login Screen Code - 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 104 105 106 107 108 <?xml version="1.0" e...
Read more