Android studio app login interface design

Implement basic login interface design in Android studio. The realization effect is as follows:
insert image description here
(1) Create new
This interface is realized through three Linear layouts (vertical) Create
a new project, and the default design interface in its
default
. When the LinearLayout defaults to the horizontal direction, we change the [orientation] in the [Attribute] on the right to [vertical].
(2) Add a linear layout,
insert image description here
just drag it directly

(3) Part 1 - Login
Add [text view] to the layout and
insert image description here
set a series of properties on the right, among which [gravity] controls the relative position of the text content, and [padding Bottom] controls the distance from the text to the lower border. And choose the appropriate font size, background color, etc. The properties of this example are set as follows:
insert image description here
the effect is as shown in the figure: insert image description here
(4) The second part - user name, password
Drag [plaintext], [Password], and [Text view] in [text] into the page.
insert image description here
For [Plaintext], delete the content in [text], find [hint] and enter "Please enter the user name". 【hint】Set hint information for this text box. [layout—margin] Set the distance between the upper, lower, left, and right borders of the text box.
The specific attribute settings and results are shown in the figure:
insert image description here
[Forgot password] is on the right, and it is enough to set its [layout-gravity] to [right].
Finally, select the [Linear layout] of the entire second part and set its [layout-height] to [wrap-content].
(5) The third part - login and registration buttons.
Add two [button] buttons to the layout, adjust the button position according to the [layout-margin] attribute; [text] [text color] [text size] set the button name, font color and size; [background] attribute set the background color.
The final result is as shown in the figure:
insert image description here
In addition, to set the border color of the [Registration] button, you need to right-click [drawable] in the right view [new] – [drawable resource file] to create an xml file, and the content of the file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <solid android:color="#ffffff" />
    <stroke android:width="1dp" android:color="#65c294"/>//边框粗细、颜色
</shape>

Attached is the entire code of this interface design:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SigninActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="#65C294"
            android:gravity="bottom|center"
            android:paddingBottom="15dp"
            android:text="登录"
            android:textColor="#FFFFFB"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <EditText
            android:id="@+id/Username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="40dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="20dp"
            android:ems="10"
            android:hint="请输入用户名"
            android:inputType="textPersonName"
            android:paddingLeft="20dp"
            android:paddingRight="20dp" />

        <EditText
            android:id="@+id/Password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:ems="10"
            android:hint="请输入密码"
            android:inputType="textPassword"
            android:paddingLeft="20dp"
            android:paddingRight="20dp" />


        <TextView
            android:id="@+id/Forgetpassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="10dp"
            android:layout_marginRight="25dp"
            android:text="忘记密码" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:id="@+id/Sign_in"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="20dp"
            android:background="#65C294"
            android:text="登 录"
            android:textColor="#FFFFFB"
            android:textSize="18sp" />

        <Button
            android:id="@+id/Sign_up"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:background="#FFFFFB"
            android:text="注 册"
            android:textColor="#65C294"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>

If you set the border color of the [Registration] button, change android:background="#FFFFFB" in the <Button to android:background="@drawable/boundline". Among them, @drawable/boundline is the new .xml file.

Guess you like

Origin blog.csdn.net/kong_youqing/article/details/120060390