Android 比较好看的注册登录界面

各位看官姥爷：

对于一款android手机app而言，美观的界面使得用户有好的使用体验，而一款好看的注册登录界面也会给用户好的用户体验，那么话不多说，直接上代码

首先是一款简单的界面展示

1.登陆界面

2.注册界面

好的，那么我们废话不多说，直接上代码吧：

1.登录界面

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     xmlns:app="http://schemas.android.com/apk/res-auto"
  4     xmlns:tools="http://schemas.android.com/tools"
  5     android:layout_width="match_parent"
  6     android:layout_height="match_parent">
  7 
  8     <LinearLayout
  9         android:layout_width="match_parent"
 10         android:layout_height="match_parent"
 11         android:background="@mipmap/login_bg"
 12         android:gravity="center"
 13         android:orientation="vertical">
 14 
 15         <de.hdodenhof.circleimageview.CircleImageView
 16             android:id="@+id/app_logo"
 17             android:layout_width="150dp"
 18             android:layout_height="150dp"
 19             android:layout_marginTop="40dp"
 20             android:src="@mipmap/logo" />
 21 
 22         <LinearLayout
 23             android:layout_width="match_parent"
 24             android:layout_height="wrap_content"
 25             android:background="#99404348"
 26             android:gravity="center"
 27             android:paddingTop="20dp"
 28             android:paddingBottom="30dp">
 29 
 30             <TextView
 31                 android:layout_width="wrap_content"
 32                 android:layout_height="wrap_content"
 33                 android:layout_gravity="center"
 34                 android:text="Welcome Back!"
 35                 android:textColor="@color/white"
 36                 android:textSize="18sp" />
 37         </LinearLayout>
 38 
 39         <LinearLayout
 40             android:layout_width="match_parent"
 41             android:layout_height="wrap_content"
 42             android:background="#99000000"
 43             android:orientation="vertical"
 44             android:paddingTop="20dp"
 45             android:paddingBottom="20dp">
 46 
 47             <EditText
 48                 android:id="@+id/loginPage_nickname"
 49                 android:layout_width="match_parent"
 50                 android:layout_height="wrap_content"
 51                 android:layout_gravity="center"
 52                 android:layout_marginLeft="50dp"
 53                 android:layout_marginRight="50dp"
 54                 android:background="@null"
 55                 android:hint="your nickname"
 56                 android:textColor="#9F9FA0"
 57                 android:textColorHint="#9F9FA0" />
 58 
 59             <View
 60                 android:layout_width="match_parent"
 61                 android:layout_height="1dip"
 62                 android:layout_marginLeft="40dp"
 63                 android:layout_marginTop="10dp"
 64                 android:layout_marginRight="40dp"
 65                 android:layout_marginBottom="5dp"
 66                 android:background="#83738F" />
 67 
 68             <RelativeLayout
 69                 android:layout_width="wrap_content"
 70                 android:layout_height="wrap_content">
 71 
 72                 <EditText
 73                     android:id="@+id/loginPage_password"
 74                     android:layout_width="match_parent"
 75                     android:layout_height="wrap_content"
 76                     android:layout_gravity="center"
 77                     android:layout_marginLeft="50dp"
 78                     android:layout_marginRight="50dp"
 79                     android:background="@null"
 80                     android:hint="your password"
 81                     android:password="true"
 82                     android:textColor="#9F9FA0"
 83                     android:textColorHint="#9F9FA0" />
 84 
 85                 <ImageView
 86                     android:id="@+id/loginPage_viewOrNot"
 87                     android:layout_width="wrap_content"
 88                     android:layout_height="wrap_content"
 89                     android:layout_alignRight="@+id/loginPage_password"
 90                     android:layout_marginTop="12dp"
 91                     android:clickable="true"
 92                     android:src="@mipmap/view_off"
 93                     app:tint="@color/white" />
 94             </RelativeLayout>
 95 
 96             <View
 97                 android:layout_width="match_parent"
 98                 android:layout_height="1dip"
 99                 android:layout_marginLeft="40dp"
100                 android:layout_marginTop="10dp"
101                 android:layout_marginRight="40dp"
102                 android:layout_marginBottom="5dp"
103                 android:background="#83738F" />
104         </LinearLayout>
105 
106         <LinearLayout
107             android:layout_width="match_parent"
108             android:layout_height="wrap_content"
109             android:background="#99404348"
110             android:gravity="center"
111             android:orientation="horizontal"
112             android:paddingTop="20dp"
113             android:paddingBottom="30dp">
114 
115             <LinearLayout
116                 android:layout_width="wrap_content"
117                 android:layout_height="wrap_content"
118                 android:layout_gravity="top"
119                 android:orientation="horizontal">
120 
121                 <CheckBox
122                     android:id="@+id/loginPage_isRemember"
123                     android:layout_width="wrap_content"
124                     android:layout_height="wrap_content"
125                     android:text="记住密码" />
126             </LinearLayout>
127 
128             <TextView
129                 android:layout_width="wrap_content"
130                 android:layout_height="wrap_content"
131                 android:layout_marginLeft="15dp"
132                 android:text="Forget Password?"
133                 android:textColor="#FFFFFF"
134                 android:textSize="10sp" />
135 
136             <TextView
137                 android:id="@+id/loginPage_findBack"
138                 android:layout_width="wrap_content"
139                 android:layout_height="wrap_content"
140                 android:layout_gravity="center"
141                 android:text="Tap Here"
142                 android:textColor="@color/blue"
143                 android:textSize="10sp" />
144         </LinearLayout>
145 
146         <LinearLayout
147             android:layout_width="match_parent"
148             android:layout_height="wrap_content"
149             android:orientation="horizontal">
150 
151             <Button
152                 android:id="@+id/loginPage_login"
153                 android:layout_width="wrap_content"
154                 android:layout_height="wrap_content"
155                 android:layout_marginLeft="40dp"
156                 android:layout_marginRight="10dp"
157                 android:layout_weight="1"
158                 android:background="@drawable/buttonstyle"
159                 android:text="Login"
160                 android:textColor="@color/white" />
161 
162             <Button
163                 android:id="@+id/loginPage_reg"
164                 android:layout_width="wrap_content"
165                 android:layout_height="wrap_content"
166                 android:layout_marginLeft="10dp"
167                 android:layout_marginRight="40dp"
168                 android:layout_weight="1"
169                 android:background="@drawable/buttonstyle"
170                 android:text="Sign in"
171                 android:textColor="@color/white" />
172         </LinearLayout>
173 
174     </LinearLayout>
175 
176 </LinearLayout>

LoginActivity.xml

2.注册界面

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

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/blue">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageButton
                android:id="@+id/IV_backtologin"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:backgroundTint="#0000"
                android:src="@mipmap/back"
                android:tint="@color/white" />

            <TextView
                android:id="@+id/reg_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="用户注册"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/bt_re_register"
                android:layout_width="60dp"
                android:layout_height="40dp"
                android:layout_marginLeft="72dp"
                android:layout_marginTop="5dp"
                android:layout_toRightOf="@+id/reg_title"
                android:background="@drawable/buttonstyle"
                android:text="注册"
                android:textColor="@color/white" />
        </RelativeLayout>

    </androidx.appcompat.widget.Toolbar>

    <ImageView
        android:id="@+id/IV_user_icno_register"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:scaleType="fitXY"
        android:src="@mipmap/usericon_default" />
    <!--tips-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="基本信息 |"
            android:textColor="@color/black"
            android:textStyle="bold" />

        <View
            android:layout_width="70dp"
            android:layout_height="1dp"
            android:layout_marginTop="2dp"
            android:background="@color/light_grey" />
    </LinearLayout>
    <!--昵称-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="25dp"
        android:background="@drawable/reg_et_style"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="昵 称：" />

        <EditText
            android:id="@+id/et_reg_nickname"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="3"
            android:hint="字母或者数字昵称"
            android:maxLines="1"
            android:singleLine="true" />
    </LinearLayout>
    <!--密码-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="5dp"
        android:layout_marginRight="25dp"
        android:background="@drawable/reg_et_style"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"

            android:layout_weight="1"
            android:gravity="center"
            android:text="密 码:" />

        <EditText
            android:id="@+id/et_reg_pass"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="3"
            android:hint="键入您的密码"
            android:maxLines="1"
            android:singleLine="true" />
    </LinearLayout>
    <!--tips-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="详细信息 |"
            android:textColor="@color/black"
            android:textStyle="bold" />

        <View
            android:layout_width="70dp"
            android:layout_height="1dp"
            android:layout_marginTop="2dp"
            android:background="@color/light_grey" />
    </LinearLayout>
    <!--姓名-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="25dp"
        android:background="@drawable/reg_et_style"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="真实姓名:" />

        <EditText
            android:id="@+id/et_reg_username"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="3"
            android:hint="真实姓名"
            android:maxLines="1"
            android:singleLine="true" />
    </LinearLayout>
    <!--性别-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="5dp"
        android:layout_marginRight="25dp"
        android:background="@drawable/reg_et_style"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="性 别:" />

        <RadioGroup
            android:id="@+id/reg_userSex"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:orientation="horizontal">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="男" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="女" />
        </RadioGroup>

    </LinearLayout>
    <!--地址-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="5dp"
        android:layout_marginRight="25dp"
        android:background="@drawable/reg_et_style"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="地 址:" />

        <EditText
            android:id="@+id/et_reg_add"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="3"
            android:hint="--省--市--县"
            android:maxLines="1"
            android:singleLine="true" />
    </LinearLayout>
    <!--电话-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="5dp"
        android:layout_marginRight="25dp"
        android:background="@drawable/reg_et_style"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="联系方式:" />

        <EditText
            android:id="@+id/et_reg_tel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="3"
            android:hint="###-####-####"
            android:inputType="number"
            android:maxLines="1"
            android:singleLine="true" />
    </LinearLayout>
    <!--验证码-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="5dp"
        android:layout_marginRight="25dp"
        android:background="@drawable/reg_et_style"
        android:orientation="horizontal">
        <!-- 第四个文本编辑框  输入验证码 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingLeft="25dp"
                android:text="验 证 码:" />

            <EditText
                android:id="@+id/et_registeractivity_phoneCodes"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="10dp"
                android:layout_weight="3"
                android:hint="右图4位验证码"
                android:maxLines="1"
                android:paddingLeft="10dp" />

            <ImageView
                android:id="@+id/iv_registeractivity_showCode"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_marginTop="-10dp"
                android:layout_weight="1.5"
                android:clickable="true"
                android:onClick="onClick" />
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginRight="25dp"
        android:text="@string/register_pic_tips"
        android:textSize="8sp" />

</LinearLayout>

RegActivity.xml

附一张背景图片

还有在RegActivity.xml中的样式drawable样式文件

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

reg_et_style

各位看官，喜欢的话，点个关注吧。

转载请注明出处，谢谢。