How to design a nice user name and password input box for Android studio

Keywords: Android xml encoding

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

Posted by techek on Tue, 31 Dec 2019 12:05:15 -0800