Mendukung berbagai ukuran layar

Dukungan untuk berbagai ukuran layar memberi aplikasi Anda akses ke sejumlah besar pengguna dan berbagai macam perangkat.

Untuk mendukung sebanyak mungkin ukuran layar, desain tata letak aplikasi Anda agar responsif dan adaptif. Tata letak responsif/adaptif memberikan pengalaman pengguna yang dioptimalkan terlepas dari ukuran layar pengguna, sehingga memungkinkan aplikasi Anda mengakomodasi ponsel, tablet, perangkat foldable dan Chrome OS, orientasi potret dan lanskap, serta konfigurasi yang dapat diubah ukurannya seperti mode multi-aplikasi.

Class ukuran jendela

Class ukuran jendela adalah sekumpulan titik henti sementara area pandang tidak berubah yang membantu Anda mendesain, mengembangkan, dan menguji tata letak aplikasi yang responsif dan adaptif. Titik henti sementara telah dipilih secara khusus untuk menyeimbangkan kesederhanaan tata letak dengan fleksibilitas untuk mengoptimalkan aplikasi Anda untuk kasus yang unik.

Class ukuran jendela mengelompokkan area tampilan yang tersedia untuk aplikasi Anda sebagai rapat, sedang, atau diperluas. Lebar dan tinggi yang tersedia diklasifikasikan secara terpisah, sehingga pada waktu tertentu aplikasi Anda akan memiliki dua class ukuran jendela, yaitu class untuk lebar dan class untuk tinggi. Lebar yang tersedia biasanya lebih penting daripada tinggi yang tersedia karena adanya scroll vertikal di mana saja, sehingga class ukuran jendela lebar kemungkinan akan lebih relevan dengan UI aplikasi Anda.

Seperti yang divisualisasikan di atas, titik henti sementara ini memungkinkan Anda terus memikirkan tata letak dalam hal perangkat dan konfigurasi. Setiap titik henti sementara class ukuran merepresentasikan sebagian besar kasus untuk skenario perangkat biasa, yang dapat menjadi frame referensi yang berguna saat Anda memikirkan desain tata letak berbasis titik henti sementara.

Meskipun dapat berguna untuk memvisualisasikan class ukuran sebagai perangkat fisik, class ukuran jendela secara eksplisit tidak ditentukan oleh ukuran layar perangkat. Class ukuran jendela tidak ditujukan untuk logika isTablet-type. Namun, class ukuran jendela ditentukan oleh ukuran jendela yang tersedia untuk aplikasi, apa pun jenis perangkat yang menjalankan aplikasi, yang memiliki dua konsekuensi penting:

• Perangkat fisik tidak menjamin class ukuran jendela tertentu. Ruang layar yang tersedia untuk aplikasi Anda dapat berbeda dari ukuran layar perangkat karena berbagai alasan. Pada perangkat seluler, mode layar terpisah dapat membuat partisi layar antara dua aplikasi. Di Chrome OS, aplikasi Android dapat ditampilkan di jendela bentuk bebas yang dapat diubah ukurannya secara arbitrer. Perangkat foldable dapat memiliki dua layar dengan ukuran berbeda yang diakses secara masing-masing dengan melipat atau membentangkan perangkat.

• Class ukuran jendela dapat berubah sepanjang masa penggunaan aplikasi Anda. Saat aplikasi berjalan, perubahan orientasi perangkat, multitasking, dan posisi dilipat/dibentangkan dapat mengubah jumlah ruang layar yang tersedia. Oleh karena itu, class ukuran jendela bersifat dinamis, dan UI aplikasi Anda juga harus beradaptasi.

Class ukuran jendela dipetakan ke titik henti sementara tata letak di petak tata letak responsif Desain Material. Gunakan class ukuran jendela untuk membuat keputusan tata letak aplikasi tingkat tinggi, seperti memutuskan apakah akan menggunakan tata letak kanonis tertentu untuk memanfaatkan ruang layar tambahan.

Aplikasi berbasis tampilan harus menghitung class ukuran jendela berdasarkan metrik jendela saat ini yang disediakan oleh library Jetpack WindowManager. Kode contoh di bawah dalam View (Kotlin) dan View (Java) menunjukkan contoh cara menghitung class ukuran jendela berdasarkan titik henti sementara dan menerima update setiap kali titik henti sementara berubah.

