Implement basic login interface design in Android studio. The realization effect is as follows:
(1) Create new
This interface is realized through three Linear layouts (vertical) Create
a new project, and the default design interface in its
. 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,
just drag it directly
(3) Part 1 - Login
Add [text view] to the layout and
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:
the effect is as shown in the figure:
(4) The second part - user name, password
Drag [plaintext], [Password], and [Text view] in [text] into the page.
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:
[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:
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.