Membuat UI Responsif dengan ConstraintLayout   Bagian dari Android Jetpack.

ConstraintLayout memungkinkan Anda membuat tata letak yang kompleks dan besar dengan hierarki tampilan datar (tidak ada kelompok tampilan bertingkat). ConstraintLayout mirip dengan RelativeLayout yang semua tampilannya diletakkan sesuai dengan hubungan antara tampilan yang setara dan tata letak induk, tetapi lebih fleksibel dari RelativeLayout dan lebih mudah digunakan dengan Layout Editor Android Studio.

Semua kecanggihan ConstraintLayout tersedia langsung dari fitur visual Layout Editor, karena API tata letak dan Layout Editor dibuat khusus untuk digunakan dengan satu sama lain. Jadi, Anda dapat membuat tata letak menggunakan ConstraintLayout sepenuhnya dengan menarik lalu melepas, dan bukan dengan mengedit XML.

Halaman ini memberikan panduan untuk membuat tata letak dengan ConstraintLayout di Android Studio versi 3.0 atau yang lebih tinggi. Jika Anda ingin mengetahui informasi selengkapnya terkait Layout Editor itu sendiri, buka panduan Android Studio dalam Membuat UI dengan Layout Editor.

Untuk melihat berbagai tata letak yang dapat Anda buat dengan ConstraintLayout, buka project Constraint Layout Examples di GitHub.

Ringkasan terkait batasan

Untuk menentukan posisi tampilan di ConstraintLayout, Anda harus menambahkan minimal satu batasan horizontal dan satu batasan vertikal untuk tampilan tersebut. Setiap batasan mewakili hubungan atau perataan dengan tampilan lain, tata letak induk, atau panduan yang tidak terlihat. Setiap batasan menentukan posisi tampilan sepanjang sumbu vertikal atau horizontal; jadi setiap tampilan harus memiliki minimal satu batasan untuk setiap sumbu, tetapi sering kali diperlukan lebih dari satu.

Saat Anda melepas tampilan ke Layout Editor, tampilan akan tetap berada di tempat Anda meletakkannya, meskipun tampilan tersebut tidak memiliki batasan. Namun, ini hanya bertujuan untuk memudahkan pengeditan; jika tampilan tidak memiliki batasan saat Anda menjalankan tata letak di perangkat, tampilan akan digambar pada posisi [0,0] (pojok kiri atas).

Pada gambar 1, tata letak terlihat bagus di editor, tetapi tidak ada batasan vertikal di tampilan C. Saat tata letak ini tergambar di perangkat, tampilan C akan diratakan secara horizontal dengan tepi kiri dan kanan tampilan A, tetapi akan muncul di bagian atas layar karena tampilan tersebut tidak memiliki batasan vertikal.

Meskipun tidak adanya batasan tidak akan menyebabkan error kompilasi, Layout Editor akan menunjukkan tidak adanya batasan sebagai error di toolbar. Untuk melihat error dan peringatan lainnya, klik Show Warnings and Errors . Untuk membantu menghindari tidak adanya batasan, Layout Editor dapat secara otomatis menambahkan batasan untuk Anda dengan fitur Autoconnect and infer constraints.

Menambahkan ConstraintLayout ke project Anda

Untuk menggunakan ConstraintLayout di project Anda, ikuti langkah-langkah berikut:

1. Pastikan Anda memiliki repositori maven.google.com yang dinyatakan di file build.gradle tingkat modul:

       repositories {
           google()
       }
       

2. Tambahkan library sebagai dependensi di file build.gradle yang sama, seperti yang ditunjukkan di contoh berikut. Perlu diperhatikan bahwa versi terbaru mungkin berbeda dengan yang ditunjukkan di contoh:

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha07"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha07"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha07")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha07")
   }
   

3. Di notifikasi sinkronisasi atau toolbar, klik Sync Project with Gradle Files.

Sekarang Anda sudah siap untuk membuat tata letak menggunakan ConstraintLayout.

Mengonversi tata letak

Untuk mengonversi tata letak yang ada menjadi tata letak terbatas, ikuti langkah-langkah berikut ini:

1. Buka tata letak Anda di Android Studio, lalu klik tab Design di bagian bawah jendela editor.
2. Di jendela Component Tree, klik kanan tata letak, lalu klik Convert layout to ConstraintLayout.

Membuat tata letak baru

Untuk memulai file tata letak terbatas yang baru, ikuti langkah-langkah berikut ini:

1. Di jendela Project, klik folder modul, lalu pilih File > New > XML > Layout XML.
2. Masukkan nama untuk file tata letak, lalu masukkan "androidx.constraintlayout.widget.ConstraintLayout" untuk Root Tag.
3. Klik Finish.

Menambahkan atau menghapus batasan

Untuk menambahkan batasan, lakukan langkah-langkah berikut:

1. Tarik tampilan dari jendela Palette ke editor.

   Saat Anda menambah tampilan di ConstraintLayout, kotak pembatas dengan tuas pengubah ukuran berbentuk kotak di setiap sudut dan tuas pembatas berbentuk lingkaran di setiap sisi akan ditampilkan.

2. Klik tampilan untuk memilihnya.
3. Lakukan salah satu langkah berikut:
   • Klik tuas pembatas kemudian tarik ke titik link yang tersedia. Titik ini dapat menjadi tepi tampilan lain, tepi tata letak, atau panduan. Anda akan melihat bahwa saat menarik tuas pembatas, Layout Editor akan menampilkan anchor sambungan potensial dan overlay berwarna biru.

   • Klik salah satu tombol Create a connection di bagian Layout jendela Attributes, seperti yang ditunjukkan pada gambar 4.

     

     Gambar 4. Bagian Layout jendela Attributes memungkinkan Anda membuat sambungan.

Saat batasan dibuat, editor memberinya margin default untuk memisahkan dua tampilan tersebut.

Saat membuat batasan, ingat aturan berikut:

• Setiap tampilan harus memiliki minimal dua batasan: satu horizontal dan satu vertikal.
• Anda hanya dapat membuat batasan di antara tuas pembatas dan titik link yang memiliki bidang sama. Jadi, bidang vertikal (sisi kiri dan kanan) tampilan hanya dapat dibatasi ke bidang vertikal lain; dan baseline hanya dapat dibatasi ke baseline lain.
• Setiap tuas pembatas hanya dapat digunakan untuk satu batasan saja, tetapi Anda dapat membuat beberapa batasan (dari tampilan yang berbeda) ke titik link yang sama.

Anda dapat menghapus batasan dengan melakukan salah satu langkah berikut:

• Klik batasan untuk memilihnya, lalu tekan Delete.

• Tekan dan tahan Control (Command di macOS), lalu klik anchor pembatas. Perlu diperhatikan bahwa batasan akan menjadi berwarna merah untuk menunjukkan bahwa Anda dapat mengklik untuk menghapusnya, seperti ditunjukkan dalam gambar 5.

  

  Gambar 5. Batasan berwarna merah menunjukkan bahwa Anda dapat mengklik untuk menghapusnya.

• Pada bagian Layout jendela Attributes, klik anchor pembatas, seperti ditunjukkan dalam gambar 6.

  

  Gambar 6. Klik anchor pembatas untuk menghapusnya.

Jika Anda menambahkan batasan yang berlawanan di tampilan, garis batasan akan menjadi berlekuk-lekuk seperti pegas untuk menunjukkan adanya pengaruh yang berbeda, seperti yang ditunjukkan pada video 2. Efeknya paling terlihat saat ukuran tampilan disetel ke "fixed" atau "wrap content", yang dalam hal ini tampilan akan diletakkan di tengah batasan. Jika ingin tampilan meregangkan ukurannya agar menyentuh batasan, ubah ukuran menjadi "match constraints"; atau jika ingin mempertahankan ukuran saat ini tetapi memindahkan tampilan sehingga tidak berada di tengah, sesuaikan bias batasan.

