Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Kaydırılmayan görünümler, bir bakışta görülebilen bilgilere odaklanır ve kullanıcı etkileşimi gerektirmeyen veya çok az etkileşim gerektiren değerler sunar. Bu nedenle, bu düzenlerde duyarlı davranış oluşturmak zor olabilir.
Kaydırılmayan düzen bileşenlerini önceden ayarlama
Dialog
İletişim kutusu, ekranın tamamını kaplayan geçici bir yerleşimidir. Kullanıcıların tek bir işlem yapmasına olanak tanır.
Aşağıdaki noktaları göz önünde bulundurun:
İletişim kutuları, içeriklerinin ele alındığını doğrulamak için dikkatinizi odaklar.
İletişimde doğrudan bilgi verilmelidir ve görev tamamlanmalıdır.
İletişim kutuları, kullanıcı görevine veya işlemine yanıt olarak alakalı ya da bağlamsal bilgilerle birlikte görünmelidir.
Onay yer paylaşımı
Onay yer paylaşımı, kullanıcıya kısa bir süre için onay mesajı gösterir. Bu bileşeni, bir işlem gerçekleştirildikten sonra kullanıcının dikkatini çekmek için kullanın.
Telefonda aç
Telefonda açma yer paylaşımı, kullanıcı yolculuğuna telefonda devam etmeyi seçtiğinde tetiklenir. Yer paylaşımında ilerleme göstergesi bulunur ve kullanıcıya telefonunu ne zaman kontrol etmesi gerektiği bildirilir.
Step aleti
Adım sayıcılar, kullanıcılara bir değer aralığından seçim yapma olanağı tanıyan tam ekran kontrol deneyimi sunar. Etkileşimi düğmeleri veya taç ile kontrol edebilirler. Belirli seviye, kavisli bir seviye göstergesiyle gösterilir.
Saat seçici
Seçiciler, kullanıcıların kaydırılabilir bölümlerdeki sınırlı sayıda öğe arasından seçim yapmasına olanak tanır.
Saat seçici, saniyelerin kullanılabilir olup olmamasına ve saatin 12 saatlik mi yoksa 24 saatlik mi olmasına bağlı olarak en fazla üç sütundan oluşur. Kullanıcılar her sütunla tek tek etkileşim kurar. Devam etmeden önce sayıyı odaklanmış durumda bırakarak seçiminizi yaparsınız.
Tarih seçici
Seçiciler, kullanıcıların kaydırılabilir bölümlerdeki sınırlı sayıda öğe arasından seçim yapmasına olanak tanır.
Tarih seçicide, kullanım alanına bağlı olarak tarih, saat ve yıl arasında değiştirilebilir sıraya sahip en fazla üç sütun bulunur.
Tarih seçiciler daha uzun içerik dizeleri gerektirdiğinden, bir seferde yalnızca bir sütun görünür. Bu da solda veya sağda ne olduğuna dair bir ipucu verir. Kullanıcılar, her sütunla tek tek etkileşim kurar ve devam etmeden önce odaklanılan sayıyı bırakarak seçimlerini yapar.
Özel kaydırılmayan düzen örnekleri
Kaydırılmayan uygulama ekranları, ayarlanan bileşenlerle sınırlı değildir. İstediğiniz düzeni oluşturmak için öğeleri birleştirebilirsiniz.
Kaydırılmayan bir ekrandaki sınırlı alanın yanı sıra kullanılabilir ekran alanını kullanmak için duyarlı (yüzde) kenar boşlukları ve dolgu kullanımına dikkat etmeniz gerekir. Daha büyük ekran boyutlarında ek içerik sunmak veya mevcut içeriği daha kolay okunabilir hale getirmek için 225 dp'de bir kesme noktası uygulamayı da düşünebilirsiniz.
Haritalar
Acil durum katmanı
Acil durum uyarısı
Duyarlı ve uyarlanabilir davranış
Compose kitaplığındaki tüm bileşenler, daha geniş ekran boyutuna otomatik olarak uyum sağlar ve genişlik ile yükseklik kazanır. Özellikle bu görünümlerde kesme noktalarını kullanmak, tüm kullanıcılara zengin ve değerli bir deneyim sunabilir.
Kullanıcı arayüzünüzdeki birçok düğme, kart ve kenar boşluğu için farklı ekran boyutlarında alanı genişletip doldurarak kullanıcı arayüzünde mevcut alandan yararlanın ve dengeli bir düzen oluşturun.
Duyarlı parametrelerin düzgün şekilde tanımlandığını doğrulamak için aşağıdaki kontrol listesini kullanın:
Tüm ekran boyutlarında makul görünen esnek düzenler oluşturun.
Önerilen üst, alt ve yan kenar boşluklarını uygulayın.
İçeriğin aksi takdirde kırpılabileceği yerlerde kenar boşluklarını yüzde değerleriyle tanımlayın.
Öğelerin ekrandaki alanı en iyi şekilde kullanması ve farklı cihaz boyutlarında dengeyi koruması için düzen kısıtlamalarından yararlanın.
Kullanılıyorsa Zaman Metni'ni yerleştirin ancak sayfanın üst kısmıyla çakışmayın.
Sınırlı alanı daha iyi kullanmak için kenarlara yakın düğmeler kullanabilirsiniz.
Daha büyük ekran boyutlarında ek içerik sunmak veya mevcut içeriği daha kolay okunabilir hale getirmek için 225 dp'de bir kesme noktası uygulamayı düşünebilirsiniz.
Sayfalara ayırma kullanılan, kaydırılmayan birden fazla sayfa yolculuğu
Bir deneyimin daha fazla içerik gerektirdiği ancak kaydırma içermeyen bir düzeni korumak istediği senaryolarda, dikey veya yatay sayfalara ayırma içeren çok sayfalı bir düzen kullanmayı düşünebilirsiniz.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-08-25 UTC.
[null,null,["Son güncelleme tarihi: 2025-08-25 UTC."],[],[],null,["# Non-scrolling app layouts\n\nNon-scrolling views focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts.\n\nPreset non-scrolling layout components\n--------------------------------------\n\n### Dialog\n\nA dialog is a transient overlay that occupies the whole screen. It lets users\nperform a single action. \n\n\u003cbr /\u003e\n\n\nConsider the following points:\n\n\u003cbr /\u003e\n\n- Dialogs focus your attention to verify their content is addressed.\n- Dialogs should be direct in communicating information and dedicated to completing a task.\n- Dialogs should appear in response to a user task or an action, with relevant or contextual information. \n\n\u003cbr /\u003e\n\n### Confirmation overlay\n\nThe confirmation overlay displays a confirmation message to the user for a short\nperiod. Use this component to capture the user's attention after an action has\nbeen executed.\n\n\u003cbr /\u003e\n\n### Open on phone\n\nThe open on phone overlay is triggered when the user chooses to continue their\njourney on a phone. The overlay has a progress indicator and tells the user when\nto check their phone.\n\n\u003cbr /\u003e\n\n### Stepper\n\nSteppers provide a full-screen control experience that let users make a\nselection from a range of values. They can control the interaction using the\nbuttons or crown, and the specific level is shown using a curved level\nindicator.\n\n\u003cbr /\u003e\n\n### Time picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Time Picker** has up to three columns, depending on whether seconds are\navailable or if the clock is a 12-hour or 24-hour clock. Users interact with\neach column at a time, making your selection by leaving the number in focus\nbefore continuing.\n\n\u003cbr /\u003e\n\n### Date picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Date Picker** has up to three columns, which have an interchangeable order\nbetween date, time, and year, depending on the use case.\n**Date Pickers** require longer strings of content, so only one column is in\nview at a time, giving a hint of what's to the left or right. Users interact\nwith each column at a time, making their selection by leaving the number in\nfocus before continuing.\n\n\u003cbr /\u003e\n\nCustom non-scrolling layout examples\n------------------------------------\n\nNon-scrolling app screens are not limited to the set components. You can combine\na combination of elements to create the layout you want.\n\nYou should be mindful of the limited space on a non-scrolling screen and the use\nof responsive (percentage) margins and padding to use the available screen\nspace. You can also consider applying a breakpoint at 225dp to introduce\nadditional content or make existing content more glanceable when on bigger\nscreen sizes. \n\n### Maps\n\n\u003cbr /\u003e\n\n### Emergency overlay\n\n\u003cbr /\u003e\n\n### Emergency alert\n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library automatically adapt to the wider screen\nsize and gain width and height. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers.\n\nFor many of your UI's buttons, cards, and margins, stretch and fill the space\nfor different screen sizes to take advantage of the available space on the UI\nand also make for a well-balanced layout.\n\nUse the following checklist to verify that responsive parameters are properly\ndefined:\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate **Time Text** if used, but don't overlap the top section of the page.\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n| **Caution:** A display size shouldn't display less information than ones that are smaller than it. This is especially relevant for custom behaviors added at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less on the larger screens. Screens should show more value, not less, with increasing size.\n\nMultiple non-scrolling page journeys using pagination\n-----------------------------------------------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination."]]
