Samsung Galaxy XR đã ra mắt, chạy Android XR! Bài đăng trên blog này là một phần của Tuần giới thiệu về Android XR, nơi chúng tôi cung cấp các tài nguyên (bài đăng trên blog, video, mã mẫu và nhiều tài nguyên khác) được thiết kế để giúp bạn tìm hiểu, xây dựng và chuẩn bị ứng dụng cho Android XR.

Với việc ra mắt Samsung Galaxy XR , thiết bị đầu tiên chạy Android XR đã chính thức ra mắt. Giờ đây, mọi người có thể thưởng thức nhiều ứng dụng yêu thích của mình trên Cửa hàng Play ở một chiều không gian hoàn toàn mới: chiều thứ ba!

Chiều thứ ba là một chiều không gian rộng rãi, có nhiều chỗ cho ứng dụng của bạn. Hãy bắt đầu ngay hôm nay bằng cách sử dụng bất kỳ công cụ nào phù hợp với ứng dụng của bạn. Ví dụ: bạn có thể sử dụng SDK Jetpack XR để tạo trải nghiệm XR sống động bằng các công cụ Phát triển Android hiện đại như Kotlin và Compose.

Trong bài đăng trên blog này, chúng tôi sẽ kể cho bạn nghe về hành trình của mình khi đưa ứng dụng Androidify yêu thích lên XR. Chúng tôi cũng sẽ đề cập đến những kiến thức cơ bản cần thiết để đưa ứng dụng của bạn lên XR.

Tham quan Androidify

Androidify là một ứng dụng nguồn mở cho phép bạn tạo bot Android bằng một số công nghệ mới nhất như Gemini, CameraX, Navigation 3 và tất nhiên là Jetpack Compose. Androidify ban đầu được thiết kế để hiển thị đẹp mắt trên điện thoại, thiết bị có thể gập lại và máy tính bảng bằng cách tạo bố cục thích ứng.

Androidify hiển thị đẹp mắt trên nhiều kiểu dáng

Một trụ cột chính của bố cục thích ứng là các thành phần kết hợp có thể sử dụng lại. Jetpack Compose giúp bạn tạo các thành phần giao diện người dùng có kích thước nhỏ có thể được bố trí theo nhiều cách để tạo trải nghiệm người dùng trực quan, bất kể người dùng đang sử dụng loại thiết bị nào. Trên thực tế, Androidify tương thích với Android XR mà không cần sửa đổi ứng dụng!

Androidify thích ứng với XR bằng bố cục phản hồi màn hình lớn mà không cần thay đổi mã

Các ứng dụng không có cách xử lý đặc biệt cho Android XR có thể được chạy đa nhiệm trong một cửa sổ có kích thước phù hợp và hoạt động giống như trên màn hình lớn. Do đó, Androidify đã có đầy đủ tính năng trên Android XR mà không cần thêm bất kỳ công việc nào! Tuy nhiên, chúng tôi không muốn dừng lại ở đó, vì vậy, chúng tôi quyết định nỗ lực hơn nữa và tạo một ứng dụng dành riêng cho XR để mang đến trải nghiệm thú vị cho người dùng XR.

Định hướng bản thân trong XR

Hãy cùng xem qua các khái niệm cơ bản chính cho Android XR, bắt đầu với 2 chế độ mà ứng dụng có thể chạy: Không gian chính và Toàn bộ không gian.

Trong Không gian chính, nhiều ứng dụng có thể chạy song song để người dùng có thể làm nhiều việc trên nhiều cửa sổ. Theo đó, chế độ này giống như chế độ cửa sổ kiểu máy tính trên thiết bị Android có màn hình lớn, nhưng ở không gian ảo!

Trong Toàn bộ không gian, ứng dụng không có ranh giới không gian và có thể tận dụng đầy đủ các tính năng không gian của Android XR, chẳng hạn như giao diện người dùng không gian và kiểm soát môi trường ảo.

Mặc dù có vẻ hấp dẫn khi chỉ chạy ứng dụng ở chế độ Toàn bộ không gian, nhưng người dùng có thể muốn chạy đa nhiệm với ứng dụng của bạn. Vì vậy, việc hỗ trợ cả hai chế độ sẽ giúp cải thiện trải nghiệm người dùng.

Thiết kế cho chiều không gian mới của Androidify

Một ứng dụng thú vị bắt đầu từ một thiết kế tuyệt vời. Ivy Knight, Chuyên gia thiết kế cấp cao về Android DevRel, đã đảm nhận nhiệm vụ lấy các thiết kế hiện có cho Androidify và đưa ra một thiết kế mới cho XR. Mời Ivy!

