PART I: Panduan Membuat Form Input di Android Studio

 Form input adalah salah satu elemen terpenting dalam aplikasi modern. Ia memungkinkan pengguna untuk memasukkan data, seperti nama, alamat email, atau kata sandi, yang kemudian dapat diproses oleh aplikasi Anda. Dalam panduan ini, kita akan mempelajari cara membuat form input sederhana menggunakan komponen EditText dan Button di Android Studio.

1. Memahami Komponen Utama

Ada dua komponen dasar yang kita butuhkan untuk membuat form input:

• EditText: Komponen ini adalah kotak teks yang dapat diedit, tempat pengguna mengetikkan data.
• Button: Komponen ini adalah tombol yang dapat diklik pengguna, biasanya untuk mengirimkan data yang telah dimasukkan.

2. Mengatur Tampilan (Layout)

Kita akan membuat tata letak (layout) sederhana di file activity_main.xml. Kita akan menggunakan ConstainLayout yang merupakan bawaan dari Android STudio. Hapus TextView yang ada di dalam activity_main.xml. Berikut adalah kode dasar untuk activity_main.xml:

<?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">
    .................
    ..................
</androidx.constraintlayout.widget.ConstraintLayout>

2. Menambahkan Komponen EditText

    Kita akan menambahkan dua komponen EditText untuk input nama dan email. Berbeda dengan LinearLayout, kita harus menentukan posisi setiap komponen dengan menghubungkannya (constrain) ke komponen lain atau ke tepi layout.

Berikut kode untuk EditText pertama:

<EditText
    android:id="@+id/et_nama"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="Masukkan Nama Anda"
    android:inputType="textPersonName"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="32dp"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"/>

Penjelasan Atribut Khusus ConstraintLayout:

• android:layout_width="0dp": Nilai 0dp di ConstraintLayout berarti lebar komponen akan "cocok dengan batasan" (match_constraint). Jadi, lebarnya akan menyesuaikan berdasarkan constraint yang diberikan.
• app:layout_constraintStart_toStartOf="parent": Menghubungkan tepi kiri komponen ke tepi kiri parent layout.
• app:layout_constraintEnd_toEndOf="parent": Menghubungkan tepi kanan komponen ke tepi kanan parent layout.
• app:layout_constraintTop_toTopOf="parent": Menghubungkan tepi atas komponen ke tepi atas parent layout.

Sekarang, tambahkan EditText kedua di bawah yang pertama:

<EditText
    android:id="@+id/et_email"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="Masukkan Email Anda"
    android:inputType="textEmailAddress"
    app:layout_constraintStart_toStartOf="@+id/et_nama"
    app:layout_constraintEnd_toEndOf="@+id/et_nama"
    app:layout_constraintTop_toBottomOf="@+id/et_nama"
    android:layout_marginTop="16dp"/>

• app:layout_constraintTop_toBottomOf="@+id/et_nama": Ini adalah kunci untuk menempatkan komponen. Ia menghubungkan tepi atas et_email ke tepi bawah et_nama, sehingga et_email akan berada tepat di bawah et_nama.
• app:layout_constraintStart_toStartOf="@+id/et_nama" dan app:layout_constraintEnd_toEndOf="@+id/et_nama": Mengatur agar et_email memiliki lebar yang sama persis dengan et_nama.

3. Menambahkan Komponen Button

Terakhir, tambahkan Button di bawah EditText kedua.

<Button
    android:id="@+id/btn_kirim"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Kirim Data"
    app:layout_constraintTop_toBottomOf="@+id/et_email"
    app:layout_constraintStart_toStartOf="@+id/et_email"
    app:layout_constraintEnd_toEndOf="@+id/et_email"
    android:layout_marginTop="24dp"/>

4. Mengambil Data dari Input Menggunakan Kotlin

Sekarang, buka file MainActivity.kt. Di sini, kita akan menulis logika untuk mengambil data dari EditText saat tombol diklik.

package com.smekda.map_snap
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val etNama: EditText = findViewById(R.id.et_nama)
        val etEmail: EditText = findViewById(R.id.et_email)
        val btnKirim: Button = findViewById(R.id.btn_kirim)

        btnKirim.setOnClickListener {
            val nama = etNama.text.toString()
            val email = etEmail.text.toString()
            val pesan = "Nama: $nama\nEmail: $email"
            Toast.makeText(this, pesan, Toast.LENGTH_LONG).show()
        }
    }
}

5. Menjalankan Aplikasi

    Jalankan aplikasi Anda di emulator. Anda akan melihat form input yang sudah dibuat. Ketika Anda mengisi data dan menekan tombol "Kirim Data", sebuah pesan pop-up akan muncul, menampilkan data yang telah Anda masukkan. Selamat! Anda telah berhasil membuat form input sederhana menggunakan Kotlin dan ConstraintLayout.

Pada kode di atas, kita menghubungkan Button ke EditText di atasnya (et_email). Kita juga mengaturnya agar berada di tengah-tengah (center horisontally) relatif terhadap et_email.