建立好一個Android Activity以後，我們可以直接在.xml檔案中拖動元件來進行介面的設定。當然拖動的時候不能準確的佈局。所以我們還可以在layout中自己寫程式碼新增元件，設定位置大小等等。
一，首先來介紹一下Android的一些元件吧。
開啟.xml頁面，選擇切換到Graphical Layout頁面。

從第一個開始看，Palette這裡可以改變以下元件顯示樣式，點選右邊的小三角就可以進行選擇了。
在這裡簡要介紹幾個常用的元件。
1.TextView：用來顯示字串的元件，在手機上就是顯示一塊文字的區域。
2.EditView:輸入框，顯示是一條橫線，使用者可以輸入數字字母等。
3.Button:按鈕，可點選。
4.imageView:新增圖片

二，現在切換到.xml頁面，沒新增東西前，預設的是這個樣子的，它會預設新增一塊文字區域，顯示hello world!

在TextView前面的一部分，<RelativeLayout…>中的東西不能刪，可以先不用管它，<TextView…/>這個hello world可以刪掉的，之後我們可以新增圖片，輸入框，按鈕等等，先來做一個簡單的登入介面

1.將原來的文字<TextView…/>中的內容刪掉。先來新增一張圖片。按下ctrl+/,選擇，在/>前新增內容，程式碼如下：(這裡的cat是我新增在res資料夾下drawable資料夾下的一張png格式的圖片)，在這裡100dp是自己新增的長和寬。

 <ImageView 
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/cat"
        />

2.接下來新增賬號文字和輸入框，程式碼如下：

<TextView
        android:id="@+id/zhanghao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/zhanghao" 
        android:textSize="20sp"
        />
    
    <EditText 
        android:id="@+id/zhanghao_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>
 

3.，.接下來新增密碼文字和輸入框，程式碼如下：

<TextView 
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/password"
        android:textSize="20sp" 
        />
    
    <EditText 
        android:id="@+id/password_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>

4.新增登入按鈕，程式碼如下：

<Button 
        android:id="@+id/button_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login"
        />

5.以上知識添加了必要的元件，最終的登入介面的實現，還需要加上一些佈局，這裡用的是線性佈局LinearLayout。以下是登入介面以及完整的登入介面的.xml中的程式碼。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 
    android:orientation="vertical"
    
    android:gravity="center"
    android:background="@drawable/background_second">
    
    <ImageView 
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/cat"
        />
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <TextView
        android:id="@+id/zhanghao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/zhanghao" 
        android:textSize="20sp"
        />
    
    <EditText 
        android:id="@+id/zhanghao_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <TextView 
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/password"
        android:textSize="20sp" 
        />
    
    <EditText 
        android:id="@+id/password_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>
    </LinearLayout>
    
    <Button 
        android:id="@+id/button_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login"
        />

</LinearLayout>