Aplikasi berbasis Compose harus menggunakan library material3-window-size-class untuk menghitung WindowSizeClass berdasarkan metrik jendela saat ini dengan calculateWindowSizeClass().

enum class WindowSizeClass { COMPACT, MEDIUM, EXPANDED }

class MainActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // ...

        // Replace with a known container that you can safely add a
        // view to where it won't affect the layout and the view
        // won't be replaced.
        val container: ViewGroup = binding.container

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged. This is required for all
        // activities, even those that don't handle configuration
        // changes. We also can't use Activity.onConfigurationChanged,
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged is
        // called in those scenarios.
        container.addView(object : View(this) {
            override fun onConfigurationChanged(newConfig: Configuration?) {
                super.onConfigurationChanged(newConfig)
                computeWindowSizeClasses()
            }
        })

        computeWindowSizeClasses()
    }

    private fun computeWindowSizeClasses() {
        val metrics = WindowMetricsCalculator.getOrCreate()
            .computeCurrentWindowMetrics(this)

        val widthDp = metrics.bounds.width() /
            resources.displayMetrics.density
        val widthWindowSizeClass = when {
            widthDp < 600f -> WindowSizeClass.COMPACT
            widthDp < 840f -> WindowSizeClass.MEDIUM
            else -> WindowSizeClass.EXPANDED
        }

        val heightDp = metrics.bounds.height() /
            resources.displayMetrics.density
        val heightWindowSizeClass = when {
            heightDp < 480f -> WindowSizeClass.COMPACT
            heightDp < 900f -> WindowSizeClass.MEDIUM
            else -> WindowSizeClass.EXPANDED
        }

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

public enum WindowSizeClass { COMPACT, MEDIUM, EXPANDED }

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ...

        // Replace with a known container that you can safely add a
        // view to where it won't affect the layout and the view
        // won't be replaced.
        ViewGroup container = binding.container;

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged. This is required for all
        // activities, even those that don't handle configuration
        // changes. We also can't use Activity.onConfigurationChanged,
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged is
        // called in those scenarios.
        container.addView(new View(this) {
            @Override
            protected void onConfigurationChanged(Configuration newConfig) {
                super.onConfigurationChanged(newConfig);
                computeWindowSizeClasses();
            }
        });

        computeWindowSizeClasses();
    }

    private void computeWindowSizeClasses() {
        WindowMetrics metrics = WindowMetricsCalculator.getOrCreate()
                .computeCurrentWindowMetrics(this);

        float widthDp = metrics.getBounds().width() /
                getResources().getDisplayMetrics().density;
        WindowSizeClass widthWindowSizeClass;

        if (widthDp < 600f) {
            widthWindowSizeClass = WindowSizeClass.COMPACT;
        } else if (widthDp < 840f) {
            widthWindowSizeClass = WindowSizeClass.MEDIUM;
        } else {
            widthWindowSizeClass = WindowSizeClass.EXPANDED;
        }

        float heightDp = metrics.getBounds().height() /
                getResources().getDisplayMetrics().density;
        WindowSizeClass heightWindowSizeClass;

        if (heightDp < 480f) {
            heightWindowSizeClass = WindowSizeClass.COMPACT;
        } else if (heightDp < 900f) {
            heightWindowSizeClass = WindowSizeClass.MEDIUM;
        } else {
            heightWindowSizeClass = WindowSizeClass.EXPANDED;
        }

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val windowSizeClass = calculateWindowSizeClass(this)
            MyApp(windowSizeClass)
        }
    }
}

Setelah Anda mengamati class ukuran jendela di aplikasi, Anda siap untuk mulai mengubah tata letak berdasarkan class ukuran jendela saat ini.

Untuk mempelajari cara menggunakan class ukuran jendela agar tata letak menjadi responsif, lihat referensi berikut ini:

• Untuk tata letak berbasis tampilan, Memigrasikan UI ke tata letak responsif
• Untuk tata letak berbasis Compose, Mem-build tata letak adaptif

