Below is how it looks like

Here we use LinearLayout to arrange the elements

<?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=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint_username"
        android:paddingBottom="20dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint_password"
        android:paddingBottom="20dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorLoginButton"
        android:text="@string/login_button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/login_error"
        android:paddingTop="20dp" />


</LinearLayout>

strings.xml

<resources>
    <string name="app_name">Login Wechat</string>
    <string name="login_button">Login</string>
    <string name="login_error">Login Error</string>
    <string name="hint_username">QQ/Wechat/Email</string>
    <string name="hint_password">Password</string>
</resources>

Code

https://github.com/AndrewProgramming/AndroidStudy