Samsung Galaxy XR jest już dostępny z Androidem XR! Ten post na blogu jest częścią tygodnia poświęconego Androidowi XR, w ramach którego udostępniamy materiały – posty na blogu, filmy, przykładowy kod i inne – które pomogą Ci poznać Androida XR, tworzyć aplikacje na tę platformę i przygotowywać do niej swoje aplikacje.

Wraz z premierą Samsunga Galaxy XR pojawiło się pierwsze urządzenie z systemem Android XR. Użytkownicy mogą teraz korzystać z wielu ulubionych aplikacji ze Sklepu Play w zupełnie nowym wymiarze – trójwymiarowym.

Trzeci wymiar jest przestronny i zapewnia dużo miejsca na aplikacje. Zacznij już dziś, korzystając z narzędzi, które najlepiej sprawdzają się w przypadku Twojej aplikacji. Możesz na przykład użyć pakietu Jetpack XR SDK, aby tworzyć wciągające środowiska XR za pomocą nowoczesnych narzędzi do tworzenia aplikacji na Androida, takich jak Kotlin i Compose.

W tym poście na blogu opowiemy o naszej przygodzie z przenoszeniem do XR uroku naszej ukochanej aplikacji Androidify. Omówimy też podstawy, które pozwolą Ci przenieść Twoje aplikacje do XR.

Prezentacja Androidify

Androidify to aplikacja open source, która umożliwia tworzenie robotów Androida przy użyciu najnowszych technologii, takich jak Gemini, CameraX, Navigation 3 i oczywiście Jetpack Compose. Aplikacja Androidify została pierwotnie zaprojektowana tak, aby świetnie wyglądać na telefonach, urządzeniach składanych i tabletach dzięki tworzeniu układów adaptacyjnych.

Androidify świetnie wygląda na różnych urządzeniach

Kluczowym elementem układów adaptacyjnych są komponenty wielokrotnego użytku. Jetpack Compose pomaga tworzyć małe komponenty interfejsu, które można rozmieszczać na różne sposoby, aby zapewnić intuicyjną obsługę niezależnie od rodzaju urządzenia. Androidify jest zgodny z Androidem XR bez konieczności wprowadzania jakichkolwiek zmian w aplikacji.

Androidify dostosowuje się do XR, korzystając z elastycznego układu na dużym ekranie bez konieczności wprowadzania zmian w kodzie

Aplikacje, które nie są specjalnie dostosowane do Androida XR, mogą być używane w trybie wielozadaniowości w oknie o odpowiednim rozmiarze i działać podobnie jak na dużym ekranie. Dlatego Androidify jest już w pełni funkcjonalny na Androidzie XR i nie wymaga dodatkowej pracy. Nie chcieliśmy jednak na tym poprzestać, więc postanowiliśmy pójść o krok dalej i stworzyć aplikację z funkcjami XR, aby zapewnić użytkownikom XR jeszcze lepsze wrażenia.

Orientacja w XR

Omówmy podstawowe pojęcia związane z Androidem XR, zaczynając od 2 trybów, w których można uruchamiać aplikacje: przestrzeni domowej i pełnej przestrzeni.

W Przestrzeni domowej można uruchamiać wiele aplikacji obok siebie, dzięki czemu użytkownicy mogą wykonywać wiele zadań w różnych oknach. Pod tym względem przypomina to tryb okien na pulpicie na dużym ekranie urządzenia z Androidem, ale w przestrzeni wirtualnej.

W pełnej przestrzeni aplikacja nie ma granic i może korzystać z pełnych funkcji przestrzennych Androida XR, takich jak przestrzenny interfejs i sterowanie wirtualnym środowiskiem.

Może się wydawać, że warto, aby aplikacja działała tylko w trybie pełnego ekranu, ale użytkownicy mogą chcieć wykonywać w niej wiele zadań jednocześnie, więc obsługa obu trybów zapewnia lepsze wrażenia.

Projektowanie w nowym wymiarze Androidify

