April 2021 ~ About Me

PENGENALAN LAYOUTING LANJUTAN

(FrameLayout, ListView, GridView, ConstrainLayout) PADA ANDROID STUDIO

· MENGGUNAKAN FRAMELAYOUT

FrameLayout adalah layout sederhana. layout ini bisa berisi satu atau lebih View child, dan mereka bisa tumpang tindih satu sama lain. Oleh karena itu, atribut android: layout_gravity digunakan untuk menemukan ViewChild.

Untuk membuat FrameLayout pada layout.xml tersebut, kalian perlu menambahkan tag <FrameLayout> dan di akhri dengan tag </FrameLayout>, pada contoh berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button pertama, seperti berikut ini:

Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian atur sendiri, kalian dapat menggunakan beberapa atribut Berikut adalah atribut penting khusus untuk FrameLayout :

Ø android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri elemen UI pada elemen UI lainnya.

Ø android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan elemen UI pada elemen UI lainnya.

Ø android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI pada elemen UI lainnya.

Ø android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah elemen UI pada elemen UI lainnya.

Ø android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah, center, center horizontal dan center vertical.

Secara khusus, FrameLayout memiliki 9 area gravitasi yang diilustrasikan pada gambar di bawah ini. Perhatikan bahwa itu adalah area imajiner, jadi itu tidak berarti FrameLayout secara fisik dibagi menjadi 9 bagian.

Saat View ditambahkan ke FrameLayout, secara default, itu akan terletak pada gravitasi "kiri | atas". Lihatlah contoh di bawah ini, saya menambahkan 2 Tombol ke FrameLayout, secara default, mereka terletak pada gravitasi "kiri | atas" dan Anda melihat bahwa mereka saling tumpang tindih.

Gunakan atribut android: layout_gravity untuk menyesuaikan posisi tombol. Nilai android: layout_gravity dapat berupa kombinasi dari nilai-nilai berikut:

Seperti yang telah dijelaskan di atas FrameLayout merupakan jenis layout yang elemen UI didalamnya saling bertumpuk dengan elemen UI lain, urutan elemen UI menentukan urutan tampilan. pada contoh berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button pertama, seperti berikut ini:

1. Pertama jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project

Name → FrameLayout

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ FrameLayout

Language → Java

Minimum API Level → API 16 → Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini

maka akan terlihat seperti ini :

Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian atur sendiri, kalian dapat menggunakan beberapa atribut berikut ini:

Ø android:layout_marginLeft : Untuk mengatur jarak (batasan) sudut kiri elemen UI pada elemen UI lainnya.

Ø android:layout_marginRight : Untuk mengatur jarak (batasan) sudut kanan elemen UI pada elemen UI lainnya.

Ø android:layout_marginTop : Untuk mengatur jarak (batasan) atas elemen UI pada elemen UI lainnya.

Ø android:layout_marginBottom : Untuk mengatur jarak (batasan) bawah elemen UI pada elemen UI lainnya.

Ø android:layout_gravity : Untuk mengatur posisi rata kanan, kiri, atas, bawah, center, center horizontal dan center vertical.

Pada contoh berikutnya, edit kode pada layout.xml kalian menjadi seperti berikut ini:

maka akan terlihat seperti ini :

3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

4. Pertama jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project

Name → FrameLayout2

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ FrameLayout2

Language → Java

Minimum API Level → API 16 → Klik Finish

5. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini

6. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

· MENGGUNAKAN LISTVIEW

“Sebenarnya materi ini sudah sepat kita bahas di materi sebelumnya tapi tak mengapa kita bahas lagi karena materi ini masih berhubungan dengan materi Layouting yang sedang kita palajari di materi kali ini”

Atribut ListView

Berikut adalah tabel atribut penting khusus untuk GridView

1. ListView

ListView adalah salah satu widget yang digunakan untuk menampilkan data atau nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView tersebut didapat dari sebuah Array atau Database yang sudah ditentukan. ListView pada saat ini sudah tergantikan dengan RecyclerView yang memiliki konsep Material Design, karena lebih custom dan juga dapat mengatur tampilan layoutnya. Walaupun begitu, ListView masih banyak digunakan oleh programmer untuk membuat list/daftar item yang sederhana pada aplikasi mereka,

