Membangun Antarmuka Pengguna Sederhana

Dalam pelajaran ini, Anda membuat layout dalam XML yang berisi satu bidang teks dan satu tombol. Dalam pelajaran berikutnya, aplikasi Anda akan merespons bila tombol ditekan dengan mengirimkan isi bidang teks ke aktivitas lain.

Antarmuka pengguna grafis untuk aplikasi Android dibuat menggunakan hierarki View dan objek ViewGroup. Objek View biasanya berupa widget UI seperti tombol atau bidang teks. Objek ViewGroup adalah kontainer tak terlihat yang mendefinisikan cara tampilan anak diletakkan, misalnya berupa petak atau daftar vertikal.

Android menyediakan kosa kata XML yang terkait dengan subkelas View dan ViewGroup jadi Anda bisa mendefinisikan UI dalam XML dengan menggunakan hierarki elemen UI.

Layout adalah subkelas dari ViewGroup. Dalam latihan ini, Anda akan bekerja dengan sebuah LinearLayout.

Gambar 1. Ilustrasi cara objekViewGroup membentuk cabang dalam layout dan mengandung objek View lainnya.

Membuat Layout Linier

1. Di jendela Proyek Android Studio, buka app> res > layout > activity_main.xml.

   File XML ini mendefinisikan layout aktivitas Anda. File ini mengandung tampilan teks "Hello World" default.

2. Saat Anda membuka file layout, Anda pertama-tama ditampilkan editor desain di Layout Editor. Untuk pelajaran ini, Anda bekerja langsung dengan XML, jadi klik tab Text di bagian bawah jendela untuk beralih ke editor teks.
3. Hapus semua dan sisipkan XML berikut:

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="horizontal">
   </LinearLayout>
   

LinearLayout adalah grup tampilan (subkelas ViewGroup) yang meletakkan tampilan anak dalam orientasi vertikal atau horizontal, seperti yang ditetapkan oleh atribut android:orientation. Setiap anak dari LinearLayout akan muncul di layar dalam urutan penampilannya di XML.

Dua atribut lainnya, android:layout_width dan android:layout_height, diperlukan untuk semua tampilan agar bisa menetapkan ukurannya.

Oleh karena LinearLayout adalah tampilan akar dalam layout ini, ia akan mengisi seluruh area layar yang tersedia untuk aplikasi dengan menyetel lebar dan tingginya ke "match_parent". Nilai ini mendeklarasikan bahwa tampilan itu harus menambah lebar atau tingginya untuk mencocokkan dengan lebar atau tinggi tampilan induknya.

Untuk informasi selengkapnya tentang properti layout, lihat panduan Layout.

Menambahkan Bidang Teks

Di file activity_main.xml, dalam elemen <LinearLayout>, tambahkan elemen <EditText> berikut:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
</LinearLayout>

Abaikan kesalahan yang muncul untuk @string/edit_message; Anda nanti akan memperbaikinya.

Berikut deskripsi atribut di <EditText> yang Anda tambahkan:

android:id

Ini akan menyediakan identifier unik untuk tampilan itu, yang bisa Anda gunakan untuk mengacu ke objek dari kode aplikasi Anda, misalnya untuk membaca dan memanipulasi (ini akan Anda lihat dalam pelajaran berikutnya).

Tanda (@) diperlukan saat Anda mengacu ke suatu objek sumber daya dari XML. Tanda ini diikuti oleh tipe sumber daya (dalam hal ini adalah id), garis miring, kemudian nama sumber daya itu (edit_message).

Objek Sumber Daya

Objek sumber daya adalah nama integer unik yang dikaitkan dengan sumber daya aplikasi, misalnya bitmap, file layout, atau string.

Setiap sumber daya memiliki objek sumber daya terkait yang didefinisikan dalam file R.java proyek. Anda bisa menggunakan nama objek dalam kelas R untuk mengacu ke sumber daya, misalnya bila Anda perlu menetapkan nilai string untuk atribut android:hint . Anda juga bisa membuat ID sumber daya bebas yang Anda kaitkan dengan tampilan yang menggunakan atribut android:id, sehingga memungkinkan Anda untuk mengacu tampilan itu dari kode lainnya.

Alat SDK menghasilkan file R.java setiap kali Anda mengompilasi aplikasi. Anda dilarang memodifikasi file ini secara manual.

Untuk informasi selengkapnya, baca panduan Menyediakan Sumber Daya.

Tanda tambah (+) sebelum tipe sumber daya hanya diperlukan saat Anda mendefinisikan ID sumber daya untuk pertama kali. Saat mengompilasi aplikasi, alat SDK menggunakan nama ID untuk membuat ID sumber daya baru di file R.java proyek yang mengacu ke elemenEditText. Dengan ID sumber daya yang dideklarasikan sekali dengan cara ini, acuan lainnya ke ID tidak memerlukan tanda tambah. Menggunakan tanda tambah ini hanya perlu saat menetapkan ID sumber daya baru dan tidak perlu untuk sumber daya konkret seperti string atau layout. Lihat kotak di samping untuk informasi selengkapnya tentang objek sumber daya.

android:layout_width dan android:layout_height

Daripada menggunakan ukuran tertentu untuk tinggi dan lebar, nilai "wrap_content" akan menetapkan bahwa tampilan ini harus sebesar yang diperlukan untuk mengepaskan materi tampilan itu. Akan tetapi, jika Anda malah menggunakan "match_parent", maka elemen EditText akan mengisi layar itu karena elemen itu akan sesuai dengan ukuran induknya. LinearLayout. Untuk informasi selengkapnya, lihat panduan Layout.

