Chúng tôi rất vui mừng thông báo một cột mốc lớn trong việc đưa máy tính di động và máy tính để bàn đến gần nhau hơn trên Android: tính năng hỗ trợ màn hình được kết nối đã đạt giai đoạn phát hành rộng rãi trong bản phát hành Android 16 QPR3 !

Như đã trình bày tại Google I/O 2025, màn hình được kết nối cho phép người dùng kết nối thiết bị Android với màn hình ngoài và truy cập ngay vào môi trường cửa sổ kiểu máy tính. Người dùng có thể sử dụng ứng dụng ở dạng cửa sổ tự do hoặc cửa sổ được phóng to và có thể làm nhiều việc cùng lúc như trên hệ điều hành máy tính.

Google và Samsung đã hợp tác để mang đến trải nghiệm cửa sổ kiểu máy tính liền mạch và mạnh mẽ cho các thiết bị trong hệ sinh thái Android chạy Android 16 khi kết nối với màn hình ngoài.
Tính năng này hiện được cung cấp rộng rãi trên các thiết bị được hỗ trợ* cho những người dùng có thể kết nối điện thoại Pixel và Samsung được hỗ trợ với màn hình ngoài, mở ra cơ hội mới để xây dựng trải nghiệm ứng dụng hấp dẫn và hiệu quả hơn, thích ứng với nhiều kiểu dáng thiết bị.

Tính năng này hoạt động ra sao?

Khi một điện thoại Android hoặc điện thoại có thể gập lại được hỗ trợ kết nối với màn hình ngoài, một phiên bản máy tính mới sẽ bắt đầu trên màn hình được kết nối.

Trải nghiệm trên màn hình được kết nối tương tự như trải nghiệm trên máy tính, bao gồm cả thanh tác vụ hiển thị các ứng dụng đang hoạt động và cho phép người dùng ghim ứng dụng để truy cập nhanh. Người dùng có thể chạy đồng thời nhiều ứng dụng cạnh nhau trong các cửa sổ có thể đổi kích thước tự do trên màn hình được kết nối.

Điện thoại kết nối với màn hình ngoài có phiên bản máy tính trên màn hình, trong khi điện thoại vẫn duy trì trạng thái riêng.

Khi một thiết bị hỗ trợ cửa sổ kiểu máy tính (chẳng hạn như máy tính bảng như Samsung Galaxy Tab S11) được kết nối với màn hình ngoài, phiên bản máy tính sẽ mở rộng trên cả hai màn hình, mở ra một không gian làm việc rộng lớn hơn nữa. Sau đó, hai màn hình sẽ hoạt động như một hệ thống liên tục, cho phép các cửa sổ ứng dụng, nội dung và con trỏ di chuyển tự do giữa các màn hình.

Máy tính bảng kết nối với màn hình ngoài, mở rộng phiên bản máy tính trên cả hai màn hình.

Tại sao sản phẩm của bạn lại quan trọng?

Trong bản phát hành Android 16 QPR3, chúng tôi đã hoàn thiện các hành vi cửa sổ, tương tác trên thanh tác vụ và khả năng tương thích với thiết bị đầu vào (chuột và bàn phím) xác định trải nghiệm màn hình được kết nối. Chúng tôi cũng đưa vào các phương pháp xử lý khả năng tương thích để điều chỉnh tỷ lệ cửa sổ và tránh khởi động lại ứng dụng khi chuyển đổi màn hình.

Nếu ứng dụng của bạn được xây dựng theo các nguyên tắc thiết kế thích ứng, thì ứng dụng đó sẽ tự động có giao diện và cảm giác như trên máy tính, đồng thời người dùng sẽ cảm thấy quen thuộc. Nếu ứng dụng bị khoá ở chế độ dọc hoặc giả định giao diện chỉ cảm ứng, thì đây là thời điểm để hiện đại hoá.

Cụ thể, hãy chú ý đến các phương pháp hay và quan trọng nhất sau đây để có trải nghiệm ứng dụng tối ưu trên màn hình được kết nối:

• Không giả định đối tượng Display không đổi: Đối tượng Display được liên kết với ngữ cảnh của ứng dụng có thể thay đổi khi cửa sổ ứng dụng được chuyển sang màn hình ngoài hoặc nếu cấu hình màn hình thay đổi. Ứng dụng của bạn nên xử lý các sự kiện thay đổi cấu hình một cách mượt mà và truy vấn các chỉ số màn hình một cách linh động thay vì lưu vào bộ nhớ đệm.
• Tính đến các thay đổi về cấu hình mật độ: Màn hình ngoài có thể có mật độ pixel khác biệt đáng kể so với màn hình thiết bị chính. Đảm bảo bố cục và tài nguyên của bạn thích ứng chính xác với những thay đổi này để duy trì độ rõ ràng và khả năng sử dụng của giao diện người dùng. Sử dụng pixel không phụ thuộc vào mật độ (dp) cho bố cục, cung cấp tài nguyên dành riêng cho mật độ và đảm bảo giao diện người dùng của bạn điều chỉnh tỷ lệ phù hợp.
• Hỗ trợ thiết bị ngoại vi bên ngoài: Khi kết nối với màn hình ngoài, người dùng thường tạo ra một môi trường giống như trên máy tính hơn. Điều này thường liên quan đến việc sử dụng bàn phím, chuột, bàn di chuột, webcam, micrô và loa ngoài. Cải thiện khả năng hỗ trợ các tương tác bàn phím và chuột.

Xây dựng cho tương lai của máy tính bằng các công cụ hiện đại

Chúng tôi cung cấp một số công cụ để giúp bạn xây dựng trải nghiệm trên máy tính. Hãy cùng xem lại các bản cập nhật mới nhất cho các thư viện thích ứng cốt lõi của chúng tôi!

Các lớp kích thước cửa sổ mới: Lớn và Rất lớn

Bản cập nhật lớn nhất trong Jetpack WindowManager 1.5.0 là việc bổ sung 2 lớp kích thước cửa sổ theo chiều rộng mới: Lớn và Rất lớn.

Các lớp kích thước cửa sổ là tập hợp các điểm ngắt khung hiển thị chính thức, có ý kiến giúp bạn thiết kế và phát triển các bố cục thích ứng. Với phiên bản 1.5.0, chúng tôi đang mở rộng hướng dẫn này cho các màn hình có kích thước lớn hơn máy tính bảng thông thường.

Dưới đây là các điểm ngắt chiều rộng mới:

• Lớn: Đối với chiều rộng từ 1200 dp đến 1600 dp
• Rất lớn: Đối với chiều rộng ≥1600 dp

Các lớp kích thước cửa sổ khác nhau dựa trên chiều rộng màn hình.

Trên các bề mặt rất lớn, việc chỉ điều chỉnh tỷ lệ bố cục Mở rộng của máy tính bảng không phải lúc nào cũng mang lại trải nghiệm tốt nhất cho người dùng. Ví dụ: ứng dụng email có thể thoải mái hiển thị 2 ngăn (hộp thư và tin nhắn) trong lớp kích thước cửa sổ Mở rộng. Nhưng trên màn hình máy tính Rất lớn, ứng dụng email có thể hiển thị một cách trang nhã 3 hoặc thậm chí 4 ngăn, có thể là hộp thư, danh sách tin nhắn, nội dung tin nhắn đầy đủ và bảng điều khiển lịch/nhiệm vụ, tất cả cùng một lúc.

Để đưa các lớp kích thước cửa sổ mới vào dự án, bạn chỉ cần gọi hàm từ tập hợp WindowSizeClass.BREAKPOINTS_V2 thay vì WindowSizeClass.BREAKPOINTS_V1:

val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Sau đó, hãy áp dụng bố cục chính xác khi bạn chắc chắn rằng ứng dụng của mình có ít nhất không gian đó:

if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Xây dựng bố cục thích ứng bằng Jetpack Navigation 3

Navigation 3 là thành phần mới nhất trong bộ sưu tập Jetpack. Navigation 3 vừa đạt đến bản phát hành ổn định đầu tiên, là một thư viện điều hướng mạnh mẽ được thiết kế để hoạt động với Compose.

Navigation 3 cũng là một công cụ tuyệt vời để xây dựng bố cục thích ứng bằng cách cho phép hiển thị nhiều đích cùng một lúc và cho phép chuyển đổi liền mạch giữa các bố cục đó.

Hệ thống này để quản lý luồng giao diện người dùng của ứng dụng dựa trên Cảnh. Một Cảnh là một bố cục hiển thị một hoặc nhiều đích cùng một lúc. Một SceneStrategy xác định xem có thể tạo Cảnh hay không. Việc xâu chuỗi các thực thể SceneStrategy cho phép bạn tạo và hiển thị các cảnh khác nhau cho các kích thước màn hình và cấu hình thiết bị khác nhau.

