Pendahuluan Layout Dasar

Hasil Akhir Tutorial Ini

Dalam tutorial kali ini, insyaallah kita akan mempelajari layout dasar android; LinearLayout, RelativeLayout, dan ConstraintLayout yang mana ConstraintLayout adalah layout yang direkomendasikan oleh Google. Dalam seri tutorial android kali ini, kita akan belajar sambil mempraktikkan dalam bentuk projek sederhana menggunakan kotlin.

Kita akan membuat satu buah user interface yang sama dan identik dengan menggunakan 3 layout yang berbeda. User interface tersebut berupa form yang berisi inputan umum seperti nama, email, nomor telpon, alamat, dan lain-lain. Jika anda mengikuti seri tutorial ini dengan runut dan lancar, harusnya anda akan mendapatkan hasil akhir aplikasi seperti pada Gambar 1:

Gambar 1: hasil seri tutorial ini adalah sebuah aplikasi sederhana untuk mendemonstrasikan layout dasar android menggunakan kotlin

View dan ViewGroup

Telah berlalu sedikit penjelasan tentang View dan ViewGroup dalam seri tutorial membuat user interface android sederhana.

View dan ViewGroup adalah dua penyusun inti user interface dalam android. Layout pada android tersusun dari kumpulan ViewGroup dan View dalam bentuk pohon hirarki seperti ilustrasi pada Gambar 2.

Gambar 2 diambil dari dokumentasi android [1].

Layout pada android harus diawali oleh ViewGroup. ViewGroup ini akan menghimpun berbagai macam View di bawahnya, bahkan ViewGroup bisa memiliki child ViewGroup yang lainnya seperti pada Gambar 2 di atas.

Contoh ViewGroup di antarany: LinearLayout, RelativeLayout, ConstraintLayout dan lain-lain. Ada pun contoh dari View di antaranya: Button, EditText, TextView, ImageView, dan lain sebagainya.

Kita bisa mendefinisikan user interface android dengan dua cara:

• Mendefinisikan layout dalam bentuk xml

  Ini adalah cara paling sederhana dalam mendefinisikan tata letak android. Jika anda tahu sedikit tentang pengembangan web, maka hal ini agak-agak mirip dengan HTML.

  Akan tetapi kita tidak harus mengetik manual layout kita dalam bahasa XML, kita bisa menggunakan fitur Layout Editor pada Android Studio untuk memudahkan kita membuat tata letak layout dengan drag and drop.

• Mendefinisikan layout pada saat runtime

  Kita bisa membuat objek dari class View mau pun ViewGroup pada saat runtime, kita juga bisa memanipulasinya dengan kode program java/kotlin.

Atribut Umum dan Atribut Khusus

Setiap View memiliki atribut. Ada dua macam atribut pada objek View; atribut umum dan atribut khusus. Atribut umum adalah atribut yang tersedia pada semua objek View, semisal atribut id, atribut layout_width, layout_height dan lain sebagainya. Atribut jenis kedua adalah atribut khusus. Yaitu atribut yang hanya dimiliki satu atau lebih objek View yang mana tidak dimiliki objek View yang lainnya.

Resource Id

Setiap objek View bisa memiliki atribut id yang membuatnya terbedakan dari objek selainnya dalam satu pohon hirarki. Atribut id ini bernilai integer, akan tetapi kita mendefinisikannya dalam bentuk nama. Yang kemudian sistem android akan mengkonversinya ke dalam integer dalam objek R.id.

Lihat contoh berikut:

<Button 
        android:id="@+id/tombol_download"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/teks_tombol_download"/>

Dalam contoh di atas, kita mendefinikan view Button dengan id @+id/tombol_download. Simbol @+id/ menginstruksi sistem untuk menambahkan id baru dengan nama tombol_download. Dan dalam kode program kotlin, kita bisa memanggil objek view tersebut dengan kode semisal berikut ini:

val tombolDownload: Button = findViewById(R.id.tombol_download)