Anda dapat menggunakan batasan untuk mendapatkan jenis perilaku tata letak yang berbeda, seperti yang dijelaskan di bagian berikut ini.

Posisi induk

Urutan posisi

Perataan

Perataan baseline

Dibatasi oleh panduan

Dibatasi oleh barrier

Menyesuaikan bias batasan

Saat Anda menambahkan batasan ke kedua sisi tampilan, (dan ukuran tampilan untuk dimensi yang sama adalah "fixed" atau "wrap content"), tampilan akan berada di tengah dua batasan dengan bias 50% secara default. Anda dapat menyesuaikan bias dengan menarik penggeser bias di jendela Attributes atau dengan menarik tampilan, seperti yang ditunjukkan dalam video 3.

Jika Anda ingin tampilan meregangkan ukurannya agar menyentuh batasan, ubah ukuran menjadi "match constraints".

Menyesuaikan ukuran tampilan

Anda dapat menggunakan tuas sudut untuk mengubah ukuran tampilan, namun tindakan ini akan menyebabkan hard code pada ukuran, sehingga ukuran tampilan tidak akan diubah untuk ukuran layar atau konten yang berbeda. Untuk memilih ukuran yang berbeda, klik tampilan, lalu buka jendela Attributes di sisi kanan editor.

Pemeriksa tampilan berada di dekat bagian atas jendela Attributes, yang mencakup kontrol untuk beberapa atribut tata letak, seperti yang ditunjukkan dalam gambar 14 (ini hanya tersedia untuk tampilan di tata letak batasan).

Anda dapat mengubah cara penghitungan tinggi dan lebar dengan mengklik simbol yang ditunjukkan dengan keterangan 3 di gambar 14. Simbol ini mewakili mode ukuran sebagai berikut (klik simbol untuk beralih antara setelan berikut):

• Fixed: Anda menentukan dimensi tertentu di kotak teks di bawah atau dengan mengubah ukuran tampilan di editor.
• Wrap Content: Tampilan hanya diperluas sebesar yang diperlukan agar pas dengan kontennya.
• Match Constraints: Tampilan akan diperluas selebar mungkin agar menyentuh batasan di setiap sisi (setelah memperhitungkan margin tampilan). Namun, Anda dapat mengubah perilaku tersebut dengan atribut dan nilai berikut (atribut ini hanya akan diterapkan saat Anda menyetel lebar tampilan menjadi match constraints):
  • layout_constraintWidth_default
    • spread: Memperluas tampilan selebar mungkin agar menyentuh batasan di setiap sisi. Ini merupakan perilaku default.
    • wrap: Memperluas tampilan hanya selebar yang diperlukan agar pas dengan kontennya, tetapi tetap memungkinkan tampilan berukuran lebih kecil jika batasan mengharuskannya. Jadi, perbedaannya dengan penggunaan Wrap Content (di atas), adalah menyetel lebar ke Wrap Content memaksa lebar agar selalu sama dengan lebar konten; sedangkan penggunaan Match Constraints dengan layout_constraintWidth_default yang disetel ke wrap juga memungkinkan tampilan agar lebih kecil dari lebar konten.
  • layout_constraintWidth_min

    Ini memerlukan dimensi dp untuk lebar minimum tampilan.

  • layout_constraintWidth_max

    Ini memerlukan dimensi dp untuk lebar maksimum tampilan.

  Namun, jika dimensi yang ditentukan hanya memiliki satu batasan, maka tampilan akan diperluas agar pas dengan kontennya. Menggunakan mode ini di tinggi atau lebar juga memungkinkan Anda menyetel rasio ukuran.

Catatan: Anda tidak dapat menggunakan match_parent untuk tampilan apa pun di ConstraintLayout. Sebagai gantinya, gunakan "match constraints" (0dp).

Menyetel ukuran sebagai rasio