Checklist untuk mendukung berbagai class ukuran jendela

Saat Anda membuat perubahan tata letak, uji perilaku tata letak di semua rentang ukuran jendela, terutama pada lebar titik henti sementara yang rapat, sedang, dan diperluas.

Jika Anda sudah memiliki tata letak untuk layar yang rapat, pertama-tama optimalkan tata letak untuk class ukuran lebar yang diperluas, karena hal ini memberikan ruang terbanyak untuk konten atau perubahan UI tambahan. Kemudian, tentukan tata letak yang sesuai untuk class ukuran lebar sedang. Pertimbangkan untuk menambahkan tata letak khusus untuk ukuran layar dengan lebar sedang.

Berikan pengalaman pengguna yang ditingkatkan dengan menambahkan fungsi yang berlaku khusus untuk aplikasi Anda, seperti dukungan untuk postur perangkat foldable atau pengoptimalan untuk dukungan input keyboard, mouse, dan stilus.

Untuk mempelajari lebih lanjut apa saja yang membuat aplikasi bagus di semua perangkat dan ukuran layar, lihat Kualitas aplikasi perangkat layar besar.

Desain responsif

Langkah pertama dalam mendukung berbagai faktor bentuk perangkat adalah membuat tata letak yang responsif terhadap variasi ukuran layar.

ConstraintLayout

Cara terbaik untuk membuat tata letak responsif adalah menggunakan ConstraintLayout sebagai tata letak dasar di UI Anda. ConstraintLayout memungkinkan Anda menentukan posisi dan ukuran setiap tampilan berdasarkan hubungan spasial dengan tampilan lainnya dalam tata letak. Semua tampilan kemudian dapat berpindah dan mengubah ukuran bersama-sama seiring perubahan ukuran layar.

Cara termudah untuk membuat tata letak dengan ConstraintLayout adalah menggunakan Layout Editor di Android Studio. Layout Editor memungkinkan Anda menarik tampilan baru ke tata letak, menerapkan batasan relatif ke tampilan induk dan tampilan setara, serta menyetel properti tampilan—semuanya tanpa perlu mengedit file XML apa pun secara manual.

Untuk informasi selengkapnya, lihat Mem-build UI yang Responsif Dengan ConstraintLayout.

Lebar dan tinggi responsif

Untuk memastikan tata letak Anda responsif terhadap berbagai ukuran layar, gunakan wrap_content, match_parent, atau 0dp (match constraint) untuk lebar dan tinggi sebagian besar komponen tampilan, bukan nilai hard code:

• wrap_content — Mengaktifkan tampilan untuk menyetel ukurannya ke dimensi yang diperlukan agar konten sesuai dalam tampilan.
• match_parent — Memungkinkan tampilan diperluas seluas mungkin dalam tampilan induk.
• 0dp (match constraint) — Di ConstraintLayout, mirip dengan match_parent. Mengaktifkan tampilan untuk menggunakan semua ruang yang tersedia dalam batasan tampilan.

Contoh:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

Gambar 4 menunjukkan bagaimana lebar dan tinggi TextView disesuaikan ketika lebar layar berubah dengan orientasi perangkat.

TextView menyetel lebarnya untuk mengisi semua ruang yang tersedia (match_parent) dan menyetel tingginya ke ruang yang dibutuhkan oleh tinggi teks yang dimuat (wrap_content), yang memungkinkan tampilan untuk beradaptasi dengan berbagai ukuran layar dan jumlah teks.

Jika menggunakan LinearLayout, Anda juga dapat memperluas tampilan turunan berdasarkan bobot tata letak sehingga tampilan tersebut akan mengisi ruang yang tersedia secara proporsional. Namun, menggunakan bobot dalam LinearLayout bertingkat mengharuskan sistem melakukan beberapa penerusan tata letak untuk menentukan ukuran setiap tampilan, yang menyebabkan performa UI menjadi lambat.

ConstraintLayout dapat membuat hampir semua tata letak dengan LinearLayout tanpa memengaruhi performa, sehingga Anda harus mencoba mengonversi LinearLayout bertingkat menjadi ConstraintLayout. Kemudian, Anda dapat menentukan tata letak berbobot dengan rantai batasan.

