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

Như đã trình bày tại Google I/O 2025, màn hình kết nối cho phép người dùng kết nối thiết bị Android với một 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 các ứng dụng ở cửa sổ dạng tự do hoặc cửa sổ tối đa hoá 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 liền mạch và mạnh mẽ với cửa sổ kiểu máy tính 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 những cơ hội mới để tạo ra trải nghiệm ứng dụng hấp dẫn và hiệu quả hơn, phù hợp với nhiều kiểu dáng.

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

Khi một chiếc đ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 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ụ cho biết các ứng dụng đang hoạt động và cho phép người dùng ghim các ứng dụng để truy cập nhanh. Người dùng có thể chạy đồng thời nhiều ứng dụng song song trong các cửa sổ có thể đổi kích thước tuỳ ý 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ó một phiên hoạt động trên màn hình ở chế độ máy tí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ợ tính năng cửa sổ kiểu máy tính (chẳng hạn như máy tính bảng Samsung Galaxy Tab S11) được kết nối với một màn hình ngoài, phiên máy tính sẽ mở rộng trên cả hai màn hình, mang đến một không gian làm việc rộng rãi hơn nữa. Sau đó, hai màn hình này 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 hoạt động trên máy tính sang cả hai màn hình.

Tại sao việc này 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 tạo cửa sổ, hoạt động tương tác trên thanh tác vụ và khả năng tương thích của thiết bị đầu vào (chuột và bàn phím) để xác định trải nghiệm trên màn hình được kết nối. Chúng tôi cũng đưa ra 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 được xây dựng theo các nguyên tắc thiết kế thích ứng, ứng dụng của bạn sẽ tự động có giao diện của máy tính và 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 chỉ có giao diện cảm ứng, thì đây là thời điểm thích hợp để hiện đại hoá.

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

• Đừng giả định một đối tượng Display Display hằng số: Đố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 di 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 phải xử lý linh hoạt các sự kiện thay đổi cấu hình và truy vấn các chỉ số hiển thị 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 độ điểm ảnh khác biệt đáng kể so với màn hình chính của thiết bị. Đả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 thay đổi kích thước một cách phù hợp.
• Hỗ trợ đúng cách các thiết bị ngoại vi: Khi kết nối với màn hình ngoài, người dùng thường tạo một môi trường giống như máy tính hơn. Việc 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ợ cho các hoạt động tương tác bằng bàn phím và chuột.

Xây dựng cho tương lai trên 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 những điểm cập nhật mới nhất đối với 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ổ chiều rộng mới: Lớn và Rất lớn.

Lớp kích thước cửa sổ là tập hợp chính thức, có quy cách bắt buộc về điểm ngắt khung hiển thị 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 sẽ mở rộng hướng dẫn này cho những màn hình có kích thước lớn hơn kích thước của các 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 màn hình rất lớn, việc chỉ cần tăng 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 người dùng tốt nhất. Ví dụ: ứng dụng email có thể hiển thị thoải mái 2 ngăn (hộp thư và thư) 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 cực 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 thư, toàn bộ nội dung thư và bảng điều khiển lịch/việc cần làm, 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 phù hợp 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.
}

Tạo 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 để tạo bố cục thích ứng bằng cách cho phép hiển thị nhiều đích đến cùng 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ý quy trình giao diện người dùng của ứng dụng dựa trên Cảnh. Cảnh là một bố cục hiển thị một hoặc nhiều đích đến cùng một lúc. SceneStrategy xác định xem có thể tạo một Cảnh hay không. Việc liên kết các thực thể SceneStrategy với nhau cho phép bạn tạo và hiển thị nhiều cảnh cho nhiều kích thước màn hình và cấu hình thiết bị.

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

Bạn cũng có thể dễ dàng tạo Cảnh tuỳ chỉnh của riêng mình bằng cách sửa đổi các 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 một SceneStrategy để hiện 3 ngăn nếu chiều rộng cửa sổ đủ lớn và các mục trong ngăn xếp lui của bạn đã khai báo rằng chúng hỗ trợ việc hiển thị trong một cảnh có 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ị hai ngăn cạnh nhau khi không có đủ không gian để hiển thị ba 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ả hai 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 nhập cuối cùng trong ngăn xếp lui ở một ngăn duy nhất bằng cách sử dụng SinglePaneScene. 

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

Một ứng dụng thích ứng cho thấy 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ì thư viện Thích ứng Material 3 của Compose sẽ giúp bạn tạo giao diện người dùng thích ứng (chẳng hạn như bố cục danh sách-chi tiết và ngăn hỗ trợ) tự động điều chỉnh theo 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 theo 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ổ có chiều rộng Lớn và Rất lớn.

Bạn chỉ cần chọn sử dụng 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 một thiết bị được hỗ trợ, sau đó kết nối thiết bị đó với một 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 mới cập nhật về tính 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 đóng vai trò quan trọng trong quá trình chúng tôi tiếp tục tinh chỉnh trải nghiệm màn hình kết nối trên máy tính. Hãy chia sẻ ý kiến của bạ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, phù hợp 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 khác theo hướng đó và chúng tôi tin 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ẽ tạo ra!

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