Android Application Design Series -SkyLine App Design

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="match_parent"
    android:background="@drawable/skylogin"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#A92470FC"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="20sp">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="80sp"
            android:layout_height="80sp"
            android:src="@drawable/kdk"
            app:civ_border_color="@color/white"

            app:civ_border_width="4sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:backgroundTint="#80FFFFFF"
            android:drawableLeft="@drawable/userpofile"
            android:drawablePadding="15sp"
            android:hint="@string/hintUname"
            android:textColorHint="#80FFFFFF" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:backgroundTint="#80FFFFFF"
            android:drawableLeft="@drawable/passwhit"
            android:drawablePadding="15sp"
            android:hint="@string/hintPass"
            android:textColorHint="#80FFFFFF" />

        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/reactgreen"
            android:elevation="2sp"
            android:gravity="center_horizontal"
            android:padding="14sp"

            android:text="SIGN IN"
            android:textColor="@color/white" />

        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:gravity="center_horizontal"
            android:text="@string/forgotPass"
            android:textColor="@color/white" />

        <com.kd.banner.Common.MyTextViewHeader
            android:id="@+id/tvsignup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:gravity="center_horizontal"
            android:text="@string/signupsky"
            android:textColor="@color/white" />

    </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
80
81
82
83
84
85
86
87
88
89
90
91
92
<?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="match_parent"
    android:background="@drawable/skylogin"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#A92470FC"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="20sp">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="80sp"
            android:layout_height="80sp"
            android:src="@drawable/kdk"
            app:civ_border_color="@color/white"

            app:civ_border_width="4sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:backgroundTint="#80FFFFFF"
            android:drawableLeft="@drawable/userpofile"
            android:drawablePadding="15sp"
            android:hint="@string/hintUname"
            android:textColorHint="#80FFFFFF" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:backgroundTint="#80FFFFFF"
            android:drawableLeft="@drawable/emailid"
            android:drawablePadding="15sp"
            android:hint="@string/hintEmail"
            android:textColorHint="#80FFFFFF" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:backgroundTint="#80FFFFFF"
            android:drawableLeft="@drawable/phonecall"
            android:drawablePadding="15sp"
            android:hint="@string/hintPhone"
            android:textColorHint="#80FFFFFF" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:backgroundTint="#80FFFFFF"
            android:drawableLeft="@drawable/passwhit"
            android:drawablePadding="15sp"
            android:hint="@string/hintPass"
            android:textColorHint="#80FFFFFF" />

        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/reactgreen"
            android:elevation="2sp"
            android:gravity="center_horizontal"
            android:padding="14sp"

            android:text="SIGN UP"
            android:textColor="@color/white" />
        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="10sp"
            android:textColor="@color/white"
            android:text="@string/termscondition" />
        <com.kd.banner.Common.MyTextViewHeader
            android:id="@+id/tvsignup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="10sp"
            android:textColor="@color/white"
            android:text="@string/tnCpNpsky" />

    </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
 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
<?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="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="10sp">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="80sp"
            android:layout_height="80sp"
            android:src="@drawable/kdk"
            app:civ_border_color="@color/white"

            app:civ_border_width="4sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:background="@drawable/edittextwhitewithborder"

            android:hint="@string/hintUname"
            android:padding="10sp"
           />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:background="@drawable/edittextwhitewithborder"
            android:padding="10sp"


            android:hint="@string/hintEmail"
            />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:background="@drawable/edittextwhitewithborder"
            android:padding="10sp"


            android:hint="@string/hintPhone"
            />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10sp"
            android:background="@drawable/edittextwhitewithborder"
            android:padding="10sp"


            android:hint="@string/hintPass"
            />

        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/reactgreen"
            android:elevation="2sp"
            android:gravity="center_horizontal"
            android:padding="14sp"

            android:text="SIGN UP"
            android:textColor="@color/white" />

        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4sp"
            android:gravity="center_horizontal"
            android:text="@string/termscondition"
            />

        <com.kd.banner.Common.MyTextViewHeader
            android:id="@+id/tvsignup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4sp"
            android:gravity="center_horizontal"
            android:text="@string/tnCpNpskytwo"
           />
        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:background="@drawable/roundedreactwithborder"
            android:padding="10sp"
            android:layout_marginTop="8sp"
            android:gravity="center_horizontal"
            android:text="Already Have an Account Sign In"
            android:layout_height="wrap_content" />
    </LinearLayout>

</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);
    }

}

Resources Used -

<color name="white">#FFFFFF</color>
Download Font Painter_PERSONAL_USE_ONLY and Montserrat-Regular and Paste in asset


folder


<string name="forgotPass">Forget Password?</string>


<string name="signupsky">Don\'t have an account? <font color="#F302EF39"><b>SIGN UP here</b></font></string>


<string name="termscondition">By creating account you agree to our </string>


<string name="tnCpNpsky"><font color="#F302EF39"><b>Terms &amp; Condition</b></font> and <font color="#F302EF39"><b>Privacy Policy</b></font> </string>



reactgreen.xml


1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <solid android:color="#F302EF39"/>
</shape>

roundedreactwithborder.xml


1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20sp"/>
    <solid android:color="#dddddd"/>
    <stroke android:color="@color/bordercolo" android:width="1sp"/>
</shape>

Comments

  1. Unknown27 August 2018 at 09:23

    what is this com.kd.banner.Common.MyTextViewHeader sir in android??
    pls suggest me how
    to use it

    ReplyDelete

Post a Comment

Popular posts from this blog

Android Application Design Series - Login ,Registration

Image
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...
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