Görüntülemelerde içeriği kenardan kenara gösterin

Oluşturma yöntemini deneyin
Android için önerilen kullanıcı arayüzü araç seti Jetpack Compose'dur. Oluşturma bölümünde kenardan kenara nasıl çalışacağınızı öğrenin.
Oluşturma bölümünde kenardan kenara →

Android 15 veya sonraki bir sürümü çalıştıran bir cihazda SDK 35 veya sonraki bir sürümü hedeflediğinizde uygulamanız uçtan uca görüntülenir. 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, altyazı çubuğu ve gezinme çubuğu bulunur.

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 uygulamalar, gezinme çubuğunun arkasında kaydırılabilir içerik göstermelidir.

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

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

  1. Uçtan uca ekranı etkinleştirme
  2. Görsel çakışmalarla ilgilenin.
  3. 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 görüntüleme, 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:

  1. 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'
}

  2. 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. Durum çubuğunun yarı saydam bir perde aldığı 3 düğmeli gezinme modu bu kapsamda değildir. Sistem simgelerinin ve örtünün renkleri, sistemdeki açık veya koyu temaya 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ın uçtan uca ekranda gösterilmesi için geçerli olan içe yerleştirilme 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 iyisidir.

  • 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&#39;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 ekran
Şekil 5. Hareketle gezinme modunda görsel örtüşmeyi çözme

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 çizeceğinden, 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 hareketi iç içe yerleştirilmeleri örneği
Şekil 6. Sistem hareketi iç içe yerleştirilmeleri.

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üm tabanlı birçok Android Materyal Bileşeni (com.google.android.material), 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çe yerleştirilen öğeleri 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.

Geriye dönük uyumlu içe yerleştirilmiş gönderim

İç içe yerleştirilen öğelerin alt görünümlere gönderilmesini durdurmak ve aşırı dolgu yapılmasını önlemek için WindowInsetsCompat.CONSUMED sabit değerini kullanarak iç içe yerleştirilen öğeleri kullanabilirsiniz. Ancak Android 10 (API düzeyi 29 ve önceki sürümler) çalıştıran cihazlarda, WindowInsetsCompat.CONSUMED çağrıldıktan sonra içe yerleştirilenler kardeş öğelere gönderilmez. Bu da istenmeyen görsel çakışmalara neden olabilir.

Bozuk içe yerleştirilmiş gönderim örneği
Şekil 8. Bozuk içe yerleştirilmiş gönderim örneği. Android 10 (API düzeyi 29) ve önceki sürümlerde ViewGroup 1, iç içe yerleştirilmeleri kullandıktan sonra iç içe yerleştirilmeler kardeş görünümlere dağıtılmaz. Bu da TextView 2'nin sistem gezinme çubuğuyla örtüşmesine neden olur. Ancak Android 11 (API düzeyi 30) ve sonraki sürümlerde beklendiği gibi, iç içe yerleştirilmiş öğeler kardeş görünümlere gönderilir.

Desteklenen tüm Android sürümlerinde iç içe yerleştirilmiş öğelerin kardeşlere gönderildiğini onaylamak için AndroidX Core ve Core-ktx 1.16.0-alpha01 ve sonraki sürümlerde bulunan iç içe yerleştirilmiş öğeleri kullanmadan önce ViewGroupCompat#installCompatInsetsDispatch kullanın.

Kotlin

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
val rootView = findViewById(R.id.main)
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView)

Java

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
LinearLayout rootView = findViewById(R.id.main);
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView);
Sabit içe yerleştirilmiş gönderim örneği
Şekil 9. ViewGroupCompat#installCompatInsetsDispatch çağrıldıktan sonra iç içe yerleştirilmiş öğe dağıtımı düzeltildi.

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 simgeleri

enableEdgeToEdge çağrısı, cihaz teması değiştiğinde sistem çubuğu simgesi renklerinin güncellenmesini sağlar.

Kenardan kenara geçiş yaparken sistem çubuğu simge renklerini uygulamanızın arka planıyla kontrast oluşturacak şekilde manuel olarak güncellemeniz gerekebilir. Örneğin, açık renkli durum çubuğu simgeleri oluşturmak için:

Kotlin

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Java

WindowCompat.getInsetsController(window, window.getDecorView())
    .setAppearanceLightStatusBars(false);