Desain adaptif

Tata letak aplikasi harus selalu responsif terhadap berbagai ukuran layar. Namun, tata letak responsif pun tidak dapat memberikan pengalaman pengguna terbaik di setiap perangkat. Misalnya, UI yang didesain untuk ponsel mungkin tidak memberikan pengalaman yang optimal di tablet. Desain adaptif menyediakan tata letak alternatif yang telah dioptimalkan untuk berbagai dimensi tampilan.

SlidingPaneLayout untuk UI detail daftar

UI detail daftar biasanya memberikan pengalaman pengguna yang berbeda di layar dengan ukuran yang berbeda pula. Pada layar besar, panel daftar dan detail biasanya berdampingan. Saat item dalam daftar dipilih, informasi item akan ditampilkan di panel detail tanpa mengubah UI—dua panel tetap berdampingan. Namun, pada layar berukuran kecil, dua panel ditampilkan secara terpisah, setiap panel menempati seluruh area tampilan. Bila item di panel daftar dipilih, panel detail (berisi informasi item yang dipilih) akan menggantikan panel daftar. Navigasi kembali menggantikan panel detail dengan daftar.

SlidingPaneLayout mengelola logika untuk menentukan manakah dari kedua pengalaman pengguna tersebut yang sesuai untuk ukuran jendela saat ini:

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

Atribut layout_width dan layout_weight dari dua tampilan yang terdapat di SlidingPaneLayout menentukan perilaku SlidingPaneLayout. Pada contoh, jika jendela cukup lebar (minimal 580 dp) untuk menampilkan kedua tampilan, panel akan ditampilkan secara berdampingan. Namun, jika lebar jendela lebih kecil dari 580 dp, panel bergeser satu sama lain untuk menempati satu jendela aplikasi secara keseluruhan.

Jika lebar jendela lebih besar dari total lebar minimum yang ditentukan (580 dp), nilai layout_weight dapat digunakan untuk mengukur kedua panel secara proporsional. Misalnya, panel daftar selalu memiliki lebar 280 dp karena tidak memiliki bobot. Namun, panel detail selalu mengisi ruang horizontal di atas 580 dp karena layout_weight tampilan.

Resource tata letak alternatif

Untuk menyesuaikan desain UI Anda dengan berbagai ukuran layar, gunakan tata letak alternatif yang diidentifikasi oleh penentu resource.

Anda dapat menyediakan tata letak adaptif khusus layar dengan membuat direktori res/layout/ tambahan di kode sumber aplikasi Anda. Buat direktori untuk setiap konfigurasi layar yang memerlukan tata letak berbeda. Kemudian, tambahkan pengontrol kualitas konfigurasi layar ke nama direktori layout (misalnya, layout-w600dp untuk layar yang memiliki lebar yang tersedia sebesar 600 dp).

Pengontrol kualitas konfigurasi mewakili ruang layar yang terlihat dan tersedia untuk UI aplikasi Anda. Sistem memperhitungkan setiap dekorasi sistem (seperti menu navigasi) dan perubahan konfigurasi jendela (seperti mode multi-aplikasi) saat memilih tata letak untuk aplikasi Anda.

Untuk membuat tata letak alternatif di Android Studio (menggunakan versi 3.0 atau yang lebih tinggi), lakukan langkah berikut:

1. Buka tata letak default Anda, lalu klik Orientation for Preview di toolbar.
2. Di menu drop-down, klik untuk membuat varian yang disarankan, misalnya Create Landscape Variation atau klik Create Other.
3. Jika memilih Create Other, Select Resource Directory akan muncul. Pilih penentu layar di sebelah kiri dan tambahkan ke daftar Chosen qualifiers. Jika sudah selesai menambahkan penentu, klik OK. (Lihat bagian berikut untuk mendapatkan informasi tentang penentu ukuran layar.)

Duplikat file tata letak default dibuat di direktori tata letak baru sehingga Anda dapat mulai menyesuaikan tata letak untuk varian layar tersebut.

Penentu lebar terkecil

Penentu ukuran layar lebar terkecil memungkinkan Anda menyediakan tata letak alternatif untuk layar dengan lebar minimum yang diukur dalam piksel kepadatan mandiri (dp atau dip).

Dengan mendeskripsikan ukuran layar sebagai ukuran dp, Android memungkinkan Anda membuat tata letak yang didesain untuk dimensi layar tertentu tanpa memperhatikan kepadatan piksel yang berbeda.

Misalnya, Anda dapat membuat tata letak bernama main_activity yang dioptimalkan untuk ponsel dan tablet dengan membuat versi file yang berbeda di direktori yang berbeda:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7” tablets (600dp wide or wider)

Penentu lebar terkecil menentukan sisi terkecil dari dua sisi layar, terlepas dari orientasi perangkat yang sedang diterapkan. Jadi, ini adalah cara mudah untuk menentukan ukuran layar keseluruhan yang tersedia untuk tata letak Anda.

Berikut adalah bagaimana nilai lebar terkecil lainnya menyesuaikan ukuran layar umum:

• 320 dp: Layar ponsel pada umumnya (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, dll.)
• 480 dp: Layar ponsel besar ~5" (480x800 mdpi)
• 600 dp: tablet 7” (600x1024 mdpi)
• 720 dp: tablet 10” (720x1280 mdpi, 800x1280 mdpi, dll.)

Gambar 6 memberikan gambaran yang lebih mendetail tentang bagaimana lebar dp layar yang berbeda pada umumnya menyesuaikan berbagai ukuran dan orientasi layar.

Nilai untuk penentu lebar terkecil adalah dp, karena jumlah ruang layar yang tersedia setelah sistem memperhitungkan kepadatan piksel (bukan resolusi piksel mentah) merupakan hal yang penting.

Ukuran yang Anda tentukan menggunakan penentu resource seperti lebar terkecil bukanlah ukuran layar sebenarnya. Ukuran ini menentukan lebar atau tinggi dalam satuan dp yang tersedia untuk jendela aplikasi Anda. Sistem Android mungkin menggunakan sebagian layar untuk UI sistem (seperti kolom sistem di bagian bawah layar atau status bar di bagian atas), sehingga sebagian layar mungkin tidak tersedia untuk tata letak Anda. Jika digunakan dalam mode multi-aplikasi, aplikasi hanya dapat mengakses ukuran jendela yang berisi aplikasi. Jika ukuran jendela diubah, perubahan konfigurasi akan terpicu dengan ukuran jendela yang baru, yang memungkinkan sistem memilih file tata letak yang sesuai. Jadi, ukuran penentu resource yang Anda deklarasikan hanya boleh menentukan ruang yang dibutuhkan aplikasi. Sistem memperhitungkan setiap ruang yang digunakan oleh UI sistem saat menyediakan ruang untuk tata letak Anda.

Penentu lebar yang tersedia

Daripada mengubah tata letak berdasarkan lebar terkecil layar, Anda mungkin perlu mengubah tata letak berdasarkan seberapa besar lebar atau tinggi yang saat ini tersedia. Misalnya, Anda mungkin ingin menggunakan tata letak dua panel setiap kali layar menyediakan lebar setidaknya 600 dp, yang dapat berubah bergantung pada apakah perangkat dalam orientasi lanskap atau potret. Dalam hal ini, Anda harus menggunakan penentu lebar yang tersedia seperti berikut:

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7” tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

Jika tinggi yang tersedia tidak sesuai untuk aplikasi, Anda dapat menggunakan penentu tinggi yang tersedia. Misalnya, layout-h600dp untuk layar yang berukuran minimal 600 dp.

Penentu orientasi

Meskipun Anda mungkin dapat mendukung semua variasi ukuran hanya dengan kombinasi penentu lebar terkecil dan lebar yang tersedia, Anda juga dapat mengubah pengalaman pengguna saat pengguna beralih antara orientasi potret dan lanskap.

Untuk itu, Anda dapat menambahkan penentu port atau land ke nama direktori tata letak. Pastikan penentu orientasi muncul setelah penentu ukuran. Contoh:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7” tablets
res/layout-sw600dp-land/main_activity.xml   # For 7” tablets in landscape

Untuk informasi selengkapnya tentang semua pengontrol kualitas konfigurasi layar, lihat Ringkasan resource aplikasi.

Komponen UI modular menggunakan fragmen

Saat mendesain aplikasi untuk berbagai ukuran layar, gunakan fragmen untuk mengekstrak logika UI ke dalam komponen terpisah guna memastikan Anda tidak perlu menduplikasi perilaku UI di seluruh aktivitas. Selanjutnya, Anda dapat menggabungkan fragmen untuk membuat tata letak multipanel pada perangkat layar besar, atau menempatkan fragmen dalam aktivitas terpisah pada perangkat layar kecil.

Misalnya, pola detail daftar (lihat SlidingPaneLayout di atas) dapat diterapkan dengan satu fragmen yang berisi daftar dan fragmen lain yang berisi detail item daftar. Pada perangkat layar besar, fragmen dapat ditampilkan berdampingan; di perangkat layar kecil, fragmen ditampilkan satu per satu dan memenuhi layar.

Untuk mempelajari lebih lanjut, lihat ringkasan Fragmen.

Penyematan aktivitas

Jika aplikasi Anda terdiri dari beberapa aktivitas, penyematan aktivitas memungkinkan Anda membuat UI adaptif dengan mudah.

Penyematan aktivitas menampilkan beberapa aktivitas atau beberapa instance aktivitas yang sama secara bersamaan dalam jendela tugas aplikasi. Pada perangkat layar besar, aktivitas dapat ditampilkan secara berdampingan; pada perangkat layar kecil, aktivitas ditumpuk di atas aktivitas lain.

Anda menentukan cara aplikasi menampilkan aktivitasnya dengan membuat file konfigurasi XML yang digunakan sistem untuk menentukan presentasi yang sesuai berdasarkan ukuran layar. Atau, Anda dapat melakukan panggilan Jetpack WindowManager API.

Penyematan aktivitas mendukung perubahan orientasi perangkat dan perangkat foldable, menumpuk dan membongkar aktivitas saat perangkat diputar atau dilipat dan dibentangkan.

Untuk informasi selengkapnya, lihat Penyematan aktivitas.

Ukuran layar dan rasio lebar tinggi

Uji aplikasi Anda pada berbagai ukuran layar dan rasio lebar tinggi untuk memastikan UI Anda diskalakan dengan benar.

Android 10 (API level 29) dan yang lebih baru mendukung berbagai rasio lebar tinggi. Faktor bentuk perangkat foldable dapat bervariasi mulai dari layar tinggi dan sempit, seperti 21:9 saat dilipat, hingga rasio lebar tinggi persegi 1:1 saat dibentangkan.

Untuk memastikan kompatibilitas dengan perangkat sebanyak mungkin, uji aplikasi Anda menggunakan rasio lebar tinggi layar berikut sebanyak mungkin.

Jika Anda tidak dapat mendukung beberapa rasio lebar tinggi, gunakan maxAspectRatio dan minAspectRatio untuk menunjukkan rasio tertinggi dan terendah yang dapat ditangani oleh aplikasi Anda. Jika layar melebihi batas ini, aplikasi Anda mungkin akan dimasukkan dalam mode kompatibilitas.

Jika tidak memiliki akses ke perangkat untuk semua ukuran layar yang berbeda yang ingin diuji, Anda dapat menggunakan Android Emulator untuk mengemulasikan hampir semua ukuran layar.

Jika Anda lebih memilih untuk mengujinya di perangkat yang sebenarnya tetapi tidak memilikinya, Anda dapat menggunakan Firebase Test Lab untuk mengakses perangkat di pusat data Google.

Dukungan ukuran layar tertentu

Jika memutuskan bahwa aplikasi Anda tidak akan mendukung ukuran layar tertentu, Anda dapat menyetel batas untuk perubahan ukuran layar yang diperbolehkan atau bahkan membatasi perangkat mana yang dapat menginstalnya berdasarkan konfigurasi layarnya. Untuk informasi selengkapnya, lihat Mendeklarasikan dukungan layar terbatas.

Referensi lainnya

• Desain Material 3: Desain adaptif
• Tata letak kanonis untuk desain adaptif