Hello everyone, today I brought the UI design of the previous blog, and today is the design of the text box, making the text box more beautiful, and pursuing good user interaction.
There are two steps today: 1. Get the layout of the two interfaces
2. Make the text box beautiful and have a click effect
Let me show you the renderings first: we can see that the themes of the two interfaces are the same
Features: 1. The border of EditText is colored
2. is rounded
3. We can see that the border colors of the two text boxes for entering the mobile number and entering the password are different
(This is because when we click on the text box, the color of the current text box will become darker and the color of the unfocused text box will not change)
The first step is to get the code on the layout
1. Login interface layout code
<?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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/userlogin_logo" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<EditText
android:id="@+id/signup_phone_num_Edta"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="请输入11位手机号"
android:inputType="number"
android:paddingLeft="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="@+id/signup_pswd_Edta"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="请输入密码"
android:inputType="textPassword"
android:paddingLeft="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<ImageView
android:id="@+id/iv_hide"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="15dp"
android:layout_marginTop="13dp"
android:padding="14dp"
android:src="@drawable/agt" />
<ImageView
android:id="@+id/iv_show"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="15dp"
android:layout_marginTop="13dp"
android:padding="14dp"
android:src="@drawable/agu"
android:visibility="gone" />
</LinearLayout>
</RelativeLayout>
<Button
android:id="@+id/signup_Btna"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/shape_button"
android:gravity="center"
android:paddingLeft="10dip"
android:text="登陆"
android:textColor="#ffffff" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp" >
<CheckBox
android:id="@+id/cb_passworda"
android:layout_width="wrap_content"
android:layout_height="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:gravity="center"
android:text="记住密码"
android:textColor="#00868B" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp" >
<CheckBox
android:id="@+id/cb_logina"
android:layout_width="wrap_content"
android:layout_height="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:gravity="center"
android:text="自动登录"
android:textColor="#00868B" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="bottom" >
<TextView
android:id="@+id/goto_reg_texta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="25dp"
android:background="@drawable/main_bt_pressed"
android:text="账户注册"
android:textColor="#00868B" />
</LinearLayout>
</LinearLayout>
<?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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<ImageView
android:id="@+id/backImgb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:scaleType="centerInside"
android:src="@drawable/back_normal" />
<TextView
android:id="@+id/registerTextb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:text="注册"
android:textColor="#00868B"
android:textSize="20sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="8"
android:orientation="vertical" >
<EditText
android:id="@+id/phone_num_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="手机号"
android:inputType="number"
android:padding="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<EditText
android:id="@+id/pswd_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="6-10位密码"
android:inputType="textPassword"
android:padding="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<EditText
android:id="@+id/confirm_pswd_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="确认密码"
android:inputType="textPassword"
android:padding="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/verify_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="@drawable/bg_edittext"
android:hint="验证码"
android:inputType="number"
android:padding="5dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<Button
android:id="@+id/verify_Btnb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:text="验证码"
android:textColor="#00868B" />
</LinearLayout>
<Button
android:id="@+id/reg_Btnb"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/shape_button"
android:text="注册"
android:textColor="#fff" />
</LinearLayout>
</LinearLayout>The second step is to fix the rounded corners and change the border color when focusing
1. (Anyone with development experience can see that the design of the display effect is in one file, that is bg_edittext.xml)
2. There are two files in bg_edittext.xml, bg_edittext_normal (unfocused state effect) and bg_edittext_focused (focused state effect)
Look at the code
1.bg_edittext.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_edittext_normal" android:state_window_focused="false"/>
<item android:drawable="@drawable/bg_edittext_focused" android:state_focused="true"/>
</selector>
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="3dip"/>
<stroke
android:width="1dip"
android:color="#BDC7D8" />
</shape> 3. bg_edittext_focused
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="3dip"/>
<stroke
android:width="1dip"
android:color="#728ea3" />
</shape> In the previous section, we have made the rounded corners very clear. If you don’t know how to go to the previous blog to see
I'm here today. If you have any questions, you can leave a message to see that you will return
If you don't like it, don't spray