Świetna aplikacja zaczyna się od doskonałego projektu. Ivy Knight, starsza specjalistka ds. projektowania w zespole Android DevRel, podjęła się zadania stworzenia nowego projektu dla XR na podstawie istniejących projektów Androidify. Zaczynaj, Ivy!

Projektowanie z myślą o XR wymagało unikalnego podejścia, ale miało też wiele wspólnego z projektowaniem mobilnym. Zaczęliśmy od zastanowienia się nad ograniczeniami: jak uporządkować i zgrupować elementy interfejsu w przestrzeni podrzędnej, wyraźnie pokazując granice lub subtelnie je sugerując. Nauczyliśmy się też korzystać z różnych rozmiarów przestrzennych elementów interfejsu, które mają dostosowywać się do użytkownika i poruszać w odpowiedzi na jego działania. Podobnie jak w przypadku Androidify twórz adaptacyjne układy, aby podzielić układy na części dla przestrzennego interfejsu.

Rozpoczynanie projektowania od przestrzeni domowej

Na szczęście Android XR umożliwia rozpoczęcie pracy z aplikacją w jej obecnej postaci w przestrzeni domowej, więc mogliśmy przejść do rozszerzonych projektów XR, dodając tylko pasek narzędzi okna i przycisk przejścia do pełnej przestrzeni.

Wzięliśmy też pod uwagę możliwe funkcje sprzętowe i sposób, w jaki użytkownik będzie z nich korzystać. Układy mobilne w Androidify dostosowują się do różnych pozycji, rozmiarów klas i liczby aparatów, aby zapewnić więcej opcji zdjęć. Zgodnie z tym modelem musieliśmy dostosować układ aparatu również w przypadku gogli. Musieliśmy też dostosować tekst, aby uwzględnić bliskość interfejsu do użytkownika.

Projektowanie z myślą o większej zmianie na Full Space

Największą zmianą była pełna przestrzeń, która dała nam najwięcej swobody w dostosowywaniu projektu. 

Androidify używa wizualnego ograniczenia, czyli paneli, do grupowania funkcji z tłem i konturem, np. panelu „Zrób lub wybierz zdjęcie”. Użyliśmy też komponentów takich jak górny pasek aplikacji, aby stworzyć naturalne ograniczenie, otaczając inne panele. Wreszcie, wewnętrzne ograniczenie jest sugerowane przez bliskość niektórych elementów do innych, takich jak dolny przycisk „Rozpocznij transformację”, który znajduje się w pobliżu panelu „Wybierz kolor bota”.

Panele przestrzenne ułatwiające rozdzielanie. Aby zdecydować, jak dostosować projekty mobilne do paneli przestrzennych, spróbuj usuwać powierzchnie, zaczynając od tej, która jest najbardziej z tyłu, a potem przesuwając się do przodu. Sprawdź, ile tła możesz usunąć i co pozostanie. Po tym ćwiczeniu w przypadku Androidify pozostał duży zielony zygzak. Falista linia nie tylko stanowiła element marki i tło, ale też była punktem odniesienia dla treści w przestrzeni 3D.

Ustalenie tego punktu odniesienia ułatwiło wyobrażenie sobie, jak elementy mogą się wokół niego poruszać i jak możemy wykorzystać bliskość, aby wyodrębnić i przetłumaczyć resztę interfejsu.

Inne wskazówki dotyczące projektowania, które pomogą Ci dostosować aplikację do przestrzeni

• Pozwól, aby elementy nie były zamknięte w kontenerach: wyodrębnij komponenty i daj im trochę prawdziwej (przestrzennej) przestrzeni. Najwyższy czas dać tym elementom interfejsu trochę przestrzeni.
• Usuń powierzchnie: ukryj tło i sprawdź, jak wpłynie to na Twoje projekty.
• Motywuj ruchem: jak wykorzystujesz przejścia w swojej aplikacji? Wyobraź sobie, że ta postać przenosi Twoją aplikację do wirtualnej rzeczywistości.
• Wybierz punkt zakotwiczenia: nie pozwól użytkownikom zgubić się w przestrzeni. zawierać element, który pomaga zbierać lub uziemiać interfejs.

