Linear Layout – ví dụ với hoạt ảnh slide

28/08/2023, bởi Thầy TiiL trong mục: Lập trình
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>
Thẻ:Lập trình Android
TIN & HỌC TiiL

Linear Layout – ví dụ với hoạt ảnh slide

Bài viết liên quan

Linear Layout – ví dụ với hoạt ảnh slide

Bài viết liên quan

Truy cập theo chuyên mục

TRUY CẬP NHANH theo Thẻ
