Trong phần này chúng ta sẽ tìm hiểu một số loại layout trong Android.

Layout sẽ quy định kích thước cũng như sự sắp xếp của các View trên màn hình. Android có rất nhiều lớp layout, LinearLayout sẽ sắp xếp các View trên một hàng hoặc một cột, FrameLayout chỉ hiển thị một View, RelativeLayout sắp xếp các View theo mối quan hệ giữa chúng, GridLayout sắp xếp các View theo dạng bảng.

Hiển thị ảnh với FrameLayout

Bên trong thư mục res của project có các thư mục drawable để chúng ta đặt các file tài nguyên vào trong đó và chúng ta có thể tham chiếu đến chúng trong file layout dễ dàng. Chẳng hạn ở đây mình đặt một file ảnh với tên zamok.jpg trong thư mục drawable-hdpi.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_gravity="top" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" >
    
    <ImageView android:layout_height="match_parent" 
        android:layout_width="match_parent" 
        android:src="@drawable/zamok" />        
</FrameLayout>

Trong file main.xml, chúng ta sử dụng FrameLayout làm ViewGroup chính, bên trong FrameLayout này chúng ta đặt một thẻ ImageView.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_gravity="top" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" >

Thuộc tính layout_gravity sẽ bố trí FrameLayout ở các vị trí khác nhau, ở đây top tức là đưa lên đầu màn hình, ngoài ra còn có các giá trị khác như bottom, left, right, center... Thuộc tính layout_width và layout_height với giá trị wrap_content sẽ quy định kích thước layout vừa đủ để bọc lấy các thành phần bên trong nó.

<ImageView android:layout_height="match_parent" 
    android:layout_width="match_parent"
    android:src="@drawable/zamok" />

Lớp ImageView sẽ hiển thị ảnh, đường dẫn đến file ảnh được truyền vào thuộc tính android:src.

LinearLayout

Trong ví dụ dưới đây, chúng ta sẽ thiết kế một hàng các Button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
  <Button 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:text="Button1" />

  <Button 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:text="Button2" />
      
  <Button 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:text="Button3" />
      
  <Button 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:text="Button4" />      
      
</LinearLayout>

Lớp LinearLayout sẽ sắp xếp các View theo hàng hoặc theo cột.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" >

Thuộc tính width và height có giá trị match_parent tức là vừa khít với kích thước của thiết bị.

<Button android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:text="Button1" />

Mỗi Button có width và height là wrap_content, tức là kích thước của chúng vừa đủ để bọc lấy đoạn text bên trong nó.

Thiết kế bằng Java

Ngoài việc thiết kế trong file layout, chúng ta cũng có thể thiết kế trong file Activity.

package com.phocode;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
 
        Button btn1 = new Button(this);
        btn1.setText("Button");
 
        Button btn2 = new Button(this);
        btn2.setText("Button");
 
        Button btn3 = new Button(this);
        btn3.setText("Button");
 
        Button btn4 = new Button(this);
        btn4.setText("Button");
 
        LinearLayout ll = new LinearLayout(this);
        ll.setOrientation(LinearLayout.HORIZONTAL);
 
        ll.addView(btn1);
        ll.addView(btn2);
        ll.addView(btn3);
        ll.addView(btn4);
 
        setContentView(ll);
    }
}

Ở đây chúng ta cũng thiết kế lại giống như ví dụ trước là đặt 4 Button nằm trên cùng một hàng.

Button btn1 = new Button(this);
btn1.setText("Button");

Để tạo Button thì chúng ta dùng tới lớp android.widget.Button, phương thức setText() sẽ thiết lập nội dung Button.

LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.HORIZONTAL);

Tương tự với lớp android.widget.LinearLayout.

ll.addView(btn1);
ll.addView(btn2);
ll.addView(btn3);
ll.addView(btn4);

Phương thức addView() sẽ thêm các View vào layout.

setContentView(ll);

Phương thức setContentView() sẽ nhận đối tượng LinearLayout thay vì nhận ID của file XML như trước.

Kết hợp các Layout

Chúng ta có thể lồng các layout vào nhau để kết hợp chúng lại.

<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" >  
    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" >

        <Button 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:text="Button" />    
        
        <Button 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:text="Button" />    
        
        <Button 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:text="Button" />    
        
        <Button 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:text="Button" />               
    </LinearLayout>
</FrameLayout>   

Trong ví dụ này chúng ta lồng LinearLayout vào bên trong Framelayout.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" > 

FrameLayout có kích thước vừa đủ để bọc lấy các phần tử bên trong nó. Các phần tử bên trong FrameLayout sẽ nằm chính giữa màn hình theo thuộc tính layout_gravity là center.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" >

LinearLayout bên trong FrameLayout chứa 4 Button được sắp xếp theo chiều dọc.

RelativeLayout

RelativeLayout sắp xếp các View dựa trên vị trí của chúng với nhau hoặc với View cha.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" >
    
    <EditText 
        android:id="@+id/etId" 
        android:layout_marginTop="10dp" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" />  
        
    <Button 
        android:id="@+id/btn_sendId" 
        android:layout_below="@+id/etId" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Send" />          
          
    <Button 
       android:id="@+id/btn_clearId" 
       android:layout_below="@+id/etId" 
       android:layout_toRightOf="@+id/btn_sendId" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Clear" />    
     
</RelativeLayout>  

Trong ví dụ này chúng ta hiển thị 1 EditText và 2 Button.

<EditText 
    android:id="@+id/etId" 
    android:layout_marginTop="10dp" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" /> 

EditText sẽ có bề ngang chiếm toàn bộ màn hình, chiều cao chỉ vừa đủ bọc lấy đoạn text bên trong. Ngoài ra thuộc tính marginTop quy định EditText cách cạnh trên của màn hình 10dp.

<Button 
    android:id="@+id/btn_sendId" 
    android:layout_below="@+id/etId" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Send" />   

Chúng ta có 2 Button, trong đó Button “Send” sẽ được đặt phía dưới EditText nhờ vào thuộc tính layout_below, thuộc tính này nhận id của EditText.

<Button 
    android:id="@+id/btn_clearId" 
    android:layout_below="@+id/etId" 
    android:layout_toRightOf="@+id/btn_sendId" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Clear" />   

Button “Clear” được đặt phía dưới EditText và nằm phía bên phải Button “Send”, ở đây chúng ta dùng thêm thuộc tính layout_toRightOf để chỉ định View nằm phía bên phải của View nào.

GridLayout

GridLayout sắp xếp các View con theo dạng bảng, bảng bao gồm nhiều hàng và cột, hàng và cột giao nhau tạo thành các ô, một View có thể chiếm một hoặc nhiều ô. Thuộc tính gravity cho biết View sẽ được đặt ở đâu trong bảng.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" >
    
    <Button 
        android:text="(0, 0)" 
        android:layout_row="0" 
        android:layout_column="0" />    
       
    <Button 
        android:layout_row="0" 
        android:layout_column="1" 
        android:layout_columnSpan="2" 
        android:layout_gravity="fill_horizontal" />       
      
    <Button 
        android:text="(0, 3)" 
        android:layout_row="0" 
        android:layout_column="3" />       
    
    <Button 
        android:text="(0, 4)" 
        android:layout_row="0" 
        android:layout_column="4" />       
      
    <Button 
        android:layout_row="1" 
        android:layout_column="0" 
        android:layout_rowSpan="3" 
        android:layout_columnSpan="5" 
        android:layout_gravity="fill" />   
      
    <Button 
        android:text="Center" 
        android:layout_row="4" 
        android:layout_column="0" 
        android:layout_columnSpan="5" 
        android:layout_gravity="center_horizontal" />      
      
    <Button 
        android:text="Right" 
        android:layout_row="5" 
        android:layout_column="0" 
        android:layout_columnSpan="5" 
        android:layout_gravity="right" />           
    
</GridLayout>

Trong ví dụ này chúng ta có một GridLayout chứa một nhóm các Button.

<Button 
    android:text="(0, 0)" 
    android:layout_row="0" 
    android:layout_column="0" />  

Thuộc tính layout_row biểu thị số hàng còn thuộc tính layout_column biểu thị số cột, ở đây hàng 0 cột 0 tức là Button này nằm ở góc trái phía trên bảng.

<Button 
    android:layout_row="0" 
    android:layout_column="1" 
    android:layout_columnSpan="2" 
    android:layout_gravity="fill_horizontal" /> 

Button ở đoạn code trên nằm ở ô (0,1) nhưng có chiều ngang dài thêm 2 ô do được thiết lập trong thuộc tính columnSpan nhưng chúng ta phải khai báo thêm thuộc tính layout_gravity là fill_horizontal, nếu không thì Button này vẫn sẽ có kích thước như cũ.

<Button 
    android:layout_row="1" 
    android:layout_column="0" 
    android:layout_rowSpan="3" 
    android:layout_columnSpan="5" 
    android:layout_gravity="fill" /> 

Tương tự Button ở đoạn code trên nằm ở hàng 1 cột 0, thuộc tính layout_rowSpan quy định chiều cao của Button này dài thêm 3 hàng, thuộc tính columnSpan quy định Button này dãn kích thước theo chiều ngang thêm 5 cột nữa, thuộc tính layout_gravity là fill sẽ lấp đầy khoảng trống được dãn ra đó.

<Button 
    android:text="Center" 
    android:layout_row="4" 
    android:layout_column="0" 
    android:layout_columnSpan="5" 
    android:layout_gravity="center_horizontal" />  

Button ở đoạn code trên nằm ở giữa cột nhờ vào thuộc tính layout_gravity là center_horizontal.