UNESA
s1-pmat@unesa.ac.id

Seri Tutorial Android Studio (Bagian 2: Desain Visual – Merancang Tampilan Kalkulator)

Seri Tutorial Android Studio (Bagian 2: Desain Visual – Merancang Tampilan Kalkulator)

- kategori Serba-serbi 147 Views

Selamat datang kembali di Bagian 2! Di Bagian 1, kita telah berhasil menginstal Android Studio dan membuat proyek pertama kita dengan template "Empty Views Activity".

Hari ini, kita akan fokus menjadi "Arsitek". Kita akan membuka file activity_main.xml dan merancang tampilan visual (User Interface) untuk aplikasi kalkulator luas persegi panjang. Kita akan belajar menyusun komponen seperti label, kotak input, dan tombol.

Penting: Di bagian ini, kita hanya akan fokus pada desain (file .xml). Aplikasi kita belum akan bisa menghitung. Kita akan menambahkan "otak" (logika) di Bagian 3.

XML vs. Kotlin: Arsitek dan Insinyur 💡

Cara termudah memahami pengembangan Android adalah dengan analogi:

  • File XML (activity_main.xml): Ini adalah cetak biru (blueprint) arsitek. File ini memberi tahu aplikasi apa saja komponennya (tombol, teks) dan di mana lokasinya.
  • File Kotlin (MainActivity.kt): Ini adalah insinyur. File ini berisi logika yang membuat cetak biru itu berfungsi (misal: "Saat tombol ini ditekan, ambil angka dan hitung").

Hari ini, kita bertindak sebagai arsitek. Mari buka file activity_main.xml Anda (ada di app > res > layout).

Mengenal Layout Editor 🎨

Saat Anda membuka file .xml, Anda akan melihat tiga mode di pojok kanan atas: Code, Split, dan Design.

  • Design: Tampilan visual murni, bagus untuk drag-and-drop.
  • Code: Tampilan kode XML murni.
  • Split: Menampilkan kode dan visual secara berdampingan. Ini adalah mode terbaik untuk belajar.

Pilih mode Split. Hapus TextView "Hello World" yang ada di dalam ConstraintLayout agar kita bisa mulai dari awal.

Membangun Tata Letak Kalkulator 💻

Kita akan menyusun empat komponen utama: dua input (panjang & lebar), satu tombol (hitung), dan satu tempat untuk hasil.

1. EditText (Input Panjang)

Bagi pendidik matematika, EditText adalah komponen terpenting. Ini adalah kotak tempat pengguna memasukkan angka.

  • android:id: Ini adalah nama unik agar file Kotlin kita bisa menemukannya nanti. (@+id/edtPanjang).
  • android:hint: Teks petunjuk abu-abu yang akan hilang saat pengguna mengetik.
  • android:inputType: "numberDecimal" adalah kunci! Ini akan memunculkan keyboard angka, bukan huruf.
<EditText
    android:id="@+id/edtPanjang"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Masukkan Panjang (contoh: 10.5)"
    android:inputType="numberDecimal"
    ... (Atur 'constraints' agar ada di atas layout) ...
/>

2. EditText (Input Lebar)

Lakukan hal yang sama untuk Lebar. Cukup salin kode di atas dan ubah bagian pentingnya:

  • android:id: Ubah menjadi @+id/edtLebar
  • android:hint: Ubah menjadi "Masukkan Lebar"
<EditText
    android:id="@+id/edtLebar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Masukkan Lebar (contoh: 8.0)"
    android:inputType="numberDecimal"
    ... (Atur 'constraints' agar ada di bawah edtPanjang) ...
/>

3. Button (Tombol Hitung)

Sekarang, tambahkan tombol untuk memicu perhitungan.

<Button
    android:id="@+id/btnHitung"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hitung Luas"
    ... (Atur 'constraints' agar ada di bawah edtLebar) ...
/>

4. TextView (Tempat Hasil)

Terakhir, kita butuh tempat untuk menampilkan jawaban. Kita gunakan TextView. Kita akan buat teksnya sedikit lebih besar (24sp).

<TextView
    android:id="@+id/textHasil"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hasil: 0.0"
    android:textSize="24sp"
    ... (Atur 'constraints' agar ada di bawah btnHitung) ...
/>

Kesimpulan & Apa Selanjutnya?

Kerja bagus! Anda telah membangun "wajah" atau "cetak biru" dari aplikasi Anda. Jika Anda jalankan di emulator, tampilannya akan persis seperti yang Anda rancang. Anda bisa mengetik angka, tapi tombol "Hitung" belum melakukan apa-apa.

Dan itu tidak masalah! Karena di Bagian 3, kita akan berperan sebagai "Insinyur". Kita akan masuk ke file MainActivity.kt dan menulis logika Kotlin untuk membuat tombol itu berfungsi.

-> Lanjutkan ke Bagian 3: Logika Kotlin – Menghidupkan Kalkulator

Keywords: Tutorial Android Studio, Android XML Layout, ConstraintLayout, EditText inputType, TextView, Button, Membuat Kalkulator Android, UI/UX, Android Studio pemula, Pendidikan Matematika

Scroll to Top