Android XR destekli Samsung Galaxy XR ile tanışın. Bu blog yayını, Android XR Spotlight Week kapsamında yayınlanmaktadır. Bu hafta boyunca, uygulamalarınızı Android XR'ye hazırlamanıza, Android XR'de geliştirmenize ve Android XR hakkında bilgi edinmenize yardımcı olmak için tasarlanmış kaynaklar (blog yayınları, videolar, örnek kodlar ve daha fazlası) sunuyoruz.

Android XR tarafından desteklenen ilk cihaz olan Samsung Galaxy XR'ın piyasaya sürülmesiyle Android XR resmen kullanıma sunuldu. Kullanıcılar artık Play Store'daki birçok favori uygulamasını yepyeni bir boyutta, yani üçüncü boyutta kullanabilir.

Üçüncü boyut da geniş olup uygulamalarınız için bolca alan sunar. Uygulamanız için uygun olan araçları kullanarak bugün başlayın. Örneğin, Kotlin ve Compose gibi modern Android geliştirme araçlarını kullanarak sürükleyici XR deneyimleri oluşturmak için Jetpack XR SDK'yı kullanabilirsiniz.

Bu blog yayınında, sevilen Androidify uygulamamızın eğlenceli dünyasını XR'a taşıma yolculuğumuzdan bahsedecek ve uygulamalarınızı XR'a taşıma konusunda temel bilgileri vereceğiz.

Androidify turu

Androidify, Gemini, CameraX, Navigation 3 ve elbette Jetpack Compose gibi en yeni teknolojilerden bazılarını kullanarak Android botları oluşturmanıza olanak tanıyan açık kaynaklı bir uygulamadır. Androidify, başlangıçta uyarlanabilir düzenler oluşturarak telefonlarda, katlanabilir cihazlarda ve tabletlerde harika görünecek şekilde tasarlanmıştı.

Androidify, birden fazla form faktöründe harika görünüyor

Uyarlanabilir düzenlerin temel unsurlarından biri, yeniden kullanılabilir composable'lardır. Jetpack Compose, kullanıcının cihaz türü ne olursa olsun sezgisel kullanıcı deneyimleri oluşturmak için farklı şekillerde düzenlenebilen küçük kullanıcı arayüzü bileşenleri oluşturmanıza yardımcı olur. Hatta Androidify, uygulamada hiçbir değişiklik yapılmadan Android XR ile uyumludur.

Androidify, kod değişikliği yapmadan büyük ekranlara duyarlı düzenini kullanarak XR'ye uyum sağlar

Android XR için özel bir işleme sahip olmayan uygulamalar, uygun boyuttaki bir pencerede çoklu görev için kullanılabilir ve büyük bir ekrandaki gibi çalışır. Bu nedenle, Androidify Android XR'da ek bir çalışma yapılmasına gerek kalmadan tüm özellikleriyle kullanılabilir. Ancak bu noktada durmak istemedik. Bu nedenle, XR kullanıcılarımıza keyifli bir deneyim sunmak için XR'ye özel bir uygulama oluşturmaya karar verdik.

XR'da yönünüzü bulma

Android XR ile ilgili temel kavramları inceleyelim. Uygulamaların çalıştırılabileceği iki mod olan ana sayfa alanı ve tam ekran alanı ile başlayalım.

Ana Sayfa Alanı'nda birden fazla uygulama yan yana çalıştırılabilir. Böylece kullanıcılar farklı pencerelerde çoklu görev yapabilir. Bu anlamda, büyük ekranlı bir Android cihazda masaüstü pencereli görüntülemeye çok benzer ancak sanal alanda gerçekleşir.

Tam Ekran Alanı'nda uygulamanın alan sınırları yoktur ve Android XR'ın uzamsal kullanıcı arayüzü ve sanal ortamı kontrol etme gibi tüm uzamsal özelliklerinden yararlanabilir.

Uygulamanızı yalnızca Tam Ekran Alanı'nda çalıştırmak cazip görünse de kullanıcılarınız uygulamanızla çoklu görev yapmak isteyebilir. Bu nedenle, her ikisini de desteklemek daha iyi bir kullanıcı deneyimi sağlar.

Androidify'ın yeni boyutu için tasarım yapma