android:hint

Ini adalah string default yang ditampilkan bila bidang teks kosong. Daripada menggunakan string yang telah diprogram atau hard-coded, nilai "@string/edit_message" mengacu ke sumber daya string yang didefinisikan dalam file terpisah. Karena ini mengacu ke sumber daya konkret (bukan sekadar identifier), maka tanda tambah tidak diperlukan. Akan tetapi, karena Anda belum mendefinisikan sumber daya string itu, mula-mula Anda akan melihat kesalahan compiler. Anda akan memperbaikinya dalam bagian berikutnya dengan mendefinisikan string.

Catatan: Sumber daya string ini memiliki nama yang sama dengan ID elemen: edit_message. Akan tetapi, acuan ke sumber daya selalu tercakup oleh tipe sumber daya (misalnya id atau string), jadi menggunakan nama sama tidak akan berakibat tubrukan.

Menambahkan Sumber Daya String

Secara default, proyek Android Anda menyertakan file sumber daya string di res > values > strings.xml. Anda akan menambahkan dua string baru di sini.

1. Dari jendela Project, buka res > values > strings.xml.
2. Tambahkan dua string agar file Anda terlihat seperti ini:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <string name="app_name">My First App</string>
       <string name="edit_message">Enter a message</string>
       <string name="button_send">Send</string>
   </resources>
   

Untuk teks dalam antarmuka pengguna, selalu tetapkan setiap string sebagai sumber daya. Sumber daya string memungkinkan Anda untuk mengelola semua teks UI dalam satu lokasi, yang membuat teks itu lebih mudah ditemukan dan diperbarui. Mengeksternalkan string ini juga memungkinkan Anda untuk melokalkan aplikasi ke bahasa lain dengan menyediakan definisi alternatif untuk setiap sumber daya string.

Untuk informasi selengkapnya tentang penggunaan sumber daya string untuk melokalkan aplikasi Anda ke bahasa lain, lihat kelas Mendukung Perangkat Berbeda.

Menambahkan Tombol

Kembali ke file activity_main.xml dan tambahkan tombol setelah <EditText>. File Anda seharusnya terlihat seperti ini:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <EditText android:id="@+id/edit_message"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:hint="@string/edit_message" />
        <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/button_send" />
</LinearLayout>

Catatan: Tombol ini tidak memerlukan atribut android:id, karena tidak akan diacu dari kode aktivitas.

Layoutnya saat ini sedang didesain sehingga baik widget EditText dan Button hanya sebesar yang diperlukan untuk memasukkan materinya seperti yang ditampilkan dalam gambar 2.

Gambar 2. Widget EditText dan Button memiliki lebar yang ditetapkan sebesar "wrap_content".

Ini tidak masalah untuk tombol, namun lain halnya dengan bidang teks, karena pengguna mungkin akan menulis sesuatu yang lebih panjang. Sebaiknya lebar layar tidak terpakai diisi dengan bidang teks. Ada bisa melakukannya dalam LinearLayout dengan properti bobot yang bisa Anda tetapkan dengan menggunakan atribut android:layout_weight.

Nilai bobot adalah angka yang menetapkan jumlah sisa ruang yang harus dipakai, sesuai dengan jumlah yang terpakai oleh tampilan saudara. Pengertiannya sama dengan jumlah kandungan dalam resep minuman: "2 bagian soda, 1 bagian sirup" artinya dua pertiga minuman ini adalah soda. Misalnya, jika Anda memberi satu tampilan dengan bobot 2 dan tampilan lain dengan bobot 1, jumlahnya adalah 3, sehingga tampilan pertama mengisi 2/3 dari sisa ruang dan tampilan kedua mengisi sisanya. Jika Anda menambahkan tampilan ketiga dan memberinya bobot 1, kemudian tampilan pertama (dengan bobot 2) sekarang menjadi 1/2 dari sisa ruang, sedangkan dua tampilan sisanya masing-masing mendapatkan 1/4.

Bobot default untuk semua tampilan adalah 0, jadi jika Anda menetapkan nilai bobot labih dari 0 untuk salah satu tampilan, maka tampilan itu akan mengisi semua yang tersisa setelah semua tampilan diberikan ruang yang diperlukan.

Membuat Isian Kotak Masukan dalam Lebar Layar

Di activity_main.xml, ubah <EditText> agar atribut terlihat seperti ini:

<EditText android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

Menyetel lebar ke nol (0dp) akan meningkatkan kinerja layout karena menggunakan "wrap_content" sebagai lebar akan mengharuskan sistem untuk menghitung lebar yang pada akhirnya tidak relevan karena nilai bobot memerlukan perhitungan lebar berbeda untuk mengisi sisa ruang.

Gambar 3. Widget EditText mendapatkan semua bobot layout, sehingga akan mengisi sisa ruang dalam LinearLayout.

Seperti inilah file layout activity_main.xml Anda akan ditampilkan bila selesai:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

Menjalankan Aplikasi Anda

Untuk melihat tampilan aplikasi saat ini di perangkat atau emulator Anda, klik Run di bilah alat.

Untuk menambahkan perilaku aplikasi seperti menanggapi tombol dan memulai aktivitas lainnya, lanjutkan ke pelajaran berikutnya.