Android Application Design - Stylish Android Application Login Registration Design


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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0.1"
        android:scaleType="fitXY"
        android:src="@drawable/kdbg" />

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

        <com.kd.banner.Common.MyTextViewBody
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="28sp"
            android:text="StylishApp"
            android:textColor="@color/pink_A400"
            android:textSize="32sp" />

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

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

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

            <EditText
                android:id="@+id/editText3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:hint="PASSWORD" />
        </android.support.design.widget.TextInputLayout>

        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:background="@drawable/rectpink"
            android:gravity="center_horizontal"
            android:padding="12sp"
            android:text="SIGN IN"
            android:textColor="@color/white" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20sp">

            <View
                android:layout_width="match_parent"
                android:layout_height="1sp"
                android:layout_centerVertical="true"
                android:background="@color/bordercolo" />

            <com.kd.banner.Common.MyTextViewHeader
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="OR" />
        </RelativeLayout>

        <com.kd.banner.Common.MyTextViewHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10sp"
            android:layout_marginTop="10sp"

            android:background="@drawable/reactfb"
            android:gravity="center_horizontal"
            android:padding="12sp"
            android:text="SIGN IN WITH FACEBOOK"
            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_marginTop="10sp"
            android:gravity="center_horizontal"
            android:text="@string/signuppink" />

    </LinearLayout>
</RelativeLayout>

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0.1"
        android:scaleType="fitXY"
        android:src="@drawable/kdbg" />

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

        <com.kd.banner.Common.MyTextViewBody
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="28sp"
            android:text="StylishApp"
            android:textColor="@color/pink_A400"
            android:textSize="32sp" />

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

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

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

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:hint="EMAIL ADDRESS" />
        </android.support.design.widget.TextInputLayout>

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

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                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_marginBottom="4sp"
            android:layout_marginTop="4sp"
            android:theme="@style/TextLabelpink">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                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_marginTop="10sp"
            android:background="@drawable/rectpink"
            android:gravity="center_horizontal"
            android:padding="12sp"
            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_marginTop="10sp"
            android:gravity="center_horizontal"
            android:text="@string/signinpink" />

    </LinearLayout>
</RelativeLayout>

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 -

Copy paste in color.xml






<color name="pink_A400">#F50057</color>


<color name="fb">#3b5999</color>



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



Download Font Painter_PERSONAL_USE_ONLY and Montserrat-Regular and Paste in asset


folder




Copy paste in string.xml





<string name="signinpink">Already have an account? <font color="#F50057"><b>SIGN IN</b></font></string>



Use style for edittext just copy paste the below code in style.xml














 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


    <style name="TextLabelpink" parent="TextAppearance.AppCompat">
        <!-- Hint color and label color in FALSE state -->
        <item name="android:textColorHint">@color/brown_400</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/black</item>

        <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
        <item name="colorAccent">@color/pink_A400</item>
        <item name="colorControlNormal">@color/black</item>
        <item name="colorControlActivated">@color/pink_A400</item>
    </style>

















Create Drawable rectpink.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="20sp"/>
    <solid android:color="@color/pink_A400"/>
</shape>












reactfb.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="@color/fb"/>
</shape>









































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