Bu sayfa, Cloud Translation API ile çevrilmiştir.

İçeriği uygulamanızda uçtan uca görüntüleyin

Android 15 veya sonraki bir sürümü çalıştıran bir cihazda SDK 35'i veya sonraki bir sürümü hedeflediğinizde uygulamanız uçtan uca ekranda gösterilir. Pencere, sistem çubuklarının arkasına çizilerek ekranın tüm genişliğini ve yüksekliğini kaplar. Sistem çubukları; durum çubuğu, altyazı çubuğu ve gezinme çubuğunu içerir.

Birçok uygulamanın üst kısmında uygulama çubuğu bulunur. Üst uygulama çubuğu, ekranın üst kenarına kadar uzanmalı ve durum çubuğunun arkasında gösterilmelidir. Dilerseniz üst uygulama çubuğu, içerik kaydırıldığında durum çubuğunun yüksekliğine kadar küçülebilir.

Birçok uygulamada alt uygulama çubuğu veya alt gezinme çubuğu da bulunur. Bu çubuklar, ekranın alt kenarına kadar uzanmalı ve gezinme çubuğunun arkasında gösterilmelidir. Aksi takdirde, uygulamalarda gezinme çubuğunun arkasında kaydırılabilir içerik gösterilmelidir.

Şekil 1. Uçtan uca düzende sistem çubukları.

Uygulamanızda kenardan kenara bir düzen uygularken aşağıdakileri göz önünde bulundurun:

Uçtan uca ekranı etkinleştirme
Görsel çakışmalarla ilgilenin.
Sistem çubuklarının arkasında ekran koruyucu göstermeyi düşünebilirsiniz.

durum çubuğunun arkasındaki görüntü örneği — **Şekil 2.** Durum çubuğunun arkasındaki görüntü örneği.

Uçtan uca ekranı etkinleştirin

Uygulamanız SDK 35 veya sonraki sürümleri hedefliyorsa uçtan uca ekran, Android 15 veya sonraki sürümlerin yüklü olduğu cihazlarda otomatik olarak etkinleştirilir.

Önceki Android sürümlerinde kenardan kenara görüntüleme özelliğini etkinleştirmek için aşağıdakileri yapın:

Uygulamanızın veya modülünüzün build.gradle dosyasında androidx.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")
}

Groovy

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 bölümünde enableEdgeToEdge'i arayarak uçtan uca ekranı manuel olarak etkinleştirin. setContentView tarihinden önce çağrılmalıdır.

Kotlin

     override fun onCreate(savedInstanceState: Bundle?) {
       enableEdgeToEdge()
       super.onCreate(savedInstanceState)
       ...
     }

Java

     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
       EdgeToEdge.enable(this);
       super.onCreate(savedInstanceState);
       ...
     }

enableEdgeToEdge(), varsayılan olarak sistem çubuklarını şeffaf yapar. Bunun istisnası, durum çubuğunun yarı saydam bir perde aldığı 3 düğmeli gezinme modudur. Sistem simgelerinin ve scrim'in renkleri, sistem açık veya koyu temasına göre ayarlanır.

enableEdgeToEdge() işlevi, uygulamanın kenardan kenara yerleştirilmesi gerektiğini otomatik olarak belirtir ve sistem çubuklarının renklerini ayarlar.

enableEdgeToEdge() işlevini kullanmadan uygulamanızda uçtan uca ekranı etkinleştirmek için Uçtan uca ekranı manuel olarak ayarlama başlıklı makaleyi inceleyin.

İç içe yerleştirilen öğeleri kullanma

Uygulamanızın bazı görünümleri, 3. resimde gösterildiği gibi sistem çubuklarının arkasında çizilebilir.

Ekranın hangi bölümlerinin gezinme çubuğu veya durum çubuğu gibi sistem kullanıcı arayüzüyle kesiştiğini belirten içe yerleştirilen öğelere tepki vererek çakışmalarla ilgili sorunları giderebilirsiniz. Kesişme, içeriğin üzerinde gösterilme anlamına gelebilir ancak uygulamanızı sistem hareketleri hakkında da bilgilendirebilir.

Uygulamanızı kenardan kenara göstermek için geçerli olan içe yerleştirilmiş içerik türleri şunlardır:

Sistem çubuğu iç içe yerleştirilmeleri: Dokunulabilen ve sistem çubukları tarafından görsel olarak gizlenmemesi gereken görünümler için en iyi seçenektir.
Ekran kesme içi boşlukları: Cihazın şekli nedeniyle ekranda kesik olabileceği alanlar için.
Sistem hareketi iç içe yerleştirilmeleri: Sistem tarafından kullanılan ve uygulamanızdan öncelikli olan hareketli gezinme alanları için.

Sistem çubuklarının içe yerleştirilmesi

Sistem çubuğu iç içe yerleştirilmeleri, en sık kullanılan iç içe yerleştirilme türüdür. Bunlar, uygulamanızın üzerindeki Z ekseninde sistem kullanıcı arayüzünün görüntülendiği alanı temsil eder. En iyi kullanım alanları, uygulamanızda dokunulabilir olan ve sistem çubukları tarafından görsel olarak gizlenmemesi gereken görünümleri taşımak veya doldurmaktır.

Örneğin, 3. görseldeki yüzen işlem düğmesi (FAB), gezinme çubuğu tarafından kısmen gizlenmiştir:

