Thiết bị Android mở rộng liền mạch sang màn hình được kết nối

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

Như đã giới thiệu tại Google I/O 2025, tính năng 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à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 ở chế độ cửa sổ tuỳ ý 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 dành cho 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ị chạy Android 16 trong hệ sinh thái Android khi kết nối với màn hình ngoài. 
Tính năng này hiện được phát hành 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 trên nhiều kiểu dáng.

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

Khi điện thoại Android hoặc thiết bị gập được hỗ trợ kết nối với màn hình ngoài, một phiên mới trên máy tính 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 thấy 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 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, hiển thị một phiên 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ợ 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àn hình ngoài, phiên máy tính sẽ được mở rộng trên cả hai màn hình, mang đến không gian làm việc rộng 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ử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 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 cửa sổ, hoạt động 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 trên màn hình được kết nối. Chúng tôi cũng đưa vào các biện 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 nguyên tắc thiết kế thích ứng, thì ứng dụng đó sẽ tự động có giao diện dành cho 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 giao diện chỉ có cảm ứng, thì đây là lúc bạn cần hiện đại hoá ứng dụng.

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

• Đừng giả định đối tượng Display là không đổi: Đối tượng Display 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 bên 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 chỉ số hiển thị một cách linh động thay vì lưu chúng vào bộ nhớ đệm.
• Xử lý 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ị. Hãy đả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 hữu 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 theo mật độ cụ thể 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ợ đúng cách các 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ư 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ợ 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 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 điểm lại những thông tin cập nhật mới nhất về các thư viện thích ứng chính 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

Nội dung cập nhật quan trọng nhất trong Jetpack WindowManager 1.5.0 là việc bổ sung hai 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 điểm ngắt khung nhìn chính thức và được cố định giúp bạn thiết kế và phát triển 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 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ừ 1200dp đến 1600dp
• Rất lớn: Đối với chiều rộng ≥1600dp

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 nền tảng rất lớn, việc chỉ 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 tốt nhất cho người dùng. Ví dụ: ứng dụng email có thể hiển thị thoải mái hai 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ị 3 hoặc thậm chí 4 ngăn một cách tinh tế, 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 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 bổ sung mới nhất cho 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 đến 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 quản lý luồng giao diện người dùng của ứng dụng này 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ị các cảnh khác nhau cho nhiều kích thước màn hình và cấu hình thiết bị.

Đối với 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 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ị ba 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 thị ba 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 các mục đó hỗ trợ hiển thị trong cảnh ba 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, thì 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 trong một ngăn duy nhất 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 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 thành phần điều hướng ba 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 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à bố cục ngăn hỗ trợ. Các bố cục này sẽ tự động điều chỉnh theo cấu hình cửa sổ dựa trên lớp kích thước cửa sổ hoặc tư thế thiết bị. 

Tin vui là thư viện đã đượ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 sẽ 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 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àn hình ngoài để bắt đầu thử nghiệm ứng dụng ngay hôm nay! 

Hãy tìm hiểu tài liệu mới cập nhật về 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 rất 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, 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ọ. Những điểm cải tiến đối với tính năng hỗ trợ màn hình kết nối là một bước tiến khác 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 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.