Sabtu, 10 April 2021

Pengenalan Komponen User Interface (UI) pada Android Studio (Part 2)

No comments

 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 : 
 
 
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 !!!


0 comments:

Posting Komentar