Anda dapat menyetel ukuran tampilan ke rasio seperti 16:9 jika minimal salah satu dimensi tampilan disetel ke "match constraints" (0dp). Untuk mengaktifkan rasio, klik Toggle Aspect Ratio Constraint (keterangan 1 di gambar 14), lalu masukkan rasio lebar:tinggi di masukan yang muncul.

Jika lebar dan tinggi disetel ke match constraints, Anda dapat mengklik Toggle Aspect Ratio Constraint untuk memilih dimensi mana yang akan didasarkan pada rasio dimensi lainnya. Pemeriksa tampilan menunjukkan dimensi yang disetel sebagai rasio dengan menghubungkan sudut yang terkait dengan garis utuh.

Misalnya, jika Anda menyetel kedua sisi ke "match constraints", klik Toggle Aspect Ratio Constraint dua kali untuk menyetel agar lebar menjadi rasio tinggi. Sekarang seluruh ukuran ditentukan oleh tinggi tampilan (yang dapat ditetapkan dengan cara apa pun) seperti yang ditunjukkan dalam gambar 15.

Menyesuaikan margin tampilan

Untuk memastikan bahwa semua tampilan Anda ditampilkan secara merata, klik Margin di toolbar guna memilih margin default untuk setiap tampilan yang Anda tambahkan ke tata letak. Setiap perubahan yang Anda lakukan ke margin default hanya akan diterapkan ke tampilan yang Anda tambahkan sejak saat itu.

Anda dapat mengontrol margin untuk setiap tampilan di jendela Attributes dengan mengklik angka di baris yang mewakili setiap batasan (di gambar 14, keterangan 4 menunjukkan margin bawah yang disetel ke 16 dp).

Gambar 16. Tombol Margin toolbar.

Semua margin yang ditawarkan oleh alat adalah faktor 8 dp untuk membantu agar tampilan Anda diratakan dengan rekomendasi petak kotak 8 dp Desain Material.

Mengontrol grup linear dengan rantai

Rantai adalah sekelompok tampilan yang dihubungkan dengan satu sama lain menggunakan pembatas dua arah. Tampilan dalam rantai dapat didistribusikan baik secara vertikal maupun horizontal.

Rantai dapat diberi gaya dengan salah satu cara berikut:

1. Spread: Tampilan didistribusikan secara merata (setelah margin diperhitungkan). Ini adalah defaultnya.
2. Spread inside: Tampilan pertama dan kedua dilekatkan pada batasan di setiap ujung rantai dan sisanya didistribusikan secara merata.
3. Weighted: Saat rantai disetel ke spread atau spread inside, Anda dapat mengisi ruang yang tersisa dengan menyetel satu atau beberapa tampilan lain menjadi "match constraints" (0dp). Secara default, ruang didistribusikan secara merata di antara setiap tampilan yang disetel menjadi "match constraints", tetapi Anda dapat menetapkan bobot kepentingan untuk masing-masing tampilan menggunakan atribut layout_constraintHorizontal_weight dan layout_constraintVertical_weight. Jika Anda sudah terbiasa dengan layout_weight di tata letak linear, ini memiliki cara kerja yang sama. Jadi, tampilan dengan nilai bobot tertinggi akan mendapatkan jumlah ruang terbanyak; tampilan yang memiliki bobot yang sama akan mendapatkan jumlah ruang yang sama.
4. Packed: Tampilan dikemas bersama (setelah margin diperhitungkan). Kemudian Anda dapat menyesuaikan bias keseluruhan rantai (kiri/kanan atau atas/bawah) dengan mengubah bias tampilan kepala rantai.

Tampilan "head" rantai (tampilan di sebelah paling kiri dalam rantai horizontal dan tampilan di sebelah paling atas dalam rantai vertikal) menentukan gaya rantai di XML. Namun, Anda dapat beralih antara spread, spread inside, dan packed dengan memilih tampilan apa pun di rantai, lalu mengklik tombol rantai yang muncul di bawah tampilan.

Untuk membuat rantai, pilih semua tampilan untuk disertakan dalam rantai, klik kanan salah satu tampilan, pilih Chains, lalu pilih Center Horizontally atau Center Vertically, seperti yang ditunjukkan dalam video 4:

Berikut beberapa hal yang perlu dipertimbangkan saat menggunakan rantai:

• Tampilan dapat menjadi bagian dari rantai horizontal dan vertikal, sehingga memudahkan pembuatan tata letak berbentuk petak yang fleksibel.
• Rantai hanya akan bekerja sebagaimana mestinya jika setiap ujung rantai dibatasi ke objek lain di sumbu yang sama, seperti yang ditunjukkan dalam gambar 14.
• Meskipun orientasi rantai adalah vertikal atau horizontal, menggunakan salah satunya tidak akan meratakan tampilan ke arah tersebut. Jadi, pastikan bahwa Anda menyertakan batasan lain untuk mencapai posisi yang tepat untuk setiap tampilan di rantai, seperti batasan perataan.

Membuat batasan secara otomatis

Sebagai ganti dari menambahkan batasan ke setiap tampilan saat Anda meletakkannya di tata letak, Anda dapat memindahkan setiap tampilan ke posisi yang diinginkan, kemudian mengklik Infer Constraints untuk membuat batasan secara otomatis.

Infer Constraints memindai tata letak untuk menentukan kumpulan batasan yang paling efektif bagi semua tampilan. Fitur ini mengupayakan untuk membatasi tampilan ke posisinya saat ini serta memungkinkan fleksibilitas. Anda mungkin perlu melakukan beberapa penyesuaian untuk memastikan tata letak merespons seperti yang Anda inginkan untuk orientasi dan ukuran layar yang berbeda.

Autoconnect to parent adalah fitur terpisah yang dapat Anda aktifkan. Jika diaktifkan, saat Anda menambahkan tampilan turunan ke induk, fitur ini akan secara otomatis membuat dua atau lebih batasan untuk setiap tampilan saat Anda menambahkannya ke tata letak, tetapi hanya jika membatasi tampilan ke tata letak induk diperlukan. Autoconnect tidak akan membuat batasan untuk tampilan lain di tata letak.

Autoconnect dinonaktifkan secara default. Aktifkan Autoconnect dengan mengklik Enable Autoconnection to Parent di toolbar Layout Editor.

Animasi bingkai utama

Dalam ConstraintLayout, Anda dapat menganimasikan perubahan pada ukuran dan posisi elemen menggunakan ConstraintSet dan TransitionManager.

ConstraintSet merupakan objek ringan yang mewakili batasan, margin, dan padding elemen turunan dalam ConstraintLayout. Saat Anda menerapkan ConstraintSet ke ConstraintLayout yang ditampilkan, tata letak akan memperbarui batasan semua turunannya.

Untuk membuat animasi menggunakan ConstraintSets, tentukan dua file tata letak yang berperan sebagai awal dan akhir bingkai utama untuk animasi. Kemudian Anda dapat memuat ConstraintSet dari file bingkai utama kedua lalu menerapkannya ke ConstraintLayout yang ditampilkan.

Contoh kode di bawah menunjukkan cara menganimasikan pemindahan satu tombol ke bagian bawah layar.

// MainActivity.kt

    fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.keyframe_one)
        constraintLayout = findViewById(R.id.constraint_layout) // member variable
    }

    fun animateToKeyframeTwo() {
        val constraintSet = ConstraintSet()
        constraintSet.load(this, R.layout.keyframe_two)
        TransitionManager.beginDelayedTransition()
        constraintSet.applyTo(constraintLayout)
    }
    

    // layout/keyframe1.xml
    // Keyframe 1 contains the starting position for all elements in the animation as well as final colors and text sizes

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

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    // layout/keyframe2.xml
    // Keyframe 2 contains another ConstraintLayout with the final positions

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

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    

Referensi lainnya

ConstraintLayout digunakan di aplikasi demo Sunflower.