Membuat Ineractive UI
Kali ini kita akan belajar membuat sebuah tampilan UI yang interactive. Maksudnya adalah UI yang kita buat nanti dapat dijalankan dan memiliki fungsi. Kali ini fungsi yang akan kita buat tentu saja fungsi yang simple terlebih dahulu.
Pertama kita akan membuat project dengan ketentuan sebagai berikut:
Kemudian kita Run Project, hasil awal akan seperti berikut:
Mengatur tampilan pada Layout editor
Beberapa attribute yang akan kita pakai dalam tahap ini adalah:
TextView: View yang menampilkan label text
Button: Tombol untuk event handler
LinearLayout: design tampilan pada aplikasi kita dengan tata letak secara vertical dan horizontal dimana tata letak aplikasi kita hanya bisa memasukan media secara mendatar dan menurun.
Kita buka file XML untuk main activity pada “activity_main.xml”
Tab Text memungkinkan kita untuk mengedit script pada file xml, sedangkan pada tab design memungkinkan kita untuk mengatur secara user interface langsung. Pada tab Design, tampilannya akan seperti berikut ini:
Kita rubah ConstrainLayout menjadi LinearLayout seperti gambar di bawah:
Pada tab design jika kita akan meastikan Layout sudah berubah
Kita akan buat TextView, dan 2 button pada tahap ini
Pastikan attribute nya seperti berikut:
TextView show count
Button Toast
Button Count
Kemudian kita akan mengatur dan merapikan tampian ke 3 komponen tadi.
Pastikan pengaturan xml layout sudah seperti berikut.
Kemudian kita akan membuat String resource. String resource ini biasanya digunakan untuk mempermudah pembangunan layout. Jika kita menggunakan resource, maka kita tinggal memanggil resource name saja, tidak perlu mengganti di setiap tempat jika terjadi perubahan. Cukup pada file resource nya saja.
Alt+enter pada tulisan yang akan kita masukkan dalam resource. Kemudian pilih “extract string resource”
Kemudian kita atur resource name, value dan lain nya
Kemudian kita atur beberapa attribute seperti warna, ukuran dan text style, seperti berikut:
Kemudian kita akan membuat onClick Handler. Tambahkan attribute android:onClick=”showToast” pada button_toast, dan android:onClick=”countUp”
Pada button_count
Kemudian alt+enter pada method name kemudian pilih Create onClick event handler.
Kemudian hasilnya akan seperti berikut, otomatis kedua method akan ter-generate pada Main Activity
Kita tambah kan attribute count (int) dan showCount (TextView). Kemudian kita isis kedua method tadi seperti berikut ini.:
Hasilnya akan seperti berikut ketika di Run
Ketika Toast di Click
Ketika Count di Click
