Chỉ định layout khác nhau cho màn hình dọc/ngang Android

Chỉ định layout khác nhau cho màn hình dọc/ngang Android

Hướng dẫn này minh họa cách tạo layout riêng biệt cho chế độ portrait (dọc) và landscape (ngang) trong Android.

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Layout cho Portrait (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f6f4"
    android:padding="10dp"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/tvLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button"
        android:layout_centerInParent="true"
        android:layout_marginTop="16sp"
        android:text="Portrait Mode"
        android:textSize="24sp"
        android:textStyle="bold" />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Show Orientation mode" />
</RelativeLayout>

Bước 3: Layout cho Landscape (res/layout-land/activity_main.xml)

Tạo thư mục res/layout-land/ (chuột phải res → New → Android Resource Directory → Resource type: layout → Orientation: landscape) và thêm file activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/tvLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="64dp"
        android:layout_toEndOf="@id/button"
        android:text="Landscape Mode"
        android:textSize="24sp"
        android:textStyle="bold" />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="128sp"
        android:text="Show Orientation mode" />
</RelativeLayout>

Bước 4: Code MainActivity.kt (Kotlin)

import android.content.res.Configuration
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var textView: TextView
    lateinit var button: Button
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        textView = findViewById(R.id.tvLayout)
        button = findViewById(R.id.button)
        
        button.setOnClickListener {
            if (resources.configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
                Toast.makeText(this@MainActivity, "We are in portrait mode", Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this@MainActivity, "We are in Landscape mode", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

Bước 5: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, chạy app. Xoay thiết bị để thấy layout thay đổi: Portrait hiển thị "Portrait Mode" dưới nút bấm, Landscape hiển thị "Landscape Mode" bên cạnh nút bấm. Nhấn nút để xem Toast xác nhận chế độ.

Các qualifier hữu ích khác

• layout-sw600dp/: Màn hình ≥ 600dp (máy tính bảng)
• layout-xlarge/: Màn hình extra large
• layout-night/: Chế độ ban đêm (Dark mode)
• layout-land-hdpi/: Ngang + mật độ hdpi