Đối với các bố cục chuẩn có sẵn, chẳng hạn như bố cục chi tiết danh sách và ngăn hỗ trợ, bạn có thể sử dụng Cảnh trong thư viện Thích ứng Compose Material 3 (có trong phiên bản 1.3 trở lên).

Bạn cũng có thể dễ dàng xây dựng Cảnh tuỳ chỉnh của riêng mình bằng cách sửa đổi công thức Cảnh hoặc bắt đầu từ đầu. Ví dụ: hãy xem xét một Cảnh hiển thị 3 ngăn cạnh nhau:

class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

Trong trường hợp này, bạn có thể xác định SceneStrategy để hiển thị 3 ngăn nếu chiều rộng cửa sổ đủ rộng và các mục trong ngăn xếp lui đã khai báo rằng chúng hỗ trợ hiển thị trong cảnh 3 ngăn.

class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

Bạn có thể sử dụng ThreePaneSceneStrategy với các chiến lược khác khi tạo NavDisplay. Ví dụ: chúng ta cũng có thể thêm TwoPaneStrategy để hiển thị 2 ngăn cạnh nhau khi không có đủ không gian để hiển thị 3 ngăn.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

Nếu không có đủ không gian để hiển thị 3 hoặc 2 ngăn, cả 2 chiến lược cảnh tuỳ chỉnh của chúng tôi đều trả về null. Trong trường hợp này, NavDisplay sẽ quay lại hiển thị mục cuối cùng trong ngăn xếp lui ở một ngăn bằng cách sử dụng SinglePaneScene.

Bằng cách sử dụng cảnh và chiến lược, bạn có thể thêm bố cục 1, 2 và 3 ngăn vào ứng dụng của mình!

Ứng dụng thích ứng hiển thị chế độ điều hướng 3 ngăn trên màn hình rộng.

Hãy xem tài liệu để tìm hiểu thêm về cách tạo bố cục tuỳ chỉnh bằng Cảnh trong Navigation 3.

Bố cục thích ứng độc lập

Nếu bạn cần một bố cục độc lập, thư viện Thích ứng Compose Material 3 sẽ giúp bạn tạo giao diện người dùng thích ứng như bố cục danh sách-chi tiết và ngăn hỗ trợ, tự động thích ứng với cấu hình cửa sổ dựa trên các lớp kích thước cửa sổ hoặc tư thế thiết bị. 

Tin vui là thư viện này đã được cập nhật các điểm ngắt mới! Kể từ phiên bản 1.2, các hàm chỉ thị scaffold ngăn mặc định hỗ trợ các lớp kích thước cửa sổ theo chiều rộng Lớn và Rất lớn.

Bạn chỉ cần chọn tham gia bằng cách khai báo trong tệp bản dựng Gradle rằng bạn muốn sử dụng các điểm ngắt mới:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Bắt đầu

Khám phá tính năng màn hình được kết nối trong bản phát hành Android mới nhất. Tải Android 16 QPR3 trên thiết bị được hỗ trợ, sau đó kết nối thiết bị đó với màn hình ngoài để bắt đầu kiểm thử ứng dụng của bạn ngay hôm nay! 

Hãy xem tài liệu cập nhật về khả năng hỗ trợ nhiều màn hình và quản lý cửa sổ để tìm hiểu thêm về cách triển khai các phương pháp hay nhất này.

Phản hồi

Ý kiến phản hồi của bạn là rất quan trọng khi chúng tôi tiếp tục tinh chỉnh trải nghiệm máy tính trên màn hình được kết nối. Hãy chia sẻ ý kiến và báo cáo mọi vấn đề thông qua các kênh phản hồi chính thức của chúng tôi.

Chúng tôi cam kết biến Android thành một nền tảng linh hoạt, thích ứng với nhiều cách mà người dùng muốn tương tác với ứng dụng và thiết bị của họ. Việc cải thiện khả năng hỗ trợ màn hình được kết nối là một bước nữa theo hướng đó và chúng tôi nghĩ rằng người dùng sẽ yêu thích trải nghiệm trên máy tính mà bạn sẽ xây dựng!

*Lưu ý: Tại thời điểm viết bài viết này, màn hình được kết nối được hỗ trợ trên các dòng Pixel 8, 9, 10 và trên nhiều thiết bị Samsung, bao gồm S26, Fold7, Flip7 và Tab S11.