Android 15 veya sonraki sürümleri çalıştıran bir cihazda SDK 35 veya sonraki sürümleri hedeflediğinizde uygulamanız uçtan uca gösterilir. Pencere, sistem çubuklarının arkasına çizilerek ekranın tüm genişliğini ve yüksekliğini kaplar. Sistem çubukları arasında durum çubuğu, başlık çubuğu ve gezinme çubuğu bulunur.
Birçok uygulamanın bir üst uygulama çubuğu vardır. Üst uygulama çubuğu, ekranın üst kenarına kadar uzatılmalı ve durum çubuğunun arkasında görüntülenmelidir. İsteğe bağlı olarak, içerik kaydırıldığında üst uygulama çubuğu durum çubuğunun yüksekliğine kadar daraltılabilir.
Birçok uygulamanın alt uygulama çubuğu veya alt gezinme çubuğu da vardır. Bu çubuklar ayrıca ekranın alt kenarına kadar uzatılmalı ve gezinme çubuğunun arkasında görüntülenmelidir. Aksi takdirde, uygulamalar gezinme çubuğunun arkasında kayan içerik göstermelidir.
Uygulamanızda uçtan uca düzen uygularken aşağıdakileri göz önünde bulundurun:
- Uçtan uca ekranı etkinleştirme
- Görsel çakışmaları düzeltin.
- Çerçeveleri sistem çubuklarının arkasında gösterebilirsiniz.
Uçtan uca ekranı etkinleştir
Uygulamanız SDK 35 veya sonraki sürümleri hedefliyorsa Android 15 veya sonraki sürümleri çalıştıran cihazlar için uçtan uca otomatik olarak etkinleştirilir.
Önceki Android sürümlerinde uçtan uca etkinleştirmek için aşağıdakileri yapın:
Uygulama veya modülünüzün
build.gradle
dosyasındakiandroidx.activity
kitaplığına bağımlılık ekleyin:Kotlin
dependencies { val activity_version =
activity_version
// Java language implementation implementation("androidx.activity:activity:$activity_version") // Kotlin implementation("androidx.activity:activity-ktx:$activity_version") }Eski
dependencies { def activity_version =
activity_version
// Java language implementation implementation 'androidx.activity:activity:$activity_version' // Kotlin implementation 'androidx.activity:activity-ktx:$activity_version' }enableEdgeToEdge
uzantı işlevini uygulamanıza aktarın:
Activity
cihazınızın onCreate
içinde enableEdgeToEdge
yöntemini çağırarak uçtan uca manuel olarak etkinleştirin. setContentView
tarihinden önce çağrılması gerekir.
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { enableEdgeToEdge() super.onCreate(savedInstanceState) ... }
Java
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { EdgeToEdge.enable(this); super.onCreate(savedInstanceState); ... }
Varsayılan olarak enableEdgeToEdge()
, durum çubuğunun yarı saydam bir çerçeve aldığı 3 düğmeli gezinme modu dışında sistem çubuklarını şeffaf hale getirir. Sistem simgelerinin ve kaplamanın renkleri, sistemin açık veya koyu temasına göre ayarlanır.
enableEdgeToEdge()
işlevi, uygulamanın uçtan uca yerleştirilmesi gerektiğini otomatik olarak bildirir ve sistem çubuklarının renklerini ayarlar.
Uygulamanızda enableEdgeToEdge()
işlevini kullanmadan uçtan uca görüntülemeyi etkinleştirmek için Uçtan uca ekranı manuel olarak ayarlama başlıklı makaleyi inceleyin.
Ekleri kullanarak çakışmaları ele alma
Uygulamanızın bazı görünümleri, Şekil 3'te gösterildiği gibi sistem çubuklarının gerisinde kalabilir.
Ekranın hangi bölümlerinin gezinme çubuğu veya durum çubuğu gibi sistem kullanıcı arayüzüyle kesişeceğini belirleyen eklere tepki vererek çakışmaları ele alabilirsiniz. Kesişme, içeriğin üzerinde gösterilmesi anlamına gelebilir ancak uygulamanıza sistem hareketleri hakkında bilgi de verebilir.
Uygulamanızı uçtan uca görüntülemek için geçerli olan ek türleri şunlardır:
Sistem çubukları eklemeleri: Dokunulabilen ve sistem çubukları tarafından görsel olarak gizlenmemesi gereken görünümler için idealdir.
Ekran kesimi ekleri: Cihazın şekli nedeniyle ekran kesimi olabilecek alanlar için.
Sistem hareketi içe aktarmaları: Sistem tarafından kullanılan ve uygulamanıza göre öncelikli olan hareketle gezinme alanları için.
Sistem çubuğu ekleri
Sistem çubuğu ekleri, en yaygın kullanılan ek türüdür. Bunlar, sistem kullanıcı arayüzünün uygulamanızın üzerindeki Z ekseninde gösterildiği alanı temsil eder. En iyi kullanım alanları, uygulamanızda dokunulabilen ve sistem çubukları tarafından görsel olarak engellenmemesi gereken görünümleri taşımaktır.
Örneğin, şekil 3'teki kayan işlem düğmesi (FAB), gezinme çubuğu tarafından kısmen gizlenmiştir:
Hareket veya düğme modunda bu tür görsel çakışmaları önlemek için WindowInsetsCompat.Type.systemBars()
ile getInsets(int)
aracını kullanarak görünümün kenar boşluklarını artırabilirsiniz.
Aşağıdaki kod örneğinde sistem çubuğu girişlerinin nasıl uygulanacağı gösterilmektedir:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) // Apply the insets as a margin to the view. This solution sets // only the bottom, left, and right dimensions, but you can apply whichever // insets are appropriate to your layout. You can also update the view padding // if that's more appropriate. v.updateLayoutParams<MarginLayoutParams> { leftMargin = insets.left, bottomMargin = insets.bottom, rightMargin = insets.right, } // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()); // Apply the insets as a margin to the view. This solution sets only the // bottom, left, and right dimensions, but you can apply whichever insets are // appropriate to your layout. You can also update the view padding if that's // more appropriate. MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams(); mlp.leftMargin = insets.left; mlp.bottomMargin = insets.bottom; mlp.rightMargin = insets.right; v.setLayoutParams(mlp); // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. return WindowInsetsCompat.CONSUMED; });
Bu çözümü Şekil 3'te gösterilen örneğe uygularsanız, Şekil 4'te gösterildiği gibi düğme modunda görsel çakışma olmaz:
Şekil 5'te gösterildiği gibi aynı durum hareketle gezinme modu için de geçerlidir:
Ekran kesimi ekleri
Bazı cihazlarda ekran kesimleri vardır. Genellikle kesim, ekranın üst kısmındadır ve durum çubuğuna dahil edilir. Cihaz ekranı yatay moddayken kesinti dikey kenarda olabilir. Uygulamanızın ekranda gösterdiği içeriğe bağlı olarak, ekran kesimlerini önlemek için dolgu uygulamanız gerekir. Varsayılan olarak uygulamalar ekran kesiminde çizer.
Örneğin, birçok uygulama ekranında bir öğe listesi gösterilir. Liste öğelerini ekran kesimi veya sistem çubuklarıyla gizlemeyin.
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets -> val bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout() ) v.updatePadding( left = bars.left, top = bars.top, right = bars.right, bottom = bars.bottom, ) WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> { WindowInsetsCompat bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout() ); v.setPadding(bars.left, bars.top, bars.right, bars.bottom); return WindowInsetsCompat.CONSUMED; });
Sistem çubukları ve ekran kesimi türlerinin mantıksal veya mantığını alarak WindowInsetsCompat
değerini belirleyin.
Dolgunun liste öğeleriyle birlikte kayması için clipToPadding
öğesini RecyclerView
olarak ayarlayın. Bu, aşağıdaki örnekte gösterildiği gibi, kullanıcı sayfayı kaydırdığında öğelerin sistem çubuklarının arkasına gitmesine olanak tanır.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
Sistem hareketi ekleri
Sistem hareketi ekleri, sistem hareketlerinin uygulamanıza göre öncelikli olduğu pencere alanlarını temsil eder. Bu alanlar Şekil 6'da turuncu renkte gösterilmiştir:
Sistem çubuğu eklerinde olduğu gibi, getInsets(int)
ile WindowInsetsCompat.Type.systemGestures()
arasındaki sistem hareketi eklerinin çakışmasını önleyebilirsiniz.
Kaydırılabilir görünümleri kenarlardan uzağa taşımak veya dolguyla taşımak için bu ek öğeleri kullanın. Yaygın kullanım alanları arasında alt sayfalar, oyunlarda kaydırma ve ViewPager2
kullanılarak uygulanan bantlar bulunur.
Android 10 veya sonraki sürümlerde sistem hareketi ek öğeleri ana sayfa hareketi için bir alt, geri hareketleri için de sol ve sağ ek kısım içerir:
Aşağıdaki kod örneğinde, sistem hareketi etiketlerinin nasıl uygulanacağı gösterilmektedir:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()) // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.updatePadding(insets.left, insets.top, insets.right, insets.bottom) // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()); // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.setPadding(insets.left, insets.top, insets.right, insets.bottom); // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. return WindowInsetsCompat.CONSUMED; });
Material Bileşenleri
Görünüme dayalı birçok Android Materyal Bileşeni
(com.google.android.material){:.external}, şunları da içeren ekleri otomatik olarak işler:
BottomAppBar
,
BottomNavigationView
,
NavigationRailView
ve NavigationView
Ancak AppBarLayout
, ekleri otomatik olarak işlemez. Üst ekleri işlemek için android:fitsSystemWindows="true"
ekleyin veya setOnApplyWindowInsetsListener
kullanın.
Compose'da Materyal Bileşenleri ile eklerin nasıl işleneceğini öğrenin.
Yoğun içerik modu
Bazı içerikler en iyi tam ekranda deneyimlenerek kullanıcıya daha etkileyici bir deneyim sunar. Yoğun içerik modu için sistem çubuklarını WindowInsetsController
ve WindowInsetsControllerCompat
kitaplıklarını kullanarak gizleyebilirsiniz:
Kotlin
val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView) // Hide the system bars. windowInsetsController.hide(Type.systemBars()) // Show the system bars. windowInsetsController.show(Type.systemBars())
Java
Window window = getWindow(); WindowInsetsControllerCompat windowInsetsController = WindowCompat.getInsetsController(window, window.getDecorView()); if (windowInsetsController == null) { return; } // Hide the system bars. windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()); // Show the system bars. windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
Bu özelliğin uygulanması hakkında daha fazla bilgi edinmek isterseniz Yoğun içerik modu için sistem çubuklarını gizleme bölümüne bakın.
Ek kaynaklar
WindowInsets
, hareketle gezinme ve eklerin çalışma şekli hakkında daha fazla bilgi için aşağıdaki referanslara bakın: