Cara Membangun Antarmuka Pengguna Sederhana

PAI - Portal Android Indonesia - Cara Membangun Antarmuka Pengguna Sederhana - Dalam pelajaran Ini, Anda akan menggunakan Android Studio Layout Editor untuk membuat layout yang berisi sebuah kotak teks dan sebuah tombol. Pada pelajaran berikutnya, Anda akan membuat aplikasi tersebut merespons tap tombol dengan mengirim konten kotak teks ke activity lain.

Gambar 1. Screenshot layout akhir

Antarmuka pengguna untuk aplikasi Android dibuat menggunakan hierarki layout (objek ViewGroup) dan widget (objek View). Layout adalah kontainer tak terlihat yang mengontrol bagaimana tampilan anak diposisikan pada layar. Widget adalah komponen UI seperti tombol dan kotak teks.

Gambar 2. Ilustrasi tentang cara objek ViewGroup membentuk cabang dalam layout dan memuat objek View

Android menyediakan kosakata XML untuk kelas ViewGroup dan View, sehingga sebagian besar UI Anda didefinisikan dalam file XML. Namun, sebagai ganti mengajari Anda menulis beberapa XML, pelajaran ini menunjukkan kepada Anda cara membuat layout menggunakan Android Studio Layout Editor, yang memudahkan pembuatan layout dengan tampilan seret-dan-letakkan.

Membuka Layout Editor

Catatan : Pelajaran ini mengharapkan Anda untuk menggunakan Android Studio 3.0 dan telah mengikuti pelajaran sebelumnya untuk membuat Project Android.

Untuk memulai, persiapkan ruang kerja Anda seperti berikut :

1. Di jendela Project Android Studio, buka app > res > layout > activity_main.xml.
2. Untuk memberi lebih banyak ruang bagi Layout Editor, sembunyikan jendela Project dengan memilih View > Tool Windows > Project (atau klik Project di sisi kiri Android Studio).
3. Bila editor Anda menampilkan sumber XML, klik tab Design di bagian bawah jendela.
4. Klik Select Design Surface dan pilih Blueprint.
5. Klik Show di toolbar dan pastikan Show Constraints telah dicentang.
6. Pastikan Autoconnect tidak aktif. Tooltip pada toolbar akan tertulis Turn On Autoconnect (karena sekarang Autoconnect tidak aktif).
7. Klik Default Margins di toolbar dan pilih 16 (Anda tetap bisa mengatur margin untuk setiap tampilan nanti).
8. Klik Device in Editor di toolbar dan pilih Pixel XL.

Editor Anda sekarang akan terlihat seperti yang ditunjukkan pada gambar 3.

Gambar 3. Layout Editor menampilkan activity_main.xml

Jendela Component Tree di sisi kiri bawah menunjukkan tampilan hierarki layout. Dalam kasus ini, tampilan root adalah ConstraintLayout, yang hanya berisi satu objek TextView.

ConstraintLayout adalah layout yang mendefinisikan posisi untuk setiap tampilan berdasarkan batas terhadap tampilan saudara dan layout induk. Dengan cara ini, Anda bisa membuat layout sederhana dan kompleks dengan hierarki tampilan datar. Artinya, ini menghindari perlunya layout tersarang (layout di dalam layout, seperti yang ditunjukkan pada gambar 2), yang bisa meningkatkan waktu yang dibutuhkan untuk menggambar UI.

Misalnya, Anda bisa mendeklarasikan layout berikut (di gambar 4):

Gambar 4. Ilustrasi dua tampilan yang diposisikan di dalam ConstraintLayout

• Tampilan A terletak 16dp dari atas layout induk.
• Tampilan A terletak 16dp dari kiri layout induk.
• Tampilan B terletak 16dp di sebelah kanan tampilan A.
• Tampilan B sejajar dengan bagian atas tampilan A.

Pada bagian berikutnya, Anda akan membuat layout yang mirip dengan ini.

Menambahkan kotak teks

• Pertama-tama, Anda harus menghapus semua yang terdapat dalam layout. Jadi klik TextView di jendela Component Tree, kemudian tekan Delete.
• Dari jendela Palette di sebelah kiri, klik Text di panel kiri, lalu seret Plain Text ke dalam editor desain dan letakkan di dekat bagian atas layout. Ini adalah widget EditText yang menerima masukan teks biasa.
• Klik tampilan di editor desain. Anda sekarang bisa melihat tuas pengubah ukuran di setiap sudut (kotak), dan jangkar pembatas di setiap sisi (lingkaran).
• Untuk kontrol yang lebih baik, Anda mungkin perlu melakukan zoom in pada editor menggunakan tombol pada toolbar.
• Klik-dan-tahan jangkar di sisi atas, lalu seret ke atas sampai terkunci ke bagian atas layout dan lepaskan. Itulah pembatas—ia menetapkan tampilan harus 16dp dari atas layout (karena Anda menyetel margin default ke 16dp).
• Demikian pula, buatlah pembatas dari sisi kiri tampilan ke sisi kiri layout.

Hasilnya akan terlihat seperti screenshot di gambar 5.

Gambar 5. Kotak teks dibatasi ke bagian atas dan kiri layout induk

Menambahkan tombol

1. Dari jendela Palette, klik Widgets di panel kiri, lalu seret Button ke dalam editor desain dan letakkan di dekat sisi kanan.
2. Buat pembatas dari sisi kiri tombol ke sisi kanan kotak teks.
3. Untuk membatasi tampilan dalam penjajaran horizontal, Anda perlu membuat pembatas antara garis dasar teks. Jadi klik tombolnya, lalu klik Edit Baseline , yang muncul di editor desain tepat di bawah tampilan yang dipilih. Jangkar garis dasar muncul di dalam tombol. Klik-dan-tahan jangkar ini lalu seret ke jangkar garis dasar yang muncul di kotak teks.

Hasilnya akan terlihat seperti screenshot di gambar 6.

Gambar 6. Tombol dibatasi ke sisi kanan kotak teks dan garis dasarnya

Catatan : Anda juga bisa membuat penjajaran horizontal dengan menggunakan tepi atas atau bawah, tetapi tombolnya memuat pengisi di sekitar gambarnya, sehingga penjajaran visual tidak akan akurat bila Anda menyejajarkan tampilan dengan cara ini.

Mengubah string UI

Untuk melihat pratinjau UI, klik Select Design Surface di toolbar dan pilih Design. Perhatikan bahwa masukan teks sudah terisi dengan "Name" dan tombolnya diberi label "Button." Jadi sekarang Anda akan mengubah string ini.

1. Buka jendela Project lalu buka app > res > values > strings.xml.
2. Ini adalah file sumber daya string, di sini Anda harus menetapkan semua string UI Anda. Melakukan hal ini memungkinkan Anda untuk mengelola semua string UI di satu lokasi, yang mempermudah untuk menemukan, mengupdate, dan melakukan pelokalan (dibandingkan dengan string hard-coding dalam layout atau kode aplikasi).
3. Klik Open editor di bagian atas jendela editor. Ini akan membuka Translations Editor, yang menyediakan antarmuka sederhana untuk menambahkan dan mengedit string default Anda, serta membantu semua string terjemahan tetap teratur.
4. Klik Add Key untuk membuat string baru sebagai "hint text" untuk kotak teks.
   • Masukkan "edit_message" untuk nama kunci.
   • Masukkan "Enter a message" untuk nilainya.
   • Klik OK.
5. Tambahkan kunci lain bernama "button_send" dengan nilai "Send"

Gambar 7. Dialog untuk menambahkan string baru

Sekarang Anda bisa menyetel string ini untuk setiap tampilan. Jadi silakan kembali ke file layout dengan mengklik activity_main.xml di bilah tab, dan tambahkan string seperti berikut :

1. Klik kotak teks di layout dan, bila jendela Attributes belum terlihat di sebelah kanan, klik Attributes di sidebar kanan.
2. Cari properti text (yang saat ini disetel ke "Name") dan hapus nilainya.
3. Cari properti hint lalu klik Pick a Resource di sebelah kanan kotak teks. Pada dialog yang muncul, klik dua kali edit_message dari daftar.
4. Sekarang klik tombol di layout, cari properti text, klik Pick a Resource , lalu pilih button_send.

Membuat ukuran kotak teks yang fleksibel

Untuk membuat layout yang responsif terhadap beragam ukuran layar, Anda sekarang akan merancang kotak teks agar bisa membentang untuk mengisi semua ruang horizontal yang ada (setelah memperhitungkan tombol dan margin).

Sebelum melanjutkan, klik Show di toolbar dan pilih Blueprint.

Gambar 8. Hasil mengklik Center Horizontally

1. Pilih kedua tampilan (klik satu tampilan, tahan Shift dan klik tampilan lain), lalu klik kanan salah satu tampilan dan pilih Chain > Create Horizontal Chain.
2. Rantai adalah pembatas dua arah di antara dua atau beberapa tampilan yang memungkinkan Anda untuk memasang tampilan yang diikat secara bersamaan.
3. Pilih tombol dan buka jendela Attributes. Dengan menggunakan pemeriksa tampilan di bagian atas jendela Attributes, atur margin kanan menjadi 16.
4. Sekarang klik kotak teks untuk melihat atributnya. Klik indikator lebar dua kali sehingga itu disetel ke Match Constraints, seperti yang ditunjukkan oleh keterangan di gambar 9.

Gambar 9. Klik untuk mengubah lebar ke Match Constraints


5. "Match constraints" berarti lebar akan meluas untuk memenuhi definisi batasan dan margin horisontal. Oleh karena itu, kotak teks membentang untuk mengisi ruang horizontal (setelah memperhitungkan tombol dan semua margin).

Sekarang layout sudah selesai dan akan terlihat seperti gambar 10.

Gambar 10. Kotak teks sekarang membentang untuk mengisi ruang yang ada

Bila layout Anda tampaknya tidak berubah seperti yang diharapkan, klik di bawah ini untuk melihat seperti apa tampilan XML Anda yang seharusnya dan bandingkan dengan apa yang Anda lihat di tab Text. (Bila atribut Anda muncul dengan urutan berbeda, tidak apa-apa.)

Lihat XML layout akhir

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myfirstapp.MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:hint="@string/edit_message"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:text="@string/button_send"
        app:layout_constraintBaseline_toBaselineOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/editText" />
</android.support.constraint.ConstraintLayout>

Untuk informasi selengkapnya tentang rantai dan semua hal lain yang bisa Anda lakukan dengan ConstraintLayout, silakan baca Membangun UI Responsif dengan ConstraintLayout.

Menjalankan aplikasi

Bila aplikasi Anda sudah terinstal pada perangkat dari Pelajaran Sebelumnya, cukup klik Apply Changes di toolbar untuk mengupdate aplikasi dengan layout baru. Atau klik Run untuk menginstal dan menjalankan aplikasi. Tombol ini tetap tidak melakukan apa pun. Untuk menjalankan activity lain saat tombol di-tap, lanjutkan ke Pelajaran Berikutnya >>