PENGANTAR
Pernahkan anda mengisi sebuah formulir pendaftaran? di mana anda diminta untuk menuliskan data diri anda, seperti nama, usia, no telephone dan lain sebagainya. Nah, sistem juga menyediakan metode tersebut. Di mana user dapat melakukan interaksi dengan sistem.
Di sistem pengisian formulir tersebut di kenal dengan istilah Form. Ada beberapa komponen yang mendukung pembuatan form tersebut. seperti input text, nomor bahkan input berupa pilihan atau ceklis. Disini kita akan menoba mengurainya di dalam materi android.
PERSIAPAN
Buka aplikasi Android Studio. silahkan buat projek baru dengan ketentuan seperti berikut:
template projek : Empty Views Activity
projek Name : LatihanForm
Languange : Java/Kotlin
Minimum SKD : 24
Setelah persiapan selesai mari kita mulai membuat latihannya.
Desain Tampilan Form
Langkah awal kita adalah membuak file activity_main.xml. Sebab di file inilah kita akan membuat UI untuk form. Rubahlah layout dari activiy_main.xml tersebut menjadi linearlayout seperti script berikut ini:
<LinearLayout 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"
android:orientation="vertical"
android:padding="10dp"
tools:context=".MainActivity">
</LinearLayout>
INPUT FORMAT TEXT/DESIMAL
Komponen yang dapat di tambahkan di form adalah <EditText>Berikut cara penulisannya:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
Ada berapa attribut yang kita perlu tambahkan ke dalam komponen EditText seperti:
- hint => berfungsi sebagai penjelasan pada komponen, Komponen ini tidak akan di eksekusi oleh program.
- inputType => Berguna sebagai type input yang di berikan pada form. Saat projek di jalankan maka jenis keyboard yang di tampilkan tergantung kepada input type.
Perhatikan penggunaannya seperti berikut:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:hint="Input Nama"
android:inputType="text"/>
Jalankan projek dan amati apa yang terjadi. Kemudian tambah komponen baru dan beri nilai inputType dengan nilai Number seperti berikut:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:hint="Input Tahun Lahir"
android:inputType="number"/>
Perhatikan perbedaan kedua tampilan berikut. Perbedaan akan terlihat pada keyboar masing-masing tampilan.
Nah, sampai disini dapat kita pahami fungsi hint dan inputType. Terjadi perubahan nilai pada InputType maka akan berupbah pula jenis keyboard pada tampilan android. Perubahan nilai tersebut tidak hanya 2 jenis yang disebutkan diatas. Ada banyak jenisnya, diantaranya dapat anda lihat pada daftar tabel dibawah ini:
| NO | TYPE | PENULISAN | KET |
|---|---|---|---|
| 1 | text | android:inputType="text" | Menampilkan input berupa Karakter |
| 2 | Number | android:inputType="number" | Menampilkan input berupa Bilangan |
| 3 | Password | android:inputType="number" | Menampilkan input berupa karakter bintang |
| 4 | android:inputType="email" | Menampilkan input berupa email | |
| 5 | Phone | android:inputType="phone" | Input untuk nomor Henphone |
| 6 | Date /datetime | android:inputType="date" | Input berupa date atau time |
| 7 | auto komplet | android:inputType="textAutoComplate" | Otomatis data input komplate |
| 8 | auto kokesi | android:inputType="textAutoCorrer" | Mencek kesalahan |
Selain dari daftar di atas masih ada jenis yang lain. Anda dapat melihat jenis tersebut saat membuat projek. Otomatis library akan menampilkan jenis inputType.
Mengambil Nilai Input dan Menampilkan ke User
Buat code di halaman activity_main.xml seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">
<EditText
android:id="@+id/et_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:hint="Input Nama"
android:inputType="text"/>
<EditText
android:id="@+id/et_thn_lahir"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:hint="Input Tahun Lahir"
android:inputType="number"/>
<Button
android:id="@+id/bt_simpan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Simpan Data"
android:layout_marginTop="10dp"/>
<TextView
android:id="@+id/tv_hasil"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Data Yang Di Input"
android:textSize="20dp"
android:textStyle="bold"
android:padding="10dp"
android:gravity="center"
android:layout_marginTop="50dp"/>
</LinearLayout>
Masuk ke halaman MainActivity.kt. Kita perlu membuat variabel untuk menampung nilai yang di input oleh user. Karena input terjadi pada EditText maka Tambahkan 2 variabel di dalam class MainActivity seperti berikut:
class MainActivity : AppCompatActivity() {
lateinit var etNama:EditText
lateinit var etThnLahir:TextView.........}
Selanjutnya kita panggil id dari masing-masing komponen yang ada di xml. Berikut betnuk code untuk memanggilnya:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
etNama = findViewById(R.id.et_nama)
etThnLahir = findViewById(R.id.et_thn_lahir)
val btSimpan:Button = findViewById(R.id.bt_simpan)
val tvHasil:TextView = findViewById(R.id.tv_hasil)
}
Karena variable etNama dan etUsia sudah kita devenisikan tadi, maka kita tidak perlu lagi membuat tipedata lagi. Lain hal dengan btnSimpan dan tvHasil, kedua variable ini belum kita defenisikan maka harus kita buat typedata. Anda sebenarnya bisa saja mendefenisikan ke dua komponen tersebut.
Sekarang kita akan memberikan efek action terhadap tombol menggunakan OnClickListener. Tambahkan even onClick di bawah variabel tadi. Perhatikan code seperti berikut:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
.......
btSimpan.setOnClickListener(object :View.OnClickListener{
})
}
Terjadi Error pada code "object" bukan! silahkan arahkan cursor ke code "object" dan pilih "Implement Menbers" sehingga muncul function untuk onClick. Perhatikan code seperti berikut ini:
btSimpan.setOnClickListener(object :View.OnClickListener{
override fun onClick(v: View?) {
TODO("Not yet implemented")
}
})
Nilai yang kita input tadi kita simpan ke dalam variable Nama dan variable Usia. Kemudian kita getter variabel etNama dan etUsia agar di kenali sebagai input berupa karakter. Perhatikan code dibawah ini.
btSimpan.setOnClickListener(object :View.OnClickListener{
override fun onClick(v: View?) {
var Nama = etNama.text.toString()
var ThnLahir = etThnLahir.text.toString().toInt()
}
})
Perhatikan perbedaan dari ke 2 variable diatas. Variable ThnLahir terdapat tambahan toInt() di belakangnya. Ini di karenakan variabel tersebut memiliki input berupa number. toInt() berfungsi untuk merubah karakter ke dalam bentuk bilangan (Integer).
Langkah terakhir kita tampilkan nilai input ke dalam TextView. Perhatikan code dibawah ini
btSimpan.setOnClickListener(object :View.OnClickListener{
override fun onClick(v: View?) {
var Nama = etNama.text.toString()
var ThnLahir = etThnLahir.text.toString().toInt()
tvHasil.text= "Nama Anda" +Nama+ "\n Tahun Lahir: "+ Usia
}
})
Jalankan program anda dan coba masukkan data nama dan tahun lahir anda
Perhatikan EditText berubah nilai textnya sesuai dengan apa yang di input oleh user. Kira-kira seperti inilah konsep form input pada android studio.
Melakukan Aritmatika Pada Program
Tadi kita membuat salah satu komponen EditText dalam bentuk numerik. Apakah kita bisa melakukan aritmatika berdasarkan input tersebut? Sebagai tambahan kita akan mencoba untuk membuat aritmatika, sekarang coba anda modivikasi program seperti berikut:
btSimpan.setOnClickListener(object :View.OnClickListener{
override fun onClick(v: View?) {
var Nama = etNama.text.toString()
var ThnLahir = etThnLahir.text.toString().toInt()
var ThnSekarang = 2023
val Usia = ThnSekarang - ThnLahir
tvHasil.text= "Nama Anda :" +Nama+
"\n Tahun Lahir Anda : "+ ThnLahir+
"\n Usia Anda :" + Usia
}
})
Kita menambahkan 2 variable pada program kita yaitunya variabel ThnSekarang dan variabel usia. Kemudian kita panggil variabel usia tersebut dan kita masukkan ke dalam variabel tvHasil. Jalankan program maka akan keluar usia.
Selamat Mencoba.