Więcej informacji o wzorcach projektowania interfejsu XR znajdziesz w artykule Projektowanie na Androida XR na stronie Android Developers.

Podstawy interfejsu przestrzennego

Omówiliśmy już doświadczenia Ivy związane z dostosowywaniem sposobu myślenia podczas projektowania Androidify na platformę XR. Teraz porozmawiajmy o tworzeniu przestrzennego interfejsu. Tworzenie przestrzennego interfejsu użytkownika za pomocą pakietu Jetpack XR SDK powinno być znajome, jeśli masz doświadczenie w pracy z nowoczesnymi narzędziami i bibliotekami Androida. Znajdziesz tu znane Ci już koncepcje, takie jak tworzenie układów za pomocą Compose. Układy przestrzenne są bardzo podobne do układów 2D, które wykorzystują wiersze, kolumny i elementy odstępu:

Te elementy są ułożone w SpatialRows i SpatialColumns

Elementy przestrzenne widoczne w tym miejscu to komponenty SpatialPanel, które umożliwiają wyświetlanie treści 2D, takich jak tekst, przyciski i filmy.

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

SpatialPanel to komponent podprzestrzeni. Komponenty Subspace muszą znajdować się w przestrzeni Subspace i są modyfikowane przez obiekty SubspaceModifier. Przestrzenie podrzędne można umieszczać w dowolnym miejscu w hierarchii interfejsu aplikacji. Mogą one zawierać tylko komponenty kompozycyjne Subspace. Obiekty SubspaceModifier są bardzo podobne do obiektów modyfikatorów: kontrolują parametry takie jak rozmiar i położenie.

Orbiter  można dołączyć do SpatialPanel i przesuwać wraz z treściami, do których jest dołączony. Często służą do udostępniania kontekstowych elementów sterujących dotyczących treści, do których są dołączone, dzięki czemu to treść jest najważniejsza. Można je umieszczać po dowolnej z 4 stron treści w konfigurowalnej odległości.

Istnieje znacznie więcej przestrzennych elementów interfejsu, ale te są głównymi, których użyliśmy do tworzenia przestrzennych układów w Androidify.

Pierwsze kroki w tworzeniu aplikacji na XR

Zacznijmy od konfiguracji projektu. Dodaliśmy zależność Jetpack XR Compose, którą znajdziesz na stronie zależności Jetpack XR.

Dodaliśmy kod przycisku, który przenosi użytkownika do pełnej przestrzeni, zaczynając od wykrycia możliwości wykonania tej czynności:

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

Następnie utworzyliśmy nowy komponent przycisku, który wykorzystuje ikonę rozwijania treści w naszych dotychczasowych układach i ma działanie 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"),
       )
   }
}

Teraz kliknięcie tego przycisku powoduje wyświetlenie układu średniego w pełnej przestrzeni. Możemy sprawdzić możliwości przestrzenne i określić, czy można wyświetlić interfejs przestrzenny. W takim przypadku pokażemy nowy układ przestrzenny:

@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(...)
   }
}

Wdrażanie projektu ekranu głównego

Wróćmy do projektu przestrzennego ekranu głównego w pełnej przestrzeni, aby zrozumieć, jak został on zaimplementowany.

Wyróżniliśmy tu 2 elementy SpatialPanel: jeden panel, w którym znajduje się karta wideo po prawej stronie, i jeden, który zawiera główny interfejs. Na górze znajduje się Orbiter. Zacznijmy od panelu odtwarzacza wideo:

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

Po prostu ponownie użyliśmy komponentu 2D VideoPlayer ze zwykłych układów w SpatialPanel bez wprowadzania dodatkowych zmian. Wygląda to tak:

W przypadku głównego panelu treści zastosowaliśmy tę samą zasadę: ponownie wykorzystaliśmy treści z panelu średniej wielkości w SpatialPanel.

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

Nadaliśmy temu panelowi właściwość ResizePolicy, która dodaje do niego uchwyty w pobliżu krawędzi, umożliwiające użytkownikowi zmianę rozmiaru panelu. Ma też właściwość MovePolicy, która umożliwia użytkownikowi przeciąganie go.

Umieszczenie ich w tej samej przestrzeni podrzędnej sprawia, że są od siebie niezależne, dlatego panel VideoPlayer jest elementem podrzędnym panelu głównego. Dzięki temu panel VideoPlayer przesuwa się, gdy panel głównej treści jest przeciągany w relacji nadrzędny-podrzędny.

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

W ten sposób powstał pierwszy ekran.

Przechodzenie do innych ekranów

Krótko omówię też inne ekrany, zwracając uwagę na konkretne kwestie, które wzięliśmy pod uwagę w przypadku każdego z nich.

Użyliśmy tu komponentów kompozycyjnych SpatialRow i SpatialColumn, aby utworzyć układ pasujący do zalecanej przestrzeni wyświetlania, ponownie wykorzystując komponenty z układu średniego.

Ekran wyników w pełnej przestrzeni: bot wygenerowany na podstawie promptu: czerwona czapka z daszkiem, okulary przeciwsłoneczne typu aviator, jasnoniebieski T-shirt, czerwono-białe szorty w kratkę, zielone klapki i rakieta tenisowa.

Na ekranie wyników wyświetlają się bezpłatne wyceny z efektem wtapiania, dzięki czemu znikają przy krawędziach ekranu. Podczas wyświetlania użytego wejścia stosuje też rzeczywiste przejście 3D, obracając obraz w przestrzeni.

Publikowanie w Sklepie Google Play

Gdy aplikacja była już gotowa do działania na urządzeniach XR z układami przestrzennymi, opublikowaliśmy ją w Sklepie Play. W pliku AndroidManifest.xml aplikacji wprowadziliśmy jeszcze jedną ważną zmianę:

<!-- 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" />

Dzięki temu Sklep Play będzie wiedzieć, że ta aplikacja ma funkcje wyróżniające ją na tle innych aplikacji XR, i wyświetli plakietkę informującą użytkowników, że aplikacja została stworzona z myślą o XR:

Podczas przesyłania wersji nie musimy wykonywać żadnych specjalnych czynności, aby udostępnić ją na XR: ta sama aplikacja jest dystrybuowana w normalny sposób do użytkowników na ścieżce mobilnej i do użytkowników na urządzeniu z XR. Możesz jednak dodać zrzuty ekranu aplikacji w XR lub przesłać wciągającą prezentację aplikacji za pomocą pliku wideo przestrzennego. Na urządzeniach z Androidem XR Sklep Play automatycznie wyświetla tę zawartość jako wciągającą podglądową wersję 3D, dzięki czemu użytkownicy mogą poznać głębię i skalę Twoich treści, zanim zainstalują aplikację.

Zacznij tworzyć własne doświadczenia już dziś

Androidify to świetny przykład tego, jak dodać efekty przestrzenne do istniejącej aplikacji 2D Jetpack Compose. Dziś pokazaliśmy cały proces tworzenia przestrzennego interfejsu użytkownika dla Androidify – od projektu po kod i publikację. Zmodyfikowaliśmy dotychczasowe projekty, aby działały w przestrzeni, użyliśmy komponentów kompozycyjnych SpatialPanel i Orbiter do tworzenia układów przestrzennych, które wyświetlają się, gdy użytkownik wchodzi w pełną przestrzeń, a na koniec opublikowaliśmy nową wersję aplikacji w Sklepie Play.

Mamy nadzieję, że ten post pomógł Ci zrozumieć, jak możesz udostępniać własne aplikacje na Androidzie XR. Oto kilka dodatkowych linków, które mogą Ci pomóc:

• Sprawdź kod źródłowy Androidify i utwórz własnego bota za pomocą Androidify w Google Play.
• Zapoznaj się z dokumentacją dla deweloperów i dowiedz się więcej o Jetpack Compose XR.
• Pobierz emulator Androida XR i wypróbuj własną aplikację.