Việc thiết kế cho XR đòi hỏi một phương pháp độc đáo, nhưng thực tế vẫn có nhiều điểm chung với thiết kế cho thiết bị di động. Chúng tôi bắt đầu bằng cách suy nghĩ về việc chứa: cách sắp xếp và nhóm các phần tử giao diện người dùng trong không gian phụ, bằng cách hiển thị rõ ràng ranh giới hoặc ngụ ý một cách tinh tế. Chúng tôi cũng học cách chấp nhận tất cả các kích thước khác nhau của các phần tử giao diện người dùng không gian, được dùng để điều chỉnh và di chuyển theo phản hồi của người dùng. Giống như với Androidify, hãy tạo bằng bố cục thích ứng, để bạn có thể chia bố cục thành các phần cho giao diện người dùng không gian.

Bắt đầu thiết kế với Không gian chính

May mắn là Android XR cho phép bạn bắt đầu với ứng dụng như hiện tại cho Không gian chính, vì vậy, chúng tôi có thể chuyển sang các thiết kế XR mở rộng bằng cách chỉ thêm một thanh công cụ cửa sổ và nút chuyển đổi Toàn bộ không gian.

Chúng tôi cũng xem xét các tính năng phần cứng có thể có và cách người dùng sẽ tương tác với các tính năng đó. Bố cục dành cho thiết bị di động của Androidify thích ứng với nhiều tư thế, kích thước lớp và số lượng máy ảnh để cung cấp thêm lựa chọn chụp ảnh. Theo mô hình này, chúng tôi cũng phải điều chỉnh bố cục máy ảnh cho các thiết bị kính. Chúng tôi cũng cần điều chỉnh văn bản để phù hợp với khoảng cách của giao diện người dùng với người dùng.

Thiết kế cho sự thay đổi lớn hơn sang Toàn bộ không gian

Toàn bộ không gian là sự thay đổi lớn nhất, nhưng lại mang đến cho chúng tôi không gian sáng tạo nhất để điều chỉnh thiết kế. 

Androidify sử dụng tính năng chứa trực quan hoặc ngăn để nhóm các tính năng có nền và đường viền, chẳng hạn như ngăn "Chụp hoặc chọn ảnh". Chúng tôi cũng sử dụng các thành phần như thanh ứng dụng trên cùng để tạo tính năng chứa tự nhiên bằng cách đóng khung các ngăn khác. Cuối cùng, tính năng chứa vốn có được gợi ý bởi khoảng cách của một số phần tử với các phần tử khác, chẳng hạn như nút dưới cùng "Bắt đầu chuyển đổi", nằm gần ngăn "Chọn màu bot của tôi".

Bảng điều khiển không gian giúp dễ dàng tách biệt. Để quyết định cách điều chỉnh thiết kế cho thiết bị di động cho bảng điều khiển không gian, hãy thử xoá các nền tảng bắt đầu từ nền tảng ở xa nhất rồi di chuyển về phía trước. Xem bạn có thể xoá bao nhiêu nền và những gì còn lại. Sau khi chúng tôi thực hiện bài tập này cho Androidify, những gì còn lại là hình nguệch ngoạc màu xanh lục lớn của Android. Hình nguệch ngoạc không chỉ đóng vai trò là khoảnh khắc thương hiệu và nền, mà còn là điểm neo cho nội dung trong không gian 3D.

Việc thiết lập điểm neo này giúp chúng tôi dễ dàng hình dung cách các phần tử có thể di chuyển xung quanh điểm neo đó và cách chúng tôi có thể sử dụng khoảng cách để tách biệt và chuyển đổi phần còn lại của trải nghiệm người dùng.

Các mẹo thiết kế khác giúp ứng dụng của bạn có không gian

• Để mọi thứ không bị chứa: Tách biệt các thành phần và cung cấp cho chúng một không gian thực (không gian). Đã đến lúc cung cấp cho các phần tử giao diện người dùng đó một không gian để thở.
• Xoá nền tảng: Ẩn nền, xem điều đó ảnh hưởng đến thiết kế của bạn như thế nào.
• Tạo động lực bằng chuyển động: Bạn đang sử dụng hiệu ứng chuyển đổi như thế nào trong ứng dụng của mình? Sử dụng nhân vật đó để hình dung ứng dụng của bạn tách biệt thành VR.
• Chọn một điểm neo: Đừng để người dùng bị lạc trong không gian. Có một phần tử giúp thu thập hoặc đặt nền cho giao diện người dùng.

