Android Kotlin #4: Membuat UI Sederhana dengan XML – TextView, Button, EditText

Halo lagi, calon desainer UI Android! 

Di artikel sebelumnya kita sudah belajar Kotlin dasar (variable, fungsi, kelas). Tapi aplikasi kita masih sebatas nampilin teks "Hello Android!" doang. Sekarang kita akan belajar mendandani tampilan aplikasi dengan menambahkan komponen-komponen UI seperti kotak teks (EditText), tombol (Button), dan label (TextView). Selain itu, kita juga akan belajar ConstraintLayout yang fleksibel untuk mengatur posisi komponen, dan menangani klik tombol agar aplikasi kita jadi interaktif.

🤣 Kenapa UI desainer susah tidur? Karena mereka sibuk mikirin constraint (batasan) biar tampilannya rapi! 😆

Langkah 0: Buka Project WisataApp

Buka Android Studio, lalu buka project WisataApp yang sudah kita buat di artikel #2. Pastikan project bisa dibuka dan tidak error.

📐 Langkah 1: Mengenal ConstraintLayout

Buka file activity_main.xml yang ada di folder res/layout. Saat ini file itu tampil dalam mode Design (visual). Tapi kita akan belajar manual dengan menulis XML langsung.

ConstraintLayout adalah layout (wadah) yang paling populer di Android. Dia memungkinkan kita menempatkan komponen di posisi tertentu dengan mengaitkan (constrain) ke tepi layout atau ke komponen lain. Ibaratnya, kita bilang: "Tombol ini harus selalu 16 pixel dari tepi kiri, dan 8 pixel di bawah TextView". Nanti kalau layar HP berubah ukuran, posisinya tetap proporsional.

Lihat kode XML yang sudah ada:

<?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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Perhatikan bagian app:layout_constraint... . Di sini TextView dipaksa berada di tengah secara vertikal dan horizontal karena semua constrain-nya diarahkan ke parent (layout induk).

Langkah 2: Menambahkan EditText (Kotak Input)

EditText adalah komponen untuk menerima input dari pengguna, misalnya nama tempat wisata. Kita akan tambahkan di atas TextView.

Caranya: di tab Code (bukan Design), tambahkan kode berikut sebelum TextView (atau di mana saja asalkan masih di dalam ConstraintLayout).

<EditText
    android:id="@+id/editTextNama"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Masukkan nama tempat wisata"
    android:inputType="text"
    android:layout_margin="16dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

Penjelasan:

• android:id: memberi nama unik biar bisa dipanggil di kode Kotlin. Format @+id/....
• android:layout_width="match_parent": lebarnya mengikuti lebar induk (parent).
• android:layout_height="wrap_content": tingginya sebesar konten (kalau kosong, ya kecil).
• android:hint: teks abu-abu sebagai petunjuk (akan hilang saat diketik).
• android:inputType: menentukan jenis keyboard (text, number, email, dll).
• android:layout_margin: jarak dari tepi ke komponen (16dp).
• app:layout_constraintTop_toTopOf="parent": menempel ke tepi atas parent.
• app:layout_constraintStart_toStartOf="parent": menempel ke tepi kiri.
• app:layout_constraintEnd_toEndOf="parent": menempel ke tepi kanan.

Sekarang EditText sudah ada di bagian atas layar.

Langkah 3: Menambahkan Button (Tombol)

Selanjutnya kita tambahkan tombol di bawah EditText. Tambahkan kode ini setelah EditText (sebelum TextView).

<Button
    android:id="@+id/buttonSapa"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Sapa"
    android:layout_marginTop="16dp"
    app:layout_constraintTop_toBottomOf="@id/editTextNama"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

Perhatikan:

• app:layout_constraintTop_toBottomOf="@id/editTextNama": tombol ini ditempatkan di bawah EditText (yang id-nya editTextNama).
• android:text: teks di tombol.

Langkah 4: Memperbarui TextView

Sekarang TextView kita masih di tengah layar. Kita ingin TextView berada di bawah tombol. Ubah constrain TextView dari yang tadinya ke parent menjadi ke tombol.

Ganti bagian TextView menjadi seperti ini (perhatikan bagian app:layout_constraintTop_toBottomOf):

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello Android!"
    android:layout_marginTop="16dp"
    app:layout_constraintTop_toBottomOf="@id/buttonSapa"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

Dengan ini, TextView akan selalu berada 16dp di bawah tombol, dan tombol di bawah EditText, dan EditText di atas. Susunannya rapi vertikal.

Langkah 5: Melihat Hasil di Design

Klik tab Design di bagian bawah editor XML. Kamu akan melihat tampilan preview. Kalau posisi tidak sesuai, bisa diatur ulang dengan menarik-ngantar komponen. Tapi karena kita sudah pakai constrain, seharusnya sudah rapi.

Sekarang kita punya 3 komponen: EditText (input), Button (tombol), dan TextView (label).

💡 Kalau preview tidak muncul, coba klik Refresh atau Build → Clean Project.

Langkah 6: Menghubungkan UI dengan Kotlin (Menangani Klik)

UI sudah jadi, tapi tombolnya belum melakukan apa-apa kalau diklik. Sekarang kita akan ke file Kotlin (MainActivity.kt) untuk memberi nyawa pada tombol.

Buka MainActivity.kt. Di dalam fungsi onCreate, setelah setContentView, kita akan:

1. Memanggil komponen berdasarkan id-nya.
2. Menambahkan aksi saat tombol diklik.
3. Mengambil teks dari EditText dan menampilkannya di TextView.

Berikut kode lengkapnya:

package com.example.wisataapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Panggil komponen berdasarkan id
        val editTextNama = findViewById<EditText>(R.id.editTextNama)
        val buttonSapa = findViewById<Button>(R.id.buttonSapa)
        val textView = findViewById<TextView>(R.id.textView)

        // Pasang aksi klik pada tombol
        buttonSapa.setOnClickListener {
            // Ambil teks dari EditText
            val nama = editTextNama.text.toString()

            // Tampilkan di TextView
            textView.text = "Halo, $nama! Selamat datang di WisataApp."
        }
    }
}

Penjelasan:

• findViewById<EditText>(R.id.editTextNama): mencari komponen dengan id editTextNama di layout. Kita harus menyebutkan tipe komponennya (EditText, Button, TextView).
• buttonSapa.setOnClickListener { ... }: memberi aksi saat tombol diklik. Kode di dalam kurung kurawal akan dijalankan.
• editTextNama.text.toString(): mengambil teks yang diketik pengguna, lalu diubah jadi String.
• textView.text = "...": mengubah teks di TextView.

Langkah 7: Jalankan Aplikasi

Klik tombol Run (segitiga hijau) atau tekan Shift + F10. Pilih emulator yang sudah ada. Setelah aplikasi terbuka, coba ketik sesuatu di EditText, lalu klik tombol "Sapa". Maka teks di bawahnya akan berubah sesuai dengan yang kamu ketik.

Misal kamu ketik "Budi", maka TextView akan berubah menjadi: Halo, Budi! Selamat datang di WisataApp.

Selamat! 🎉 Aplikasi kamu sekarang sudah interaktif. Bisa menerima input dan merespon.

😎 Kalau tombolnya nggak ngapa-ngapain pas diklik, jangan marah dulu. Cek lagi kode di setOnClickListener, mungkin ada titik koma yang hilang atau nama id-nya salah.

Bonus: Menggunakan View Binding (Lebih Modern)

findViewById itu agak jadul dan rawan error kalau banyak komponen. Ada cara yang lebih aman dan cepat: View Binding. Tapi untuk anak baru, kita pakai findViewById dulu biar paham. Nanti di artikel selanjutnya kita akan pakai View Binding.

Kalau penasaran, cara pakai View Binding:

• Aktifkan di build.gradle (Module: app) dengan menambahkan buildFeatures { viewBinding true }.
• Sync project.
• Di Activity, ganti setContentView(R.layout.activity_main) dengan binding = ActivityMainBinding.inflate(layoutInflater) dan setContentView(binding.root).
• Akses komponen langsung dengan binding.editTextNama, dll.

Tapi tenang, nanti kita pelajari.

Rangkuman

• ConstraintLayout: layout fleksibel untuk mengatur posisi komponen dengan constrain.
• EditText: input teks dari pengguna.
• Button: tombol yang bisa diklik.
• TextView: menampilkan teks (bisa diubah dari kode).
• Menangani klik: pakai setOnClickListener { ... }.
• findViewById: mencari komponen berdasarkan id.

Selanjutnya?

Di artikel berikutnya (Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata), kita akan membuat daftar yang bisa digulir (scrolling). Kita akan belajar adapter dan ViewHolder. Sampai jumpa!

💡 Kalau ada error "unresolved reference R.id.editTextNama", coba Build → Clean Project lalu Build → Rebuild Project. Kadang id belum tergenerate.

---

Ditulis oleh Kakak programmer yang dulu juga suka lupa pasang setOnClickListener. Kalau ada pertanyaan, tulis di komentar ya!

📘 Blog ini akan terus diupdate. Pantengin terus!