Sistem çubuğu koruması

Uygulamanız SDK 35 veya sonraki sürümleri hedeflediğinde kenardan kenara reklam zorunlu kılınacaktır. Sistem durum çubuğu ve hareketle gezinme çubukları şeffaftır ancak üç düğmeli gezinme çubuğu yarı saydamdır. Bu özelliği geriye dönük uyumlu hale getirmek için enableEdgeToEdge arayın.

Ancak sistem varsayılanları tüm kullanım alanları için uygun olmayabilir. Şeffaf veya yarı saydam sistem çubukları kullanıp kullanmayacağınızı belirlemek için Android sistem çubukları tasarım kılavuzu ve Kenardan kenara tasarım başlıklı makaleleri inceleyin.

Şeffaf sistem çubukları oluşturma

Android 15'i (SDK 35) veya sonraki sürümleri hedefleyerek ya da önceki sürümler için varsayılan bağımsız değişkenlerle enableEdgeToEdge()'ü çağırarak şeffaf bir durum çubuğu oluşturun.

Android 15 veya sonraki sürümleri hedefleyerek veya önceki sürümler için varsayılan bağımsız değişkenlerle enableEdgeToEdge()'ü çağırarak şeffaf bir hareketle gezinme çubuğu oluşturun. Üç düğmeli gezinme çubuğu için Window.setNavigationBarContrastEnforced değerini false olarak ayarlayın. Aksi takdirde yarı saydam bir ekran uygulanır.

Saydam sistem çubukları oluşturma

Saydam bir durum çubuğu oluşturmak için aşağıdakileri yapın:

  1. androidx-core bağımlılığınızı 1.16.0-beta01 veya sonraki bir sürüme güncelleyin
  2. XML düzeninizi androidx.core.view.insets.ProtectionLayout içine alın ve bir kimlik atayın.
  3. Korumaları ayarlamak için ProtectionLayout öğesine programatik olarak erişin. Yan tarafı ve durum çubuğu için% 80 alfa değerine sahip bir GradientProtection belirtin.

<androidx.core.view.insets.ProtectionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_protection"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/item_list"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--items-->

    </ScrollView>

</androidx.core.view.insets.ProtectionLayout>
system_bar_protection.xml

val red = 52
val green = 168
val blue = 83
findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                // alpha = 204 for an 80% gradient
                Color.argb(204, red, green, blue)
            )
        )
    )
SystemBarProtectionSnippet.kt

GradientProtection alanına iletilen ColorInt değerinin içerik arka planıyla eşleştiğinden emin olun. Örneğin, katlanabilir cihazlarda görüntülenen bir liste-ayrıntı düzeninde, liste paneli ve ayrıntı paneli için farklı renklerde farklı GradientProtections'ler olabilir.

Şekil 1. Farklı renklerde gradyan koruma

Saydam hareketle gezinme çubuğu oluşturmayın. Üç düğmeli yarı saydam bir gezinme çubuğu oluşturmak için aşağıdakilerden birini yapın:

  • Düzeninizi zaten bir ProtectionView içine sardıysanız setProtections yöntemine ek bir ColorProtection veya GradientProtection iletebilirsiniz. Bunu yapmadan önce window.isNavigationBarContrastEnforced = false.
  • Aksi takdirde window.isNavigationBarContrastEnforced = true değerini ayarlayın. Uygulamanız enableEdgeToEdge, window.isNavigationBarContrastEnforced = true çağrısı yapıyorsa varsayılan değerdir.

Diğer ipuçları

Eklentileri kullanarak ve clipToPadding değerini false olarak ayarlayarak son liste öğesinin RecyclerView veya NestedScrollView cihazınızdaki sistem çubukları tarafından engellenmediğinden emin olun.

Aşağıdaki videoda, kenardan kenara ekranın devre dışı (sol) ve etkin (sağ) olduğu bir RecyclerView gösterilmektedir:

Kod örneği için RecyclerView ile dinamik listeler oluşturma bölümündeki kod snippet'lerine bakın.

Ek kaynaklar

Kenardan kenara geçiş hakkında daha fazla bilgi için aşağıdaki referanslara bakın.

Bloglar

Tasarım

Diğer dokümanlar

Videolar