Android 比较好看的注册登录界面
各位看官姥爷:
对于一款android手机app而言,美观的界面使得用户有好的使用体验,而一款好看的注册登录界面也会给用户好的用户体验,那么话不多说,直接上代码
首先是一款简单的界面展示
1.登陆界面
2.注册界面
好的,那么我们废话不多说 ,直接上代码吧:
1.登录界面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
2.注册界面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?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中的样式drawable样式文件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
各位看官,喜欢的话,点个关注吧。
转载请注明出处,谢谢。