Nurul Huda
Nurul Huda
  1. Beranda ›
  2. Android ›
  3. Kotlin ›
  4. Aplikasi Pertama
  5. › Buat User Interface Sederhana

Buat User Interface Sederhana

Buat User Interface Sederhana

Daftar Isi

Prakata

Pada tutorial kotlin kali ini kita akan mendemonstrasikan langkah-langkah untuk membuat UI sederhana dengan Android Studio. Tampilan akhir yang akan kita buat adalah sebagai berikut:

Umumnya, tampilan user interface pada android didefinisikan dalam bentuk XML yang terdiri dari susunan hirarki ViewGroup dan View. View dalam android adalah Widget: semisal Button, TextBox, Label, dan sebagainya. Ada pun ViewGroup, ia adalah layout yang menjadi kontainer untuk menghimpun berbagai macam Widget di dalamnya. Berikut adalah ilustrasi susunan user interface pada aplikasi android yang terdiri dari hirarki ViewGroup dan View.

Gambar diambil dari dokumentasi android [1].

Persiapan Editor

Untuk mengikuti tutorial kali ini, pastikan bahwa anda telah memasang Android Studio 3.0 atau yang terbaru dan telah mengikuti tutorial sebelumnya yaitu membuat projek baru di Android Studio;

Buka activity_main.xml

Persiapan pertama: buka file activity_main.xml.

  1. Pada project window, buka file app > res > layout > activity_main.xml.
  2. Jika anda mendapati editor anda menampilkan kode xml, maka klik tab Design di bagian bawah.

Aktifkan Mode Blueprint

Anda akan mendapati layout editor dengan menampilkan dua mode tampilan: yaitu Design dan Blueprint. Anda harus memilih mode Blueprint saja agar bisa memudahkan untuk mengikuti tutorial kali ini. Untuk mengaktifkan mode Blueprint, klik tombol tombol design surface di bagian toolbar atas lalu pilih Blueprint.

Tampilkan Semua Constraint

Caranya adalah dengan menekan tombol Show show pada toolbar lalu pilih Show All Constraint.

Disable Auto Connection to Parent

Langkah selanjutnya pastikan fitur Auto Connection to Parent dalam keadaan non-aktif. Caranya adalah dengan memastikan bawha tombol magnet di bagian toolbar dalam keadaan tercoreng: .

Atur Default Margin

Selanjutnya atur default margin. Nilai bawaannya adalah 8dp. Anda bisa mengganti dengan berbagai macam pilihan. Dalam tutorial ini, silakan pilih 16dp sebagai margin default. Nantinya ketika kita membuat constraint, nilai inilah yang akan menjadi nilai bawaannya.

Pilih Device Preview

Untuk menyamakan settingan editor dengan kami, silakan untuk Device Preview pilih 5.5, 1440 × 2560, 560 dpi (Pixel XL).

Hasil

Demikian penampakan layout editor setelah berbagai persiapan di atas. Langkah selanjutnya kita akan mulai mengatur dan menambahkan widget.

Hapus Text View

Kita akan membuat tampilan baru. Untuk layout-nya kita tidak perlu ganti karena secara default sudah menggunakan ConstraintLayout. Akan tetapi untuk widget-nya,kita akan kosongkan dan tata ulang.

Untuk menghapus TextView, silakan klik widget tersebut lalu tekan tombol Delete pada keyboard.

Setelahnya layout kita akan nampak kosong seperti ini:

Tambahkan TextBox

Selanjutnya kita akan tambahkan PlainText. PlainText adalah sebuah TextBox yang hanya memungkinkan user untuk menginputkan data plain text saja.

Caranya adalah pada panel Pallete, klik group Text, lalu drag PlainText ke dalam canvas.

Buat Constraint TextBox

Lalu klik widget PlainText tersebut sehingga aktif seperti pada gambar di bawah:

Perhatikan 4 lingkaran yang berada di tiap sisi widget. Tugas kita selanjutnya adalah membuat 2 constraint baru pada lingkaran atas dan lingkaran kiri dengan cara menariknya ke luar. Anchor pada sisi atas kita tarik ke atas hingga menyentuh bagian parent, dan anchor pada sisi kiri kita tarik ke sebelah kiri hingga menyentuh bagian parent.

Setelah Anchor Ditarik

Setelah 2 anchor tersebut ditarik, hasilnya akan menjadi seperti ini:

Tambahkan Button

Kita tinggalkan dulu untuk PlainText. Selanjutnya kita akan menambahkan satu buah tombol di sebelah kanan PlainText. Caranya sama seperti langkah sebelumnya:

  1. Pada panel Pallete, pilih grup Buttons
  2. Klik dan tarik widget Button ke dalam canvas

Buat Constraint Untuk Button

Selanjutnya kita buat constraint untuk button agar dia tampil relativ terhadap PlainText di sebelah kirinya. Caranya sama seperti langkah sebelumnya yaitu:

  1. Klik button hingga ia aktif.
  2. Tarik anchor sisi kiri Button hingga terhubung ke sisi kanan dari PlainText.

NB: perthatikan bahwa jarak margin masing-masing adalah 16dp, sesuai dengan yang telah kita atur sebelumnya. Dan 16dp ini hanya nilai margin default, kita tetap bisa ubah nilainya secara independen pada masing-masing widget.

Hubungkan BaseLine Button ke TextBox

Selanjutnya kita akan membuat Button sejajar secara horizontal dengan PlainText. Akan tetapi yang kita jadikan acuan sejajar adalah baseline. Bukan bottom atau sisi bawah dari Button mau pun PlainText. Karena kalau yang jadi acuan sejajar adalah sisi bawah, maka tampilannya akan terlihat aneh dan menyalahi prinsip visual karena Button sendiri memiliki padding.

Tampilkan BaseLine

Aktifkan dulu baseline dari Button dengan cara:

  1. Klik kanan Button.
  2. Klik show baseline.

Tarik dan Hubungkan BaseLine Button

Setelah baseline pada widget Button berhasil diaktifkan. Maka silakan tarik baseline Button tersebut ke kiri hingga terhubung dengan baseline dari widget PlainText.

Setelah BaseLine terhubung

Berikut adalah penampakan setelah baseline kedua widget tersebut terhubung:

Hasil Dalam Mode Design

Dan jika kita aktifkan papan editor dalam mode design, tampilannya menjadi lebih jelas lagi sebagaimana pada gambar di bawah:

Ubah Teks Pada TextBox dan Button

Kita saksikan bahwa dua widget yang sudah kita tambahkan masih menampilkan text bawaan. Yaitu Name untuk PlainText dan BUTTON untuk Button. Nah, sekarang kita akan mengganti teks tersebut menjadi Tulis Pesan untuk PlainText dan Kirim untuk Button.

Ikuti langkah-langkah berikut:

  1. Buka file app > res > values > strings.xml.

    Setelah anda buka file, klik tombol Open Editor untuk memudahkan dalam menambahkan key dan string baru.

  2. Tambah Key Baru Untuk TextBox dan Button

  3. Key dan String Untuk TextBox

  4. Key dan String Untuk Button

  5. Atur TextBox Untuk Menggunakan Key String edit_message

    Klik TextBox. Lalu pada panel Attributes, hapus text “Name” dan kosongkan. Lalu isi property hint dengan mengklik tombol Pick a Resource tombol pick a resource



    Pilih key edit_message yang sebelumnya sudah kita buat.

  6. Atur Button Untuk Menggunakan Key String button_send

    Sekarang untuk yang Button. Caranya sama seperti sebelumnya. Yaitu: klik Button. Lalu pada panel Attributes, hapus text “Name” dan kosongkan. Lalu isi property text dengan mengklik tombol Pick a Resource tombol pick a resource.



    Pilih key button_send yang sebelumnya sudah kita buat. Lalu klik OK.

Hasil Perubahaan Teks

Setelah nilai text dan hint pada PlainText / TextBox kita ubah, begitu juga dengan attribute text pada widget Button. Maka beginilah hasil akhirnya dalam mode tampilan Design.

Membuat TextBox Menjadi Responsive

Kita perhatikan bahwasanya di sisi sebelah kanan tombol Kirim terdapat space kosong. Space ini semakin besar jika dibuka di resolusi hp yang besar. Atau anda coba dengan merotasi ponsel anda dan melihat dalam mode landscape.

Pada langkah ini, kita akan membuat TextBox tersebut menjadi responsive. Yaitu kita akan menaruh Button di sebelah kanan, lalu menjadikan TextBox memenuhi ruang kosong yang ada di antaranya.

Aktifkan Mode BluePrint

Jika anda dalam mode Design, jangan lupa untuk mengembalikan ke mode Blueprint.

Select Semua Komponen

Lalu select semua komponen atau widget. Dengan mengklik salah satu widget, lalu tahan tombol Shift, lalu klik widget yang lainnya sambil masih menekan tombol Shift.

Berikut ini adalah ilustrasi ketika 2 widget semuanya dalam keadaan aktif ter-select.

Create Horizontal Chain

Setelah itu kita buat horizontal chain. Caranya adalah:

  1. Klik kanan
  2. Arahkan kursor pada group Chain, lalu klik pilihan Create Horizontal Chain

Setelah itu widget Button akan berada di posisi sebelah kanan.

Atur Margin Right dari Button

Agar jarak antara Button dan layar menjadi seimbang, maka kita atur margin right-nya menjadi 16dp:

  1. Select Button
  2. Pilih bagian Layout pada panel Attributes.
  3. Atur margin-right menjadi 16dp.

Atur TextBox Menjadi Match Constraints

Setelah itu kita atur widget TextBox agar memenuhi ruang kosong yang tersisa di sebelah kanannya dengan mengubah width menjadi Match Constraints.

  1. Select TextBox / PlainText
  2. Pilih bagian Layout pada panel Attributes
  3. Pada bagian width indicator, Klik 2 kali

Beginilah ilustrasi setelah width indicator diklik sebanyak 2 kali dan setelah panjang TextBox menjadi Match Constraints.

Hasil Akhir Aplikasi

Setelah semuanya selesai, beginilah kira-kira hasil akhirnya.

Kode XML Lengkap

Jika anda mengalami kesulitan dan atau melakukan kesalahan dalam mengikuti tutorial ini, maka silakan cek kode XML di bawah ini untuk memastikan di mana letak perbedaannya dengan workspace anda. Oiya, untuk urutan attribute yang tidak sama, maka itu tidak masalah selama nilainya tetap sama.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="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_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="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" />
</androidx.constraintlayout.widget.ConstraintLayout>

Pembahasan Selanjutnya

Untuk pembahasan selanjutnya kita akan membuat text tersebut terhubung dengan activity selanjutnya. Sehingga ketika diklik, dia akan menampilkan Activity baru.

Simak pembahasannya di Menampilkan Activity Baru.

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.

Belajar Ngoding di Udemy