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

Compose yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da uçtan uca ekranla nasıl çalışacağınızı öğrenin.

Compose'da uçtan uca →

Android 15 veya sonraki bir sürümün yüklü olduğu bir cihazda SDK 35 veya sonraki bir sürümü hedeflediğinizde uygulamanız uçtan uca ekranda görüntülenir. Pencere, sistem çubuklarının arkasına çizim yaparak 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 uygulamada üst uygulama çubuğu bulunur. Üst uygulama çubuğu, ekranın üst kenarına kadar uzanmalı ve durum çubuğunun arkasında gösterilmelidir. İsteğe bağlı olarak, ü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 da 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.

Uygulamanızda uçtan uca düzen uygularken aşağıdakileri göz önünde bulundurun:

1. Uçtan uca ekranı etkinleştirme
2. Kullanıcı deneyimini farklı form faktörlerinde optimize etmek için uyarlanabilir düzenler kullanın.
3. Görsel çakışmaları düzeltme
4. Sistem çubuklarının arkasında perde göstermeyi düşünün

Uçtan uca ekranı etkinleştirin

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

Önceki Android sürümlerinde uçtan uca ekranı etkinleştirmek için Activity öğenizin onCreate bölümünde enableEdgeToEdge işlevini manuel olarak çağırın.

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

 @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WindowCompat.enableEdgeToEdge(getWindow());
        ...
      }

Varsayılan olarak enableEdgeToEdge(), sistem çubuklarını şeffaf yapar. Ancak 3 düğmeli gezinme modunda gezinme çubuğu yarı saydam bir perde alır. Sistem simgelerinin ve perdenin renkleri, sistemin açık veya koyu temasına göre ayarlanır.

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.

İç kısımları kullanarak çakışmaları yönetme

Uygulamanızın bazı görünümleri, Şekil 3'te 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ç kısımlara tepki vererek çakışmaları giderebilirsiniz. Kesişme, içeriğin üzerinde görüntüleme anlamına gelebilir ancak uygulamanızı sistem hareketleri hakkında da bilgilendirebilir.

Uygulamanızı uçtan uca görüntülemek için geçerli olan iç metin türleri şunlardır:

• Sistem çubuğu ekleri: Dokunulabilir ve sistem çubukları tarafından görsel olarak engellenmemesi gereken görünümler için en iyisidir.

• Ekran kesme ekleri: Cihazın şekli nedeniyle ekran kesmesi olabilecek alanlar için.

• Sistem hareketi ekleri: Sistem tarafından kullanılan ve uygulamanıza göre öncelikli olan hareketle gezinme alanları için.

Sistem çubukları iç boşlukları

Sistem çubuğu iç kısımları, en çok tercih edilen iç kısım türüdür. Sistem kullanıcı arayüzünün uygulamanızın üstündeki Z ekseninde gösterildiği alanı temsil ederler. Uygulamanızda dokunulabilir olan ve sistem çubukları tarafından görsel olarak engellenmemesi gereken görünümleri taşımak veya doldurmak için en iyi şekilde kullanılırlar.

Örneğin, Şekil 3'teki kayan işlem düğmesi (FAB), gezinme çubuğu tarafından kısmen kapatılmıştır:

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

Aşağıdaki kod örneğinde, sistem çubuğu iç kısımlarının nasıl uygulanacağı gösterilmektedir:

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 the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

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 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:

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

Ekran kesimi ekleri

Bazı cihazlarda ekran kesikleri bulunur. Kamera deliği genellikle ekranın üst kısmında, durum çubuğunda yer alır. Cihaz ekranı yatay moddayken kesit dikey kenarda olabilir. Uygulamanızın ekranda gösterdiği içeriğe bağlı olarak, varsayılan olarak uygulamalar ekran kesintisinde çizim yapacağından ekran kesintilerini önlemek için dolgu uygulamanız gerekir.

Örneğin, birçok uygulama ekranında öğe listesi gösterilir. Liste öğelerini ekran kesmesi veya sistem çubuklarıyla gizlemeyin.

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
}

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 kesintisi türlerinin mantıksal veya değerini alarak WindowInsetsCompat değerini belirleyin.

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

<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 renkle gösterilmiştir:

Sistem çubuğu ekleri gibi, sistem hareketi eklerinin çakışmasını önlemek için WindowInsetsCompat.Type.systemGestures() ile getInsets(int) kullanabilirsiniz.

Kaydırılabilir görünümleri kenarlardan uzaklaştırmak veya doldurmak için bu ekleri kullanın. Yaygın kullanım alanları arasında alt sayfalar, oyunlarda kaydırma ve ViewPager2 kullanılarak uygulanan rulo öğeler yer alır.

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

Aşağıdaki kod örneğinde, sistem hareketi eklerinin nasıl uygulanacağı gösterilmektedir:

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
}

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ştirmeleri otomatik olarak işler.

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

Compose'da Materyal Bileşenleri ile içe yerleştirmeleri nasıl işleyeceğinizi okuyun.

Geriye dönük uyumlu ek sevk

İç kısımların alt görünümlere gönderilmesini durdurmak ve aşırı dolguyu önlemek için WindowInsetsCompat.CONSUMED sabitini kullanarak iç kısımları 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ç kısımlar kardeş öğelere gönderilmez. Bu durum, istenmeyen görsel çakışmalara neden olabilir.

İç kısımların desteklenen tüm Android sürümlerinde kardeş öğelere gönderildiğini onaylamak için iç kısımları kullanmadan önce ViewGroupCompat#installCompatInsetsDispatch kullanın. Bu özellik, AndroidX Core ve Core-ktx 1.16.0-alpha01 ve sonraki sürümlerde kullanılabilir.

// 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)

// 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);

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 yoğun içerik modu için sistem çubuklarını gizleyebilirsiniz:

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

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 için Yoğun içerik modu 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 simge renklerinin güncellenmesini sağlar.

Uçtan uca düzene geçerken 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:

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

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

Sistem çubuğu koruması

Uygulamanız SDK 35 veya sonraki sürümleri hedeflediğinde uçtan uca kullanım zorunlu kılınır. Sistem durum çubuğu ve hareketle gezinme çubukları şeffaf, üç düğmeli gezinme çubuğu ise yarı saydamdır. Bunu geriye dönük uyumlu hale getirmek için enableEdgeToEdge yöntemini çağırın.

Ancak sistem varsayılanları tüm kullanım alanları için uygun olmayabilir. Şeffaf veya yarı şeffaf sistem çubukları kullanıp kullanmayacağınızı belirlemek için Android sistem çubukları tasarım kılavuzunu ve Uçtan uca tasarım'ı inceleyin.

Şeffaf sistem çubukları oluşturma

Android 15 (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() yöntemini çağırarak şeffaf bir durum çubuğu oluşturun.

Android 15 veya sonraki sürümleri hedefleyerek ya da önceki sürümler için varsayılan bağımsız değişkenlerle enableEdgeToEdge() yöntemini ç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 perde uygulanır.

Yarı saydam sistem çubukları oluşturma

Yarı 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. Durum çubuğunun tarafını ve GradientProtection değerini belirterek korumaları ayarlamak için ProtectionLayout değerine programatik olarak erişin.

<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

findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                paneBackgroundColor
            )
        )
    )
SystemBarProtectionSnippet.kt

GradientProtection öğesine iletilen ColorInt değerinin, içerik arka planıyla eşleştiğinden emin olun. Örneğin, katlanabilir cihazda gösterilen bir liste ayrıntısı düzeninde, liste paneli ve ayrıntı paneli için farklı renklerde farklı GradientProtections olabilir.

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

• Düzeniniz zaten bir ProtectionView ile sarmalanmışsa setProtections yöntemine ek bir ColorProtection veya GradientProtection iletebilirsiniz. Bunu yapmadan önce window.isNavigationBarContrastEnforced = false.
• Aksi halde window.isNavigationBarContrastEnforced = true değerini ayarlayın.

Diğer ipuçları

Ekran çıkıntılarını işlerken dikkat edilmesi gereken diğer noktalar

Kaydırılan içeriği uçtan uca yapma

Ekleri işleyerek ve clipToPadding değerini false olarak ayarlayarak son liste öğesinin RecyclerView veya NestedScrollView uygulamanızdaki sistem çubukları tarafından engellenmediğinden emin olun.

Aşağıdaki videoda, uçtan uca ekranın devre dışı bırakıldığı (solda) ve etkinleştirildiği (sağda) bir RecyclerView gösterilmektedir:

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

Tam ekran iletişim kutularını uçtan uca yapma

Tam ekran iletişim kutusunu uçtan uca yapmak için iletişim kutusunda enableEdgeToEdge yöntemini çağırın.

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}

public class MyAlertDialogFragment extends DialogFragment {
    @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        if (dialog != null) {
            Window window = dialog.getWindow();
            if (window != null) {
                WindowCompat.enableEdgeToEdge(window);
            }
        }
    }
    ...
}

Ek kaynaklar

Uçtan uca geçiş hakkında daha fazla bilgi için aşağıdaki referanslara bakın.

Bloglar

• Android 15'in uçtan uca ekran kuralı için iç boşlukları işleme ipuçları
• WindowInsets: Dinleyicilerden düzenlere

Tasarım

• Android sistem çubukları
• Uçtan uca tasarım

Diğer belgeler

• Android'de Chrome'un uçtan uca geçiş rehberi

Videolar

• Android'in geleceğini inşa etme
• Hareketle Gezinme: Ekler