Advertisement
  1. Code
  2. Android SDK
Code

Panduan Layout Android untuk Pemula

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)

Sementara Activity menangani interaksi pengguna dengan aplikasi Anda, Layout menentukan bagaimana tampilan aplikasinya. Dalam posting ini, Anda akan belajar bagaimana layout mendefinisikan struktur visual untuk antarmuka pengguna, seperti UI untuk widget aktivitas atau aplikasi.

Layout

File Layout adalah file XML yang menggambarkan GUI layar aplikasi Anda. Untuk contoh ini, kita akan membuat layout linier, yang digunakan untuk menampilkan komponen GUI berdampingan. Komponen-komponen ini dapat ditampilkan secara vertikal atau horizontal. Ketika ditampilkan secara horizontal, mereka ditampilkan dalam satu baris. Ketika ditampilkan secara vertikal, mereka ditampilkan dalam satu kolom.

Berikut adalah contoh tampilan layout linear.

Pada gambar di bawah ini, Anda dapat melihat kodenya, dan bagaimana tampilannya pada perangkat Android.

how the code displays on an Android device

Layout dimulai dengan deklarasi XML. Menentukan versi XML dan pengkodean.

Baris berikutnya adalah tag pembuka untuk layout linier. Di dalamnya, Anda memiliki garis yang terlihat seperti ini:

Ini menentukan namespace XML, yang digunakan untuk memberikan nama unik untuk elemen dan atribut dalam dokumen XML. xmlns:android di sini menjelaskan namespace Android. Sistem penempatan nama ini dipilih oleh Google untuk membantu Android Studio menangani kesalahan selama waktu kompilasi. Namespace Android membantu membedakan widget Android resmi dari widget kustom. Misalnya, ini memungkinkan Anda membedakan antara widget textview kustom dan widget textview Android. URL namespacenya adalah http://schemas.android.com/apk/res/android.

Namespace berikutnya—xmlns:tools—memberi Anda akses ke atribut tools. Ini bukan namespace default: Anda dapat membangun aplikasi Android tanpa menggunakannya. Namun, menggunakannya membantu Anda menambahkan metadata ke file sumber daya Anda yang membantu dalam manipulasi dan rendering layout di Design View. Saat mereferensikan elemen atau atribut yang disediakan oleh atribut alat, Anda harus menambahkan awalan alat. Saya akan jelaskan nanti bagaimana kita menggunakan atribut tool dalam kode ini.

Untuk sekarang, mari kita lihat bagian selanjutnya

Atribut ini digunakan untuk menentukan lebar dan tinggi layout. Mereka juga menyatakan jumlah padding yang akan digunakan dan apakah komponen harus ditempatkan secara vertikal atau horizontal. Di sini, orientasi vertikal dipilih.

Lebar dan Tinggi

android:layout_width dan android:layout_height digunakan untuk menentukan lebar dan tinggi yang akan digunakan untuk komponen layout. Anda dapat menggunakan nilai wrap_content atau match_parent untuk menentukan lebar dan tinggi komponen Anda. wrap_content berarti layout (atau tampilan) harus cukup besar untuk konten. match_parent berarti harus selebar layout induk.

Padding

Padding adalah ruang antara tampilan atau layout dan perbatasannya. Saat Anda menggunakan android:padding, ruang di keempat sisi tampilan atau layout akan memiliki pengukuran yang ditentukan. Jika Anda ingin mengontrol masing-masing bagian padding secara terpisah, Anda dapat menggunakan android:paddingBottom, android:paddingLeft, android:paddingRight, and android:paddingTop. Perhatikan bahwa nilai-nilai ini ditentukan dalam "dp" —density-independent pixel. Ada bahasan lebih lanjut tentang ini!

Margin

Sementara padding diterapkan pada layout atau tampilan dan perbatasannya (dalam komponen), margin diterapkan pada layout atau tampilan perbatasan dan komponen sekitarnya lainnya di luar komponen. Anda dapat menggunakan android:layout_margin untuk menentukan margin di semua sisi sekaligus, atau Anda dapat mengontrol masing-masing bagian padding secara terpisah dengan android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, dan android:layout_marginTop. Ini juga ditentukan dalam dp.

Apa Itu dp?

Density-independent pixel, atau dp untuk singkatnya, adalah unit abstrak yang didasarkan pada kepadatan fisik layar. Density-independent pixel digunakan saat mendefinisikan layout UI. Digunakan untuk mengekspresikan dimensi layout atau posisi dengan cara yang tidak tergantung kepadatan. Anda dapat membaca lebih lanjut tentang independensi kepadatan di Android di sini.