Kenardan kenara uygulanmış ancak gezinme çubuğu FAB'ı kaplayan bir örnek — **Şekil 3.** Kenardan kenara düzende bir FAB'nin üzerine binen gezinme çubuğu.

Hareket modunda veya düğme modunda bu tür görsel çakışmaların önüne geçmek için WindowInsetsCompat.Type.systemBars() ile birlikte getInsets(int) kullanarak görünümün kenar boşluklarını artırabilirsiniz.

Aşağıdaki kod örneğinde, sistem çubuğu iç içe yerleştirilmelerinin 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ü 3. resimde gösterilen örneğe uygularsanız düğme modunda görsel çakışma olmaz (4. resimde gösterildiği gibi):

FAB'yi örtmeyen yarı saydam bir gezinme çubuğu — **Şekil 4.** Düğme modunda görsel örtüşmeyi çözme.

Şekil 5'te gösterildiği gibi, hareketle gezinme modu için de aynı durum geçerlidir:

hareketle gezinme özelliğine sahip uçtan uca — **Şekil 5.** Hareketle gezinme modunda görsel çakışmaların çözülmesi.

Ekran kesimi iç içe yerleştirilmiş resimleri

Bazı cihazlarda ekran kesikleri bulunur. Kesik genellikle ekranın üst kısmında, durum çubuğuna dahil edilir. Cihaz ekranı yatay moddayken kesik dikey kenarda olabilir. Uygulamalar varsayılan olarak ekrandaki boşluğu dolduracağından, uygulamanızın ekranda gösterdiği içeriğe bağlı olarak ekrandaki boşlukları önlemek için dolgu uygulamanız gerekir.

Örneğin, birçok uygulama ekranında öğelerin listesi gösterilir. Liste öğelerini ekrandaki kesik veya sistem çubuklarıyla örtmeyin.

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) -> {
  Insets bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

Sistem çubuklarının ve ekran kesik türlerinin mantıksal veya değerini alarak WindowInsetsCompat değerini belirleyin.

Dolgunun liste öğeleriyle birlikte kaydırılmasını sağlamak için clipToPadding değerini RecyclerView olarak ayarlayın. Bu sayede, kullanıcı ekranı kaydırdığında öğeler aşağıdaki örnekte gösterildiği gibi sistem çubuklarının arkasına gider.

<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 iç içe yerleştirilmeleri

Sistem hareketi iç içe yerleştirilmeleri, pencerenin sistem hareketlerinin uygulamanıza göre öncelikli olduğu alanlarını temsil eder. Bu alanlar 6. resimde turuncu renkle gösterilmiştir:

Sistem çubuğu iç içe yerleştirilmeleri gibi, sistem hareketi iç içe yerleştirilmelerini de WindowInsetsCompat.Type.systemGestures() ile getInsets(int) kullanarak örtüşmesini önleyebilirsiniz.

Kaydırılabilir görünümleri kenarlardan uzaklaştırmak veya doldurmak için bu iç içe yerleştirilmiş öğeleri kullanın. Sık kullanılan kullanım alanları arasında alt sayfalar, oyunlarda kaydırma ve ViewPager2 kullanılarak uygulanan bantlar yer alır.

Android 10 veya sonraki sürümlerde sistem hareketi ekleri, ana ekran hareketi için alt ek ve geri hareketleri için sol ve sağ ek içerir:

sistem hareketi içe yerleştirilmiş ölçümleri gösteren örnek — **Şekil 7.** Sistem hareketi içe yerleştirilmiş ölçümleri.

Aşağıdaki kod örneğinde, sistem hareketi iç içe eklemelerinin 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} BottomAppBar, BottomNavigationView, NavigationRailView ve NavigationView dahil olmak üzere içe yerleştirilmeleri otomatik olarak işler.

Ancak AppBarLayout, iç içe yerleştirilmeleri otomatik olarak işlemez. Üst iç içe eklemeleri işlemek için android:fitsSystemWindows="true" ekleyin.

Kompozisyon'da Material bileşenleriyle iç içe yerleştirilmiş öğeleri nasıl kullanacağınızı öğrenin.

Yoğun içerik modu

Bazı içerikler tam ekranda daha iyi deneyimlenir ve kullanıcıya daha sürükleyici bir deneyim sunar. WindowInsetsController ve WindowInsetsControllerCompat kitaplıklarını kullanarak sistem çubuklarını ve tam ekran modunu 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ği uygulama hakkında daha fazla bilgi için Tamamlayıcı mod için sistem çubuklarını gizleme başlıklı makaleyi inceleyin.

Sistem çubuğu koruması

Uygulamanız SDK 35 veya sonraki sürümleri hedeflediğinde uçtan uca görüntüleme zorunlu kılınacaktır. Sistem durum çubuğu ve hareketle gezinme çubukları şeffaftır ancak üç düğmeli gezinme çubuğu yarı saydamdır.

Varsayılan yarı saydam üç düğmeli gezinme arka plan korumasını kaldırmak için Window.setNavigationBarContrastEnforced değerini false olarak ayarlayın.

Ek kaynaklar

WindowInsets, hareketle gezinme ve içe yerleştirilen öğelerin işleyiş şekli hakkında daha fazla bilgi için aşağıdaki referanslara bakın: