Các nhà phát triển Android đã quen thuộc với nhiều loại bố cục khác nhau cho mục đích thiết kế cơ bản. Điều kiện quan trọng nhất mà bất kỳ thuộc tính bố cục nào cũng phải đáp ứng là khả năng hỗ trợ nhiều thiết bị và xử lý hoặc điều chỉnh từng giao diện người dùng cho phù hợp với màn hình mà nó được hiển thị.
Tôi sẽ đưa ra một bản demo ngắn gọn về điều này. Chúng ta hãy tạo một dự án cấu thành màn hình chính trong Android, tương tự như màn hình chính của Nokia Lumia.
Design xml file of the Activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_margin="10dp"
tools:context=".MainActivity">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/scrollView"
android:scrollbars="none">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:id="@+id/linearLayout"
android:layout_marginBottom="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:background="#00CED1"
android:layout_marginRight="5dp"
android:id="@+id/l1">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView"
android:layout_gravity="center_horizontal"
android:src="@drawable/contact"
android:layout_marginTop="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contact"
android:id="@+id/textView"
android:layout_gravity="center_horizontal"
android:textColor="#ffffff"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#FF3300"
android:layout_marginLeft="0dp"
android:id="@+id/l2">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView2"
android:layout_gravity="center_horizontal"
android:src="@drawable/camera"
android:layout_marginTop="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Video"
android:id="@+id/textView2"
android:layout_gravity="center_horizontal"
android:textColor="#ffffff"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/linearLayout"
android:layout_alignParentStart="true"
android:id="@+id/linearLayout2"
android:layout_marginBottom="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:background="#FFCC11"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:id="@+id/l3">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView3"
android:layout_gravity="center_horizontal"
android:src="@drawable/audio"
android:layout_marginTop="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Audio"
android:id="@+id/textView3"
android:layout_gravity="center_horizontal"
android:textColor="#ffffff"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#0198E1"
android:layout_marginLeft="5dp"
android:id="@+id/l4"
android:layout_marginTop="5dp">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView4"
android:layout_gravity="center_horizontal"
android:src="@drawable/photo"
android:layout_marginTop="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Photo"
android:id="@+id/textView4"
android:layout_gravity="center_horizontal"
android:textColor="#ffffff"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/linearLayout2"
android:layout_alignParentStart="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#9B30FF"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:id="@+id/l5">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView5"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@drawable/note" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Notes"
android:id="@+id/textView5"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#37BC61"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:id="@+id/l7">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView6"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@drawable/moreapp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More Apps"
android:id="@+id/textView6"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FF8600"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/l8">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView7"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@drawable/quickview" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Quick View"
android:id="@+id/textView7"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#00868B"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:id="@+id/l6">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageView8"
android:layout_gravity="center"
android:src="@drawable/setting"
android:layout_marginTop="80dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:id="@+id/textView8"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