Context

Atribut context digunakan untuk menyatakan aktivitas yang dikaitkan dengan layout secara default. Di sini Anda dapat melihat bahwa layout sampel dikaitkan dengan MainActivity.

Anda juga dapat menulis ini dalam bentuk yang lebih pendek seperti:

Ini hanya digunakan saat bekerja di Design View, karena layout dapat dikaitkan dengan lebih dari satu activity.

Child Component

Layout mengandung child component. Sebenarnya, itulah tujuan keseluruhan mereka: untuk mengatur dan menampilkan komponen lain.

Mari menambahkan beberapa komponen ke layout linier — dimulai dengan button view.

Kita juga akan menambahkan text view, yang memiliki properti yang sangat mirip dengan button view.

Kita telah membahas android:layout_height dan android:layout_width, jadi sekarang mari kita lihat yang lainnya.

ID Komponen

Properti android:id digunakan untuk memberi komponen nama pengenal. Ini memungkinkan Anda untuk mengakses komponen Anda dari dalam kode Java suatu activity, menggunakan metode findViewById().

Teks Komponen

android:text digunakan untuk memberitahu Android komponen teks apa yang harus ditampilkan. Dalam hal button view, Tombol teks akan ditampilkan.

Mari kita jalankan kode kita sejauh ini dan melihat seperti apa tampilannya.

Android device showing a button on screen

Merekapitulasi, elemen pertama harus menjadi layout yang akan Anda manfaatkan. Ini dia LinearLayout. Orientasi yang ditentukan memberitahu Android untuk menampilkan komponen dalam layout dalam satu kolom vertikal. Elemen <Button> adalah elemen pertama yang akan ditampilkan. Ini akan mengambil lebar induknya, dan tingginya akan ditentukan oleh konten teksnya.

Elemen kedua adalah text view yang akan ditampilkan di bawah tombol. Baik tinggi dan lebar akan dibatasi pada tinggi dan lebar konten.

Sumber Daya String

Dalam contoh kita di atas, kita menyalin kode teks untuk text view menggunakan android:text="This is a text view". Ini bagus ketika Anda memulai sebagai pemula, tetapi itu bukan pendekatan terbaik. Misalkan Anda membuat aplikasi yang sukses besar di Google Play Store, dan Anda tidak ingin membatasi diri hanya pada satu negara atau bahasa. Jika Anda hardcoded semua teks dalam file layout Anda, membuat aplikasi Anda tersedia untuk berbagai bahasa akan sulit. Jadi apa pendekatan terbaik?

Pendekatan terbaik melibatkan Anda meletakkan nilai teks Anda dalam file sumber daya: strings.xml. Ini membuat internasionalisasi untuk aplikasi Anda menjadi mudah. Itu membuatnya lebih mudah untuk membuat perubahan global ke aplikasi Anda karena Anda hanya perlu mengedit satu file.

File strings.xml terletak di folder app/src/main/res/values. Ketika Anda membukanya, itu harus memiliki struktur seperti ini.

Di sini Anda memiliki satu sumber daya string bernama app_name, dengan nilai Tutsplus Upload.

Anda dapat menambahkan sumber daya string lainnya menggunakan struktur yang sama. Untuk tombol dan teks dalam layout Anda, strukturnya dapat terlihat seperti ini.

Untuk menggunakan sumber daya string ini di layout Anda, Anda harus memperbarui bagian teks dari kedua tampilan dengan sumber daya masing-masing.

@string memberitahu Android untuk mencari nilai teks dalam file sumber daya string. Setelah itu adalah nama sumber. Android akan mencari nilai sumber daya yang sesuai dengan nama itu dan menggunakannya untuk komponen Anda.

Setelah selesai, inilah tampilan layout Anda:

Final code and layout on Android device

Kesimpulan

Di pos ini, Anda telah mempelajari beberapa dasar-dasar bekerja dengan layout. Saat Anda membangun aplikasi yang lebih kompleks, Anda akan melihat bagaimana semua bagian saling cocok. Setelah mengikuti pos ini, Anda harus dapat memahami cara bekerja dengan layout linier, tampilan teks dan tombol, dan sumber daya string.

Untuk sementara, lihat beberapa posting keren kita yang lain tentang pengembangan aplikasi Android.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.