Dalam penggunakan RelativeLayout dan ConstraintLayout, memberi atribut id pada setiap widget/view adalah sesuatu yang sangat penting. Karena pengaturan tata letak antar widget/view direferensikan kepada view yang lain. Sehingga view yang dijadikan referensi tersebut harus memiliki identitas unik yaitu atribut id.

Atribut id harus unik dalam satu pohon hirarki layout. Ada pun pada file layout yang berbeda, maka nama id yang sama tidak akan membuat error.

Layout Width dan Layout Height

Di antara atribut umum lain yang dimiliki setiap View adalah layout_width dan layout_height. Kita bisa mengisi dua atribut tersebut dengan setidaknya 3 cara:

• match_parent: lebar atau tinggi view akan sama dengan parent view (alias memenuhi ruang kosong yang ada)
• wrap_content: lebar atau tinggi view menyesuaikan dengan ukuran kontennya
• nilai absolut: kita bisa menentukan menggunakan nilai absolut. Akan tetapi yang direkomendasikan adalah menggunakan satuan dp dan bukan px. Itu karena satuan dp bersifat responsive terhadap resolusi layar yang berbeda, tidak seperti satuan px yang benar-benar bersifat exact.

Layout Params

LayoutParams adalah atribut-atribut turunan dari ViewGroup parent. Misalkan kita menempatkan objek Button di dalam LinearLayout. Maka objek Button tersebut akan memiliki atribut layout_weight yang itu merupakan atribut turunan dari parent layout.

Layout Yang Sering Digunakan

Ada beberapa layout yang sering digunakan dalam pengembangan aplikasi android. Seringnya dalam satu activity kita bisa memadukan lebih dari satu jenis layout sesuai dengan kebutuhan kita. Akan tetapi cara yang disarankan adalah sebisa mungkin kita meminimalkan tingkat kedalaman hirarki layout kita. Karena samakin dalam pohon hirarki layout, semakin besar sumber daya perangkat yang dibutuhkan untuk me-render tampilan.

Linear Layout

Gambar 3: Ilustrasi linear layout (gambar diambil dari dokumentasi resmi android)

LinearLayout adalah layout yang mengorganisir view-view yang ada di dalamnya secara linear baik horizontal mau pun vertical. Seperti ilustrasi pada Gambar 3 di atas.

Relative Layout

RelativeLayout memungkinkan kita untuk mengatur semua children views pada posisi tertentu secara relatif terhadap posisi view yang lainnya. Misalkan saya menempatkan tombol A pada posisi 10dp di sebelah kanan dari parent, dan 10dp bawah parent. Lalu saya menambahkan tombol baru yaitu tombol B pada jarak 20dp di sebelah kanan tombol A.

Constraint Layout

ConstraintLayout secara konsep hampir sama dengan RelativeLayout. Hanya saja ia lebih baru dari RelativeLayout dan memiliki fitur responsive yang lebih bagus, serta mendapat dukungan fitur Layout Editor yang lebih baik. Sehingga kita bisa membangun tata letak aplikasi android kita menggunakan pendekatan drag and drop menjadi lebih mudah tanpa harus mendefinisikan setiap widget dalam dokumen XML secara manual.

Web Layout

Layout lainnya yang sering digunakan adalah Web Layout. Web Layout sering juga disebut sebagai WebView. Yaitu suatu layout yang mirip browser, menggunakan engine chromium, dan bertugas untuk menampilkan dokumen web seperti halnya browser.

Langkah Selanjutnya

Langkah selanjutnya adalah kita akan mulai membuat projek sederhana untuk mempraktikkan 3 layout di atas yaitu; LinearLayout, RelativeLayout dan ConstraintLayout. Kita akan menggunakan ketiganya untuk membuat satu tata letak aplikasi yang sama. Darinya kita bisa mengetahui karakter dari tiap layout, sehingga kedepannya kita bisa memilih dengan tepat layout apa yang cocok untuk membangun satu tata letak tertentu.

Selanjutnya, silakan langsung menuju ke langkah membuat projek baru untuk layout dasar.

Referensi

[1] https://developer.android.com/training/basics/firstapp/building-ui

Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.