How to design a nice user name and password input box for Android studio
Hello everyone, today is my first time to write a blog. I'm not familiar with the functions of blogging. Please forgive me and criticize me
Equivalent to a registration page
----------<?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:background="@drawable/register_bg"
android:orientation="vertical" >
<include layout="@layout/main_title_bar" />
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25dp"
android:src="@drawable/default_icon" />
<EditText
android:id="@+id/et_user_name"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:layout_marginTop="35dp"
android:background="@drawable/bg"
android:drawableLeft="@drawable/user_name_icon"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:hint="enter one user name"
android:paddingLeft="8dp"
android:singleLine="true"
android:textColor="#000000"
android:textColorHint="#a3a3a3"
android:textSize="14sp" />
<EditText
android:id="@+id/et_psw"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:background="@drawable/bg"
android:drawableLeft="@drawable/psw_icon"
android:drawablePadding="10dp"
android:hint="Please input a password"
android:inputType="textPassword"
android:paddingLeft="8dp"
android:singleLine="true"
android:textColor="#000000"
android:textColorHint="#a3a3a3"
android:textSize="14sp" />
<EditText
android:id="@+id/et_psw_again"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:background="@drawable/bg"
android:drawableLeft="@drawable/psw_icon"
android:drawablePadding="10dp"
android:hint="Please enter the password again"
android:inputType="textPassword"
android:paddingLeft="8dp"
android:singleLine="true"
android:textColor="#000000"
android:textColorHint="#a3a3a3"
android:textSize="14sp" />
<Button
android:id="@+id/btn_register"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:layout_marginTop="15dp"
android:text="Registration"
android:textColor="@android:color/white"
android:textSize="18sp" />
</LinearLayout>---------
main_title_bar Layout file for(In fact, it is the implementation of the layout page with the return arrow on the title bar, which can also be left blank)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/title_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/transparent" >
<TextView
android:id="@+id/tv_back"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="@drawable/go_back_selector" />
<TextView
android:id="@+id/tv_main_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:textSize="20sp"
android:layout_centerInParent="true"
/>
<TextView
android:id="@+id/tv_save"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_centerVertical="true"
android:gravity="center"
android:textSize="16sp"
android:textColor="@android:color/white"
android:text="Preservation"
android:visibility="gone"
/>
</RelativeLayout>
Images required for registration page
default_icon:
user_name_icon:
psw_icon:
bg:
Running interface
In fact, there are some suggestions for text box design. First, you can add a background to the text box. Second, you can use drawableLeft to set the picture to the left of the text box. Adjust the color and size. You can use drawablePadding
Adjust the position of the pictures to make them look better.
The first time I wrote a blog, I was a little nervous. I hope that you guys and sisters will put forward their shortcomings and let me see their shortcomings. Next time, I will correct them and let us make progress together. Thank you