2. Adapter

Adapter merupakan class yang mengatur item-item pada ListView. Adapter mengatur resource view pada setiap item dari ListView. Resource view pada ListView yang ada pada sebuah tampilan layar sebuah aplikasi memiliki jumlah resource view yang tetap sesuai dengan item yang tampak pada layar. Pada ListView dengan tampilan scroll, resourve view akan digunakan secara berulang (reusable) dengan mengatur item yang tampak dan yang tersembunyi pada ListView. Adapter juga mengatur data model dari setiap item ListView. Sebuah data model akan diatur menjadi sebuah item dari ListView.

3. Membuat ListView Sederhana

ListView dikatakan sederhana atau komplek ditentukan oleh kompleksitas item dari ListView tersebut. Jika masing-masing item dari ListView menampilkan sebuah kata atau kalimat saja, maka ListView tersebut sederhana. Jika masing-masing item dari ListView memiliki isi yang komplek seperti item dari sebuah status jejaring sosial dimana pada masing-masing item memiliki foto profil, nama, waktu, status dan komentar, maka ListView tersebut adalah ListView komplek. Pembuatan ListView komplek dilakukan dengan Custom ListView.

Pada contoh dibawah ini, kita akan membuat layout menggunakan listview Custom, Langkahnya seperti berikut ini:

1. Pertama jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project

Name → ListViewCustom

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ ListViewCustom

Language → Java

Minimum API Level → API 16 → Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini

3. Buka dan ubah script MainActivity.java menjadi seperti gambar di bawah ini

4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

4. Membuat Custom ListView Komplek

Custom ListView merupakan ListView dengan item yang bisa kita buat sesuai selera, misalnya item yang memiliki atribut foto, nama, dan keterangan. Item yang custom seperti itu dapat dibuat dan diatur oleh class Adapter. Contoh Item pada Custom ListView bisa di lihat seperti gambar di bawah ini:

Pada contoh dibawah ini, kita akan membuat layout menggunakan Custom ListView Komplek, Langkahnya seperti berikut ini:

1. Pertama jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project

Name → CustomListViewKomplek

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ CustomListViewKomplek

Language → Java

Minimum API Level → API 16 → Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml dan rubah Namanya menjadi layout.xml

Untuk membuat Custom ListView, kita buat terlebih dahulu layout-layoutnya. Kita membutuhkan 2 layout, yaitu layout halaman yang menampilkan ListView dan layout item untuk Adapter. Layout halaman kita buat dengan membuat file layout.xml di dalam folder layout dengan isi seperti ini

3. Layout item untuk Adapter kita buat dengan membuat file item.xml di dalam folder layout dengan isi seperti ini :

4. Kemudian kita siapkan gambar yang menjadi icon dari item ListView. Saya pakai gambar icon makanan seperti ini dengan ukuran 48 x 48 px (panjang x lebar harus sama). Kita simpan gambar pada folder drawable dengan nama file hurup kecil semua .png kalian bisa download icon nya di http://flaticon.com/

5. Kemudian kita buat sebuah class data model dari item ListView yang bernama class Menu. Object dari class ini akan menyimpan data-data yang akan ditampilkan pada item dari ListView. Sebuah object dari class Menu akan ditampilkan pada sebuah item dari ListView. Kita buat class yang bernama Menu.java dengan isi class sebagai berikut.

6. Kemudian kita buat class Adapter. Class Adapter adalah class yang akan membuat dan mengatur item-item dari ListView. Class ini mengkonversi data dari Object Menu menjadi item dari ListView. Kita buat class yang bermama ListAdapter.java dengan isi class sebagai berikut :

7. Kemudian kita buat class MainActivity (class ini biasanya sudah dibuat otomatis pada project) sebagai class controller yang mengelola pembuatan Custom ListView. Buat class MainActivity.java dengan isi sebagai berikut :

Pada class tersebut kita membuat ArrayList yang berisi object-object dari Menu. ArrayList ini menjadi kumpulan data yang akan ditampilkan pada ListView. Di bawahnya ada object dari class ListAdapter yang bernama adapter. Object ini yang akan dimasukkan pada object dari ListView pada fungsi setAdapter(adapter).

