Haii teman – teman semua! Ketemu lagi dengan saya, di pembahasan kali ini masih seputar komponen UI yang ada di Android Studio bagian ke - 2, untuk bagian 1 Pengenalan Komponen User Interface (UI) Android Studio. Banyak sekali referensi yang menjelaskan tentang komponen UI Android Studio. Disini saya akan menjelaskan dan mengimplementasikan komponen UI (Part 2).
Komponen UI (Bagian 2) diantaranya :
8. Spinner
Spinner adalah salah satu view yang cukup sering kita lihat penggunaannya dihampir semua aplikasi Android. Spinner berbentuk list dropdown berisi item - item yang bisa kita pilih. Spinner biasa digunakan untuk memudahkan pengguna memilih salah satu value list atau array yang disajikan dengan cepat. Ada dua cara untuk membuat spinner di Android Studio. Yang pertama, data array disimpan pada file strings.xml dalam bentuk string-array yang bersifat statis atau tidak sering berubah - ubah. Yang kedua adala data array disimpan langsung pada file Java, dalam bentuk string array ataupun String Arraylist cara ini bersifat dinamis atau dapat berubah - ubah. Yang akan saya bahas yaitu menggunakan bentuk string-array yang bersifat statis caranya,
1. Kalian buka terlebih dahulu aplikasi Android Studio yang ada di PC kalian
- Pilih Start → Android Studio
- Pilih Create New Projects
- Pilih Empty Activity lalu klik next
Akan muncul Configure Your Project,
**
Name → Modul4_Spinner (sesuaikan dengan project yang anda buat)
Package Name → ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project Modul4_Spinner.
Save Location → Disesuikan dengan keinginan kalian dimana project ini akan di simpan
Minimum API level → API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya) → Finish
2. Setelah melakukan Configurasi Project maka akan tampil halaman utama IDE Android Studio, setelah itu ubah layout menjadi LinearLayout, kemudian kita buka file strings.xml pada folder res/values/strings.xml, dan kita masukkan string-array sebagai berikut :
<resources>
<string name="app_name">Modul4_Spinner</string>
<string-array name="hari"> // variabel yang akan dipanggil dari activity_main.xml (entries="@array/hari)
<item> Senin </item>
<item> Selasa </item>
<item> Rabu </item>
<item> Kamis </item>
<item> Jumat </item>
<item> Sabtu </item>
<item> Minggu </item>
</string-array>
</resources>
3. Selanjutnya, pada layout activity_main.xml kita tambahkan Text View dan sebuah Spinner View, hingga menjadi seperti dibawah ini :
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HARI INI : " // text yang tercetak
android:layout_marginTop="15dp" //jarak text ke atas
android:textStyle="bold" /> // text tercetak tebal
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp" // jarak spinner ke atas
android:entries="@array/hari" /> // mengambil value dari strings.xml
</LinearLayout>
HASIL Spinner
9. Toggle Button
Toggle Button adalah tombol atau button di android yang dimodifikasi sehingga mempunyai dua buah state, yaitu ON atau OFF. Toggle Button sifat di dunia nyatanya mirip seperti saklar lampu, dimana kita bisa menyalakan atau mematikan saklar tersebut. Oke langsung saja, seperti biasa buatlah sebuah project baru di Android Studio terlebih dahulu. Setelah itu pada file activity_main.xml kita ketikkan seperti dibawah ini :
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Tombol ON/OFF Flash"
android:textSize="16sp"
android:textStyle="bold" />
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="5dp"
android:text="ToggleButton"
android:textOff="Flash Mati" // text label OFF, Jika di tekan maka akan berubah textnya
android:textOn="Flash Hidup" //text label ON
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
Disini kita hanya menggunakan satu buah Toggle Button. Text Label yang digunakan disini jika state ON maka label textnya adalah Flash Hidup (garis warna dibawah button akan nyala), sedangkan jika statenya OFF maka labelnya Flash Mati (garis warna dibawah button akan mati).
HASIL Toggle Button
10. Switch ON / OFF
Switch adalah sebuah komponen layout yang mirip seperti tuas ON/OFF. sama seperti Toggle Button bedanya switch tuas 'toggle' bisa digeser ke kanan dan ke kiri. Oke langsung saja, seperti biasa buatlah sebuah project baru di Android Studio terlebih dahulu. Setelah itu pada file activity_main.xml kita ketikkan seperi di bawah ini:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Switch Testing : "
android:textSize="18sp"
android:textStyle="bold" />
<Switch
android:id="@+id/simpleSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="15dp"
android:showText="true"
android:text="Switch"
android:textOff="OFF" // text label OFF, Jika di tekan maka akan berubah textnya
android:textOn="ON" // text label ON, akan nyala
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
Text Label yang digunakan disini jika state ON maka label textnya adalah ON (button akan nyala), sedangkan jika statenya OFF maka labelnya OFF (button akan mati).HASIL Switch ON/OFF
11. Progress Bar
ProgressBar adalah indikator tampilan grafis yang menunjukkan seberapa lama progresss. ProgressBar di android berguna karena sistem memberi informasi kepada user perihal waktu yang dibutuhkan untuk menyelesaikan tugasnya. Contoh script xml di bawah ini, tapi sebelumnya buatlah project baru lagi .
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mohon Tunggu . . . " //text yang ditampilkan
android:textSize="18sp"
android:textStyle="bold" /> //tercetak tebal
<ProgressBar
android:id="@+id/progressBar_cyclic" //ProgressBar berbentuk lingkaran
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="30dp"
android:minWidth="20dp" //lebar minimal sebesar 20
android:minHeight="20dp" /> //tinggi minimal sebesar 20
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sedang Menyimpan Data" //text yang ditampilkan
android:textSize="18sp"
android:textStyle="bold" /> //tercetak tebal
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal" //ProgressBar berbentuk horixontal
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="0dp"
android:indeterminate="false"
android:max="100"
android:minHeight="50dp"
android:minWidth="200dp"
android:progress="1" />
</LinearLayout>
HASIL ProgressBar
12. SeekBar
Seek Bar adalah sejenis ProgressBar dengan ibu jari yang diseret. user dapat menyeret nail ke kiri dan ke kanan untuk memindahkan progress lagu, volume, suara, dan lain - lain. Buatlah project baru di Android Studio terlebih dahulu. Contoh scriptnya sebagai berikut :
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Atur Volume" />
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbarSize="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
HASIL SeekBar
13. RatingBar
RatingBar biasa digunakan untuk mendapatkan peringkat dari user. Peringkat mengembalikan angka floating-point, mungkin 2.0, 3.5, 4.0, dan lain sebagainya. Buatlah project baru di Android Studio terlebih dahulu. Contoh scriptnya sebagai berikut :
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Rate This App : "
android:textSize="24sp"
android:textStyle="bold" />
<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
HASIL Rating Bar
14. Scroll View
Scroll View adalah elemen widget yang biasa digunakan untuk menggulir UI, baik secara vertical maupun horizontal. Buatlah project baru di Android Studio terlebih dahulu. Contoh scriptnya sebagai berikut :
Disini saya membuat text view sebanyak 44, kalian bisa menyesuaikan sesuai kebutuhan
HASIL Scroll View
CHALLENGE MEMBUAT FORM REGISTRASI
Baiklah sekarang kita langsung membuat latihannya yaitu membuat Form Registrasi dengan beberapa komponen yang sudah kita bahas sebelumnya.
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
- Pilih Start -> Android Studio
- Pilih Create New Projcts
- Pilih Empty Activity lalu klik next
Configure Your Project
Name -> Tugas_Modul4
Package Name -> ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project tugas_modul4.
Save Location -> Disesuikan dengan keinginan kalian dimana project ini akan di simpan
Minimum API level -> API 16 Jelly Bean (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya) -> Finish
2. Maka akan tampil IDE Android Studio
3. Sebelum ke activity_main kita ubah terlebih dahulu Layoutnya dengan cara Klik kanan pada ConstraintLayout, pilih Convert View
Lalu pilih LinearLayout, klik Apply
Setelah Layout diubah menjadi linear kemudian ubah lagi menjadi LinearLayout(Vertical) 
4. Setelah diubah menjadi vertical kemudian klik split untuk bisa melihat perubahan dibagian designnya ketika kita mengetikkan sintak di xml nya. 
5. Lalu ketikkan script berikut :
Disini kita menggunakan inputType, kenapa? Untuk memudahkan user ketika registrasi. Untuk password suapaya terjaga rahasianya kita gunakan android:inputType="textPassword", alamat email menggunakan android:inputType="textEmailAddress", Phone kita gunakan android:inputType="number" supaya langsung menginputkan dengan nomor tanpa harus salah input karena huruf alfabet.
6. Seteleh selesai mengetikkan yang kita butuhkan di activity_main.xml untuk memproses ketika kita mengklik tombol maka kata akan muncul sebuah pop-up seperti "Selamat anda berhasil Registrasi" nah cara mendapatkan referensi objek dan mendapatkan event handler, kita gunakan atribut "id" pada tag xml untuk memberikan identifier pada objek View kita. Id tersebut akan kita gunakan untuk mereferensikan objek tersebut. Dan untuk menambahkan event handler pada tombol, gunakan interface setOnClickListener(...).
7. Selanjutnya ketikan script pada file MainActivity.java seperti Script dibawah ini : 
Demikianlah Pengenalan komponen User Interface (UI) pada Android Studio (Lanjutan) dan juga latihan - latihan yang tersedia. Semoga apa yang disampaikan bisa bermanfaat bagi teman-teman semua, mohon maaf jika ada kesalahan dan kekurangan lainnya. Sampai jumpa di Pembahasan selanjutnya.
8. Kemudian Jalankan emulator tambahan (Vysor) di kedua perangkat yaitu PC dan Handphone kalian masing - masing. Kenapa menggunakan Vysor? Supaya tidak terlalu berat dan membebankan PC kalian, tetapi jika PC kalian memenuhi spesifikasi Android Studio atau bahkan lebih bisa langsung dari Android Studio di PCnya tanpa harus menggunakan Emulator tambahan.
HASIL Challenge Form Registrasi
Demikianlah Pengenalan komponen User Interface (UI) pada Android Studio (Lanjutan) dan juga latihan - latihan yang tersedia. Semoga apa yang disampaikan bisa bermanfaat bagi teman-teman semua, mohon maaf jika ada kesalahan dan kekurangan lainnya. Sampai jumpa di Pembahasan selanjutnya.
Terima Kasih !!!