Để biết thêm về các mẫu thiết kế giao diện người dùng XR, hãy xem bài viết Thiết kế cho Android XR trên trang web Nhà phát triển Android.

Kiến thức cơ bản về giao diện người dùng không gian

Giờ đây, chúng ta đã đề cập đến trải nghiệm của Ivy khi điều chỉnh tư duy trong khi thiết kế Androidify cho XR, hãy nói về việc phát triển giao diện người dùng không gian. Việc phát triển giao diện người dùng không gian bằng SDK Jetpack XR sẽ có vẻ quen thuộc nếu bạn đã quen làm việc với các công cụ và thư viện Android hiện đại. Bạn sẽ tìm thấy các khái niệm mà bạn đã quen thuộc, chẳng hạn như tạo bố cục bằng Compose. Trên thực tế, bố cục không gian rất giống với bố cục 2D sử dụng hàng, cột và khoảng cách:

Các phần tử này được sắp xếp trong SpatialRows và SpatialColumns

Các phần tử không gian được hiển thị ở đây là SpatialPanel thành phần kết hợp, cho phép bạn hiển thị nội dung 2D như văn bản, nút và video.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

SpatialPanel là một thành phần kết hợp không gian phụ. Các thành phần kết hợp không gian phụ phải được chứa trong một Không gian phụ và được sửa đổi bởi các đối tượng SubspaceModifier. Không gian phụ có thể được đặt ở bất kỳ đâu trong hệ phân cấp giao diện người dùng của ứng dụng và chỉ có thể chứa các thành phần kết hợp Không gian phụ.Các đối tượng SubspaceModifier cũng rất giống với các đối tượng Modifier: chúng kiểm soát các tham số như kích thước và vị trí.

Một Orbiter có thể được đính kèm vào một SpatialPanel và di chuyển cùng với nội dung mà nó được đính kèm. Chúng thường được dùng để cung cấp các chế độ điều khiển theo ngữ cảnh về nội dung mà chúng được đính kèm, giúp nội dung trở thành tiêu điểm chính. Chúng có thể được đặt ở bất kỳ vị trí nào trong 4 cạnh của nội dung, ở khoảng cách có thể định cấu hình.

Có nhiều phần tử giao diện người dùng không gian hơn, nhưng đây là những phần tử chính mà chúng tôi đã sử dụng để tạo bố cục không gian cho Androidify.

Bắt đầu phát triển XR

Hãy bắt đầu với việc thiết lập dự án. Chúng tôi đã thêm phần phụ thuộc Jetpack XR Compose mà bạn có thể tìm thấy trên trang phần phụ thuộc Jetpack XR.

Chúng tôi đã thêm mã cho một nút chuyển đổi người dùng sang Toàn bộ không gian, bắt đầu bằng việc phát hiện khả năng thực hiện việc này:

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

Sau đó, chúng tôi đã tạo một thành phần nút mới sử dụng biểu tượng Mở rộng nội dung cho các bố cục hiện có và cung cấp cho nút này hành vi onClick:

@Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

Giờ đây, việc nhấp vào nút đó chỉ hiển thị bố cục Trung bình trong Toàn bộ không gian. Chúng tôi có thể kiểm tra các chức năng không gian và xác định xem có thể hiển thị giao diện người dùng không gian hay không. Trong trường hợp đó, chúng tôi sẽ hiển thị bố cục không gian mới:

@Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

Triển khai thiết kế cho Màn hình chính

Hãy quay lại thiết kế không gian cho Màn hình chính trong Toàn bộ không gian để hiểu cách triển khai thiết kế đó.

Chúng tôi đã xác định 2 phần tử SpatialPanel ở đây: một bảng điều khiển chứa thẻ video ở bên phải và một bảng điều khiển chứa giao diện người dùng chính. Cuối cùng, có một Orbiter được đính kèm vào đầu. Hãy bắt đầu với bảng điều khiển trình phát video:

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

Chúng tôi chỉ cần sử dụng lại thành phần VideoPlayer 2D từ các bố cục thông thường vào một SpatialPanel mà không cần thay đổi gì thêm! Đây là giao diện độc lập:

Bảng điều khiển nội dung chính cũng tương tự: chúng tôi đã sử dụng lại nội dung bảng điều khiển trung bình trong một SpatialPanel.

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

Chúng tôi đã cung cấp cho bảng điều khiển này một ResizePolicy, cung cấp cho bảng điều khiển một số ô điều khiển gần các cạnh cho phép người dùng đổi kích thước bảng điều khiển. Bảng điều khiển này cũng có một MovePolicy, cho phép người dùng kéo bảng điều khiển này xung quanh.