Keyifli bir uygulamanın ilk adımı harika bir tasarımdır. Android DevRel'de Kıdemli Tasarım Savunucusu olan Ivy Knight, Androidify'ın mevcut tasarımlarını alıp XR için yeni bir tasarım oluşturma görevini üstlendi. Söz sende, Ivy!

XR için tasarım yapmak benzersiz bir yaklaşım gerektiriyordu ancak mobil tasarımla da birçok ortak noktası vardı. Öncelikle kapsama alanını düşündük: Alt uzaydaki kullanıcı arayüzü öğelerimizi, sınırları net bir şekilde göstererek veya bunları ince bir şekilde ima ederek nasıl düzenleyip gruplandırabiliriz? Ayrıca, kullanıcının etkileşimine göre ayarlanıp hareket etmesi gereken çeşitli boyutlardaki uzamsal kullanıcı arayüzü öğelerini kullanmayı da öğrendik. Androidify'da yaptığımız gibi, uyarlanabilir düzenlerle geliştirme yapın. Böylece düzenlerinizi, uzamsal kullanıcı arayüzünüz için parçalara ayırabilirsiniz.

Tasarımı Ana Sayfa Alanı ile başlatma

Neyse ki Android XR, ana sayfa alanı için uygulamanızı olduğu gibi kullanmaya başlamanıza olanak tanıyor. Bu sayede, yalnızca bir pencere araç çubuğu ve tam ekran alanına geçiş düğmesi ekleyerek genişletilmiş XR tasarımlarına geçiş yapabildik.

Ayrıca olası donanım özelliklerini ve kullanıcının bunlarla nasıl etkileşim kuracağını da göz önünde bulundurduk. Androidify'ın mobil düzenleri, daha fazla fotoğraf seçeneği sunmak için çeşitli duruşlara, sınıf boyutlarına ve kamera sayısına uyum sağlar. Bu modeli temel alarak kamera düzenini başlık cihazlarına da uyarlamamız gerekti. Ayrıca, kullanıcı arayüzünün kullanıcıya yakınlığını hesaba katmak için metnin çalışmasıyla ilgili düzenlemeler yapmamız gerekiyordu.

Tam Ekran Alanı'na geçiş için tasarım yapma

En büyük değişiklik Tam Ekran Alanı'da yapıldı ancak bu değişiklik, tasarımımızı uyarlamak için bize en fazla yaratıcı alan sağladı. 

Androidify, "Fotoğraf çekin veya seçin" bölmesi gibi özellikleri arka plan ve ana hat ile gruplandırmak için görsel kapsama veya bölmeleri kullanır. Diğer panelleri çerçeveleyerek doğal bir kapsama alanı oluşturmak için üst uygulama çubuğu gibi bileşenleri de kullandık. Son olarak, belirli öğelerin diğer öğelere yakınlığı (ör. "Dönüşümü başlat" düğmesinin "Botumun rengini seçin" bölmesinin yanında olması) doğal kapsama olduğunu gösterir.

Kolay ayrım için uzamsal paneller. Mobil tasarımlarınızı uzamsal panellere nasıl uyarlayacağınıza karar vermek için en arkadaki yüzeyden başlayıp öne doğru ilerleyerek yüzeyleri kaldırmayı deneyin. Kaç arka planı kaldırabileceğinizi ve geriye ne kalacağını görün. Androidify için bu çalışmayı yaptıktan sonra geriye büyük yeşil Android karalaması kaldı. Eğri, yalnızca markalama anı ve arka plan olarak değil, aynı zamanda 3D alandaki içerik için bir tutturucu olarak da kullanıldı.

Bu sabiti oluşturmak, öğelerin etrafında nasıl hareket edebileceğini ve yakınlığı kullanarak kullanıcı deneyiminin geri kalanını nasıl geliştirebileceğimizi hayal etmeyi kolaylaştırdı.

Uygulamanızın uzamsal özellik kazanmasına yardımcı olacak diğer tasarım ipuçları

• Her şeyi bir arada tutmayın: Bileşenleri ayırın ve onlara biraz gerçek (uzamsal) alan tanıyın. Kullanıcı arayüzü öğelerine biraz nefes alma alanı tanıma zamanı.
• Yüzeyleri kaldırma: Arka planı gizleyerek tasarımlarınızda nasıl bir değişiklik olduğunu görün.
• Hareketle motive edin: Uygulamanızda geçişleri nasıl kullanıyorsunuz? Uygulamanızın VR'a geçiş yaptığını hayal etmek için bu karakteri kullanın.
• Bir bağlantı noktası seçin: Kullanıcılarınızın uzayda kaybolmasını önleyin. Kullanıcı arayüzünü toplamaya veya temellendirmeye yardımcı olan bir öğe içermelidir.