ListView dapat mengenali beberapa event, salah satunya adalah event click. Masing-masing item dari ListView dapat menangkap event click dan memberikan reaksi terhadap event tersebut. Kita akan menangkap event tersebut dan memberikan reaksi sederhana dengan menampilkan sebuah kalimat. Jika project dijalankan, maka ListView akan tampil seperti ini.

· MENGGUNAKAN GRIDVIEW

GridView adalah salah satu container, yang digunakan untuk menampilkan konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang ditampilkan secara Grid atau Kotak-kotak.

Penjelasan pada atribut-atribut yang digunakan:

Ø android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.

Ø android:gravity : Menentukan gravitasi di dalam setiap sel.

Ø android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.

Ø android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.

Ø android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.

Ø android:numColumns : Menentukan berapa kolom yang akan ditampilkan.

Pada contoh dibawah ini, kita akan membuat layout menggunakan GridView, Langkahnya seperti berikut ini:

1. Pertama jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project

Name → GridView

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ GridView

Language → Java

Minimum API Level → API 16 → Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini

3. Buka dan ubah script MainActivity.java menjadi seperti gambar di bawah ini

4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

Membuat GridView Custom

Hal-hal yang akan di butuhkan disini adalah 3 java class yang mana dua di antara nya adalah class activity yaitu MainActivity.java dan ZoomActivity.java dan satu sisanya adalah Adaptor yaitu GridAdapter.java, 3 layout XML yang mana dua di antaranya adalah layout activity yaitu activity_main.xml dan activity_zoom.xml dan satu sisanya sebagai layout custom Gridview nya yaitu custom_grid.xml . Kemudian 15 buah icon yang semuanya bisa kalian download dari flaticon.com

File ZoomActivity disini berfungsi untuk menerima intent. Intent ini akan menghantarkan item-item dari Gridview pada MainActivity menuju ke ZoomActivity, yang mana disini kita membuat gambar akan menjadi besar saat di lihat pada activity ZoomActivity

1. Pertama jalankan aplikasi IDE Android Studio, caranya :

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project

Name → GridViewCustom

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ GridViewCustom

Language → Java

Minimum API Level → API 16 → Klik Finish

2. Copy semua Icon yang telah di download ke dalam folder drawable

3. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini

Beberapa penjelasan mengenai atribut-atribut pada elemen Gridview di atas:

Ø android:gravity="center_horizontal|center_vertical" berguna untuk memposisikan item berada di tengah-tengah secara horizontal maupun vertical.

Ø android:horizontalSpacing="10dp" memberikan jarak horizontal antara satu item dengan item di sebelahnya.

Ø android:verticalSpacing="20dp" memberikan jarak vertical antara satu item dengan item di bawahnya.

Ø android:numColumns="3" adalah penentuan jumlah kolomnya.

Ø android:listSelector="#FF03DAC5" ini akan memberikan warna pada item yang di pilih/klik.

4. Berikutnya buatlah sebuah layout sebagai custom layout dari Gridview yang nantinya akan di inflate melalui file java adaptor. Seperti yang sudah di jelaskan di atas, disini kita berikan nama custom_grid.xml. Layout ini berisi 2 buah komponen yaitu sebuah ImageView untuk penempatan icon dari item-itemnya dan sebuah TextView untuk penempatan teks dari item-itemnya. Berikut isi dari layout ini.

5. Selanjutnya adalah membuat adapter nya, yang kita namakan GridAdapter.java dalam contoh ini. Layout custom_grid.xml di inflate di dalam file ini, kemudian adaptor ini akan menghubungkan layout tersebut ke MainActivity.java. Ya.. sesuai namanya, begitulah fungsinya. Berikut dibawah isi dari file java ini.

6. Sebelum membuat activity baru, terlebih dahulu kita akan melakukan koding yang di butuhkan pada MainActivity.java. Pertama-tama dengan membuat integer untuk ke delapan icon-icon dengan memanggil sumber resource nya, lalu membuat String sebagai nama-nama dari delapan icon tersebut, kemudian menghubungkan keseluruhan dengan adaptor. Untuk metode klik pada setiap item, seperti yang di jelaskan sebelumnya di atas; setiap item yang di pilih/klik akan di hantarkan ke activity ZoomActivity mengunakan intent.