Việc đặt các bảng điều khiển này trong cùng một Không gian phụ sẽ khiến chúng độc lập với nhau, vì vậy, chúng tôi đã tạo bảng điều khiển VideoPlayer thành một phần tử con của bảng điều khiển nội dung chính. Điều này khiến bảng điều khiển VideoPlayer di chuyển khi bảng điều khiển nội dung chính được kéo thông qua mối quan hệ mẹ-con.

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

Đó là cách chúng tôi thực hiện màn hình đầu tiên!

Chuyển sang các màn hình khác

Tôi cũng sẽ trình bày ngắn gọn về một số màn hình khác, nêu bật những điểm cần cân nhắc cụ thể cho từng màn hình.

Ở đây, chúng tôi đã sử dụng các thành phần kết hợp SpatialRow và SpatialColumn để tạo một bố cục phù hợp với không gian xem được đề xuất, đồng thời sử dụng lại các thành phần từ bố cục Trung bình.

Màn hình kết quả trong Toàn bộ không gian: Một bot được tạo bằng một câu lệnh: mũ bóng chày màu đỏ, kính râm phi công, áo phông màu xanh nhạt, quần soóc kẻ sọc đỏ và trắng, dép xỏ ngón màu xanh lục và đang cầm một cây vợt tennis.

Màn hình kết quả hiển thị các trích dẫn bổ sung bằng hiệu ứng làm mờ, cho phép các trích dẫn này mờ dần ở gần các cạnh của màn hình. Màn hình này cũng sử dụng hiệu ứng chuyển đổi 3D thực tế khi xem dữ liệu đầu vào đã sử dụng, lật hình ảnh trong không gian.

Xuất bản lên Cửa hàng Google Play

Giờ đây, ứng dụng đã sẵn sàng cho XR với các bố cục không gian, chúng tôi đã phát hành ứng dụng này lên Cửa hàng Play. Có một thay đổi quan trọng cuối cùng mà chúng tôi đã thực hiện đối với tệp AndroidManifest.xml của ứng dụng:

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

Điều này cho phép Cửa hàng Play biết rằng ứng dụng này có các tính năng dành riêng cho XR, hiển thị một huy hiệu cho người dùng biết rằng ứng dụng được tạo ra với mục đích sử dụng XR:

Khi tải bản phát hành lên, chúng tôi không cần thực hiện bất kỳ bước đặc biệt nào để phát hành cho XR: ứng dụng tương tự được phân phối như bình thường cho người dùng trên kênh dành cho thiết bị di động cũng như cho người dùng trên thiết bị XR! Tuy nhiên, bạn có thể chọn thêm ảnh chụp màn hình dành riêng cho XR của ứng dụng hoặc thậm chí tải bản xem trước sống động của ứng dụng lên bằng một thành phần video không gian. Trên thiết bị Android XR, Cửa hàng Play sẽ tự động hiển thị thành phần này dưới dạng bản xem trước 3D sống động, cho phép người dùng trải nghiệm độ sâu và tỷ lệ của nội dung trước khi cài đặt ứng dụng.

Bắt đầu xây dựng trải nghiệm của riêng bạn ngay hôm nay

Androidify là một ví dụ tuyệt vời về cách không gian hoá một ứng dụng Jetpack Compose 2D hiện có. Hôm nay, chúng tôi đã trình bày toàn bộ quy trình phát triển giao diện người dùng không gian cho Androidify, từ thiết kế đến mã đến xuất bản. Chúng tôi đã sửa đổi các thiết kế hiện có để hoạt động với các mô hình không gian, sử dụng các thành phần kết hợp SpatialPanel và Orbiter để tạo bố cục không gian hiển thị khi người dùng chuyển sang Toàn bộ không gian và cuối cùng là phát hành phiên bản mới của ứng dụng lên Cửa hàng Play.

Chúng tôi hy vọng bài đăng trên blog này đã giúp bạn hiểu cách đưa ứng dụng của riêng mình lên Android XR! Dưới đây là một vài đường liên kết khác có thể giúp bạn:

• Xem mã nguồn cho Androidify và tạo bot của riêng bạn bằng Androidify trên Google Play.
• Bắt đầu với tài liệu dành cho nhà phát triển của chúng tôi và tìm hiểu thêm về Jetpack Compose cho XR.
• Tải trình mô phỏng Android XR xuống và dùng thử ứng dụng của riêng bạn!