XR kullanıcı arayüzü tasarım kalıpları hakkında daha fazla bilgi için Android Developers'da Android XR için tasarım başlıklı makaleyi inceleyin.

Uzamsal kullanıcı arayüzüyle ilgili temel bilgiler

Ivy'nin Androidify'ı XR için tasarlarken zihniyetini uyarlama deneyiminden bahsettik. Şimdi de uzamsal kullanıcı arayüzü geliştirme konusuna geçelim. Modern Android araçları ve kitaplıklarıyla çalışmaya alışkınsanız Jetpack XR SDK ile uzamsal kullanıcı arayüzü geliştirme süreci size tanıdık gelecektir. Compose ile düzen oluşturma gibi, zaten bildiğiniz kavramları bulabilirsiniz. Aslında, mekansal düzenler satır, sütun ve ayırıcı kullanılarak oluşturulan 2D düzenlere çok benzer:

Bu öğeler SpatialRows ve SpatialColumns şeklinde düzenlenir.

Burada gösterilen uzamsal öğeler, metin, düğme ve video gibi 2D içerikleri görüntülemenize olanak tanıyan SpatialPanel composable'larıdır.

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

SpatialPanel, subspace composable'dır. Subspace composable'ları bir Subspace içinde yer almalı ve SubspaceModifier nesneleri tarafından değiştirilmelidir. Alt alanlar, uygulamanızın kullanıcı arayüzü hiyerarşisinde herhangi bir yere yerleştirilebilir ve yalnızca alt alan composable'larını içerebilir. SubspaceModifier nesneleri de Modifier nesnelerine çok benzer. Boyutlandırma ve konumlandırma gibi parametreleri kontrol ederler.

Orbiter , SpatialPanel birimine eklenebilir ve eklendiği içerikle birlikte taşınabilir. Genellikle, eklendikleri içerikle ilgili bağlamsal kontroller sağlamak için kullanılırlar ve içeriğe öncelik verirler. İçeriğin dört tarafının herhangi birine, yapılandırılabilir bir mesafede yerleştirilebilirler.

Çok daha fazla mekansal kullanıcı arayüzü öğesi olsa da Androidify için mekansal düzenler oluştururken kullandığımız başlıca öğeler bunlardır.

XR geliştirmeye başlama

Proje kurulumuyla başlayalım. Jetpack XR bağımlılıkları sayfasında bulabileceğiniz Jetpack XR Compose bağımlılığını ekledik.

Kullanıcıyı Tam Ekran Alanı'na geçiren bir düğme için kod ekledik. Bu kod, öncelikle bu işlemin yapılabilme özelliğini algılar:

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

Ardından, mevcut düzenlerimize İçeriği Genişlet simgesini kullanan yeni bir düğme bileşeni ekledik ve bu bileşene bir onClick davranışı atadık:

  @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"),
       )
   }
}

Artık bu düğmeyi tıkladığınızda yalnızca Tam Ekran Alanı'nda Orta düzen gösteriliyor. Uzamsal özellikleri kontrol edebilir ve uzamsal kullanıcı arayüzünün görüntülenip görüntülenemeyeceğini belirleyebiliriz. Bu durumda, bunun yerine yeni uzamsal düzenimizi gösteririz:

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

Ana ekran için tasarımı uygulama

Nasıl uygulandığını anlamak için Tam Ekran Alanı'ndaki ana ekranın uzamsal tasarımına geri dönelim.

Burada iki SpatialPanel öğesi olduğunu belirledik: sağda video kartının bulunduğu bir panel ve ana kullanıcı arayüzünü içeren bir panel. Son olarak, üst kısımda bir Orbiter bulunur. Video oynatıcı paneliyle başlayalım:

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

Normal düzenlerdeki 2D VideoPlayer bileşenini, ek değişiklik yapmadan SpatialPanel içinde yeniden kullandık. Bağımsız olarak şu şekilde görünür:

Ana içerik panelinde de benzer bir durum söz konusuydu: Orta panel içeriklerini SpatialPanel içinde yeniden kullandık.

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

Bu panele ResizePolicy özelliği ekledik. Bu özellik, kullanıcının paneli yeniden boyutlandırmasına olanak tanıyan, kenarlara yakın tutamaçlar ekler. Ayrıca, kullanıcının sürüklemesine olanak tanıyan bir MovePolicy'ye de sahiptir.

Bu panelleri aynı alt uzaya yerleştirmek, birbirlerinden bağımsız olmalarını sağlar. Bu nedenle VideoPlayer panelini ana içerik panelinin alt öğesi yaptık. Bu, ana içerik paneli bir üst-alt ilişkisi üzerinden sürüklendiğinde VideoPlayer panelinin hareket etmesine neden olur.

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

İlk ekranı bu şekilde oluşturduk.

Diğer ekranlara geçme

Diğer ekranlardan bazılarını da kısaca ele alıp her biri için dikkate alınması gereken noktaları vurgulayacağım.

Burada, önerilen görüntüleme alanına uygun bir düzen oluşturmak için SpatialRow ve SpatialColumn composable'larını kullandık. Bu düzeni oluştururken de Medium düzenindeki bileşenleri yeniden kullandık.

Tam Ekran Alanı'ndaki Sonuç Ekranı: İstemle oluşturulmuş bir bot: kırmızı beyzbol şapkası, pilot gözlüğü, açık mavi tişört, kırmızı ve beyaz kareli şort, yeşil parmak arası terlik giyiyor ve tenis raketi tutuyor.

Sonuç ekranında, tamamlayıcı alıntılar yumuşatma efektiyle gösterilir. Bu efekt, alıntıların ekranın kenarlarına yakın yerlerde solmasına olanak tanır. Ayrıca, kullanılan girişi görüntülerken gerçek bir 3D geçiş kullanır ve resmi uzayda çevirir.

Google Play Store'da yayınlama

Uygulama, uzamsal düzenlerle XR'a hazır hale geldiğinden Play Store'da yayınladık. Uygulamanın AndroidManifest.xml dosyasında yaptığımız son bir önemli değişiklik var:

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

Bu sayede Play Store, uygulamanın XR'a özel özelliklere sahip olduğunu anlar ve kullanıcılara uygulamanın XR düşünülerek geliştirildiğini bildiren bir rozet gösterir:

Sürümü yüklerken XR için yayınlamak üzere özel bir adım uygulamanıza gerek yoktur. Aynı uygulama, mobil kanaldaki kullanıcılara olduğu gibi XR cihazdaki kullanıcılara da normal şekilde dağıtılır. Ancak uygulamanızın XR'ye özel ekran görüntülerini ekleyebilir veya üç boyutlu video öğesi kullanarak uygulamanızın sürükleyici bir önizlemesini yükleyebilirsiniz. Android XR cihazlarda Play Store, bu bilgileri otomatik olarak 3D sanal önizleme şeklinde gösterir. Böylece kullanıcılar, uygulamayı yüklemeden önce içeriğinizin derinliğini ve ölçeğini deneyimleyebilir.

Kendi deneyimlerinizi oluşturmaya bugün başlayın

Androidify, mevcut bir 2D Jetpack Compose uygulamasını nasıl üç boyutlu hale getireceğinize dair harika bir örnektir. Bugün, Androidify için üç boyutlu bir kullanıcı arayüzü geliştirme sürecinin tamamını (tasarımdan koda ve yayınlamaya kadar) gösterdik. Mevcut tasarımları uzamsal paradigmalarla çalışacak şekilde değiştirdik, kullanıcının Tam Alan'a girdiğinde gösterilen uzamsal düzenler oluşturmak için SpatialPanel ve Orbiter composable'larını kullandık ve son olarak uygulamanın yeni sürümünü Play Store'da yayınladık.

Bu blog yayınının, kendi uygulamalarınızı Android XR'a nasıl getirebileceğinizi anlamanıza yardımcı olduğunu umuyoruz. Bu konuda size yardımcı olabilecek birkaç bağlantıyı aşağıda bulabilirsiniz:

• Androidify'ın kaynak koduna göz atın ve Google Play'deki Androidify'ı kullanarak kendi botunuzu oluşturun.
• Geliştirici dokümanlarımızla çalışmaya başlayın ve XR için Jetpack Compose hakkında daha fazla bilgi edinin.
• Android XR emülatörünü indirin ve kendi uygulamanızı deneyin.