7. Kemudian buat activity baru, yaitu ZoomActivity.java dengan layout nya activity_zoom.xml. Pada layout ini juga harus berisi 2 komponen seperti pada activity_main.xml, yaitu ImageView dan Textview. Namun disini tentu kita memberikan atribut ukuran yang lebih besar tentunya. Lalu pada ZoomActivity.java kita hanya perlu menyambut intent dari MainActivity.java. Berikut isi lengkap dari kedua file ini

activity_zoom.xml

ZoomActivity.java

8. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

· MENGGUNAKAN CONSTRAINLAYOUT

Constraint layout merupakan layout terbaru dari android. Layout ini berbasis relative layout, namun mempunyai tingkat kemudahan yang lebih baik dalam penggunaannya. Hal ini dikarenakan, contraint layout dapat digunakan dengan baik pada design mode didalam Android Studio. Setiap item pada constraint layout memiliki 4 arah constraint yaitu top, left, right, dan bottom. Ke empat arah ini memiliki sebuah connection source yang dapat ditarik ke parent atau ke objek lain. Perhatikan gambar di bawah ini.

Sebenarnya Constraint Layout mirip dengan Relative Layout, karena letak View bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya. Contohnya di Relative Layout kita bisa meletakkan sebuah View di atas, bawah, atau samping View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.

Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiap sisinya, yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb. Tali tersebut wajib kita “ikatkan” kepada anchor point atau suatu titik yang dapat berupa sisi dari Parent Layout, View lain, ataupun titik bantu (helper) yang bisa kita buat sendiri.

ConstraintLayout merupakan salah satu komponen ViewGroup yang dapat kita gunakan untuk menyusun tampilan aplikasi yang kompleks tanpa adanya nested layout. ConstraintLayout tersedia dengan dukungan kompatibilitas mulai dari Android 2.3 (API Level 9) sampai dengan yang terbaru.

ConstraintLayout memiliki kesamaan dengan RelativeLayout. Dalam penggunaan semua view yang berada di dalamnya disusun berhubungan antara parent dan view lainnya. Tapi ConstraintLayout lebih fleksibel dari RelativeLayout dan mudah digunakan dengan dukungan Layout Editor pada Android Studio. Kita bisa menambah view baru ke dalam ConstraintLayout. Kita gunakan drag and drop di Layout Editor yang berada pada tab Design atau dengan menambahnya secara manual melalui tab Text. Kita perlu menentukan posisi dari view atau bagaimana agar view tersebut terhubung dengan parent layout atau view lainnya. Mengapa demikian?, Karena setelah ditambahkan, view tersebut tidak memiliki constraint yang menghubungkannya dengan parent layout atau view lainnya. Sehingga ketika dijalankan, posisi dari view tersebut akan berada di bagian atas sebelah kiri.

Berbeda ceritanya dengan RelativeLayout. Saat kita ingin menentukan posisi atau menghubungkan dua buah view, kita bisa menggunakan attribute seperti layout_below atau layout_above. Nah untuk ConstraintLayout kita akan menggunakan constraint sebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan view lainnya sesuai harapan kita.

Constraint

Setiap view setidaknya memiliki satu vertikal dan horizontal constraint. Misal kita memiliki sebuah layout dengan tampilan pada Layout Editor seperti berikut :

Susunan tampilan di atas akan terlihat normal. Tidak ada yang salah di Layout Editor. Tapi jika kita perhatikan seksama, view C diatas hanya memiliki horizontal constraint yang diatur sejajar dengan view A. Sehingga ketika jika kita coba menjalankannya, sama seperti yang disebutkan diatas, maka posisi dari view C akan berada di posisi atas seperti berikut:

Berbeda jika kita menambahkan vertikal constraint pada view C yang diatur terikat dengan view A seperti berikut:

Ketika dijalankan, apa yang terjadi? Yang tampil akan sesuai dengan apa yang terlihat di Layout Editor.

Konversi berkas layout

Yang menarik, ketika kita mempunyai layout yang sudah dibuat sebelumnya, kita bisa mengubahnya menjadi ConstraintLayout tanpa harus mengubah dan menyesuaikan konfigurasi setiap view yang sudah ada. Wow! Caranya? Ikuti langkah-langkah berikut:

1) Masuk pada bagian Design dari Layout Editor di Android Studio.

2) Pada panel Component Tree, klik kanan pada bagian layout yang dijadikan sebagai parent kemudian pilih Convert LinearLayout to ConstraintLayout.

Gambar di Atas adalah contoh ketika kita ingin mengubah LinearLayout menjadi ConstraintLayout. Perlu kita ketahui sebaiknya fungsi konversi tersebut digunakan untuk mengkonversi layout yang tidak terlalu kompleks. Jika kamu punya layout yang kompleks sebaiknya ubalah secara manual untuk menghindari kesalahan konversi yang bisa saja terjadi. Ini menyebabkan kita perlu usaha yang lebih untuk menyelesaikan kesalahan konversi tersebut.

Menambah dan Menghapus Constraint

Seperti yang sudah dijelaskan sebelumnya, setiap view di dalam ConstraintLayout wajib memiliki constraint untuk terhubung dengan parent atau view lainnya. Lalu bagaimana cara menambahkannya?

1) Drag view yang ingin ditambahkan dari panel Palette ke dalam editor.

2) View yang sudah ditambahkan akan memiliki anchor point pada setiap sisi yang akan kita gunakan untuk membuat constraint baru seperti berikut:

3) Lanjut, untuk menambahkan constraint, klik anchor point yang berada pada view kemudian arahkan ke parent atau view lainnya seperti berikut:

4) Setelah kita menambahkan constraint untuk sebuah view, secara default akan terdapat margin yang memisahkan antara view dan parent atau view lain yang terikat dengan view tersebut, secara default margin memiliki nilai 8dp.

Ketika ingin menambahkan constraint untuk setiap view, kita perlu tahu beberapa aturan berikut:

a. Seperti yang disebutkan sebelumnya, setiap view wajib memiliki setidaknya satu vertikal dan horizontal constraint.

b. Kita hanya bisa mengaitkan antar view dengan orientasi yang sama. Misal, anchor point bagian atas hanya bisa dikaitkan dengan anchor point bagian atas atau bawah dari view lainnya, kita tidak bisa mengaitkannya dengan anchor point bagian kiri atau kanan.

c. Setiap constraint hanya bisa digunakan untuk mengaitkannya satu anchor point, tapi kita bisa menggunakan satu anchor point untuk beberapa constraint dari view lainnya

Untuk menghapus constraint yang sudah ditambahkan, klik view kemudian klik anchor point dari view tersebut seperti berikut:

Untuk menghapus sekaligus semua constraint dari sebuah view, kamu bisa memilih view yang ingin constraintnya dihapus. Lalu klik icon yang berada di bagian sisi kiri bawah seperti berikut:

Namun jika ingin menghapus semua constraint untuk setiap view yang berada di dalam ConstraintLayout bisa dengan memilih setiap view beserta parent layoutnya yang berada pada panel Component Tree kemudian pilih Clear Constraints of Selection seperti berikut:

Mengatur Constraint Bias

Let’s say kita menambahkan dua constraint untuk vertical constraint dengan ukuran view yang memiliki nilai tetap atau berdasarkan content yang berada di dalamnya (wrap content). Posisi dari view tersebut akan berada di tengah yang secara default memiliki bias 50%.

Kita bisa mengatur nilai dari bias untuk merubah posisi view tersebut dengan menggunakan bias slider yang berada pada panel attribute atau langsung menggesernya seperti berikut:

Jika kita ingin menyesuaikan ukuran size dengan mengikuti ukuran parent atau view yang terikat, kamu bisa mengubah konfigurasi layout_width menjadi match_contraint

Seperti yang telah dijelaskan di atas ConstraintLayout akan sangat membantu kita dalam membangun tampilan aplikasi yang cukup kompleks. Kita cukup terbantu dengan Layout editor dalam menggunakannya. Dibawah ini kita kan membuat sebuah aplikasi menggunakan ConstraintLayout, Langkah demi langkahnya dapat kita ikuti seperti berikut ini: