Tutorial Membuat Layout App Registrasi Dari Beberapa Komponen User Interface(UI) Android Studio

 Assalamualaikum

    Wah ketemu lagi nih sahabat blogger di blog pembelajaran Android Studio. Sahabat tau kan komponen-komponen User Interface atau UI Android Studio itu banyak? Nah itu dia sahabat, disini saya akan membagikan pengetahuan tentang User Interface(UI) Android Studio. 

    Ketika kita menggunakan sebuah aplikasi biasanya yang pertama kali dilihat yaitu penampilan aplikasinya. Baik itu tata letak tombol, text, gambar dan yang lainnya, oleh karena itu User Interface aplikasi android akan mempengaruhi tingkat penggunaan aplikasinya. User Interface yang menarik dan simple lakan lebih disukai pengguna dibandingkan User Interface yang terlihat rumit. Oh iya ini materi lanjutan-ya, sahabat bisa membaca komponen-komponen lainnya di PENGENALAN DAN PENGGUNAAN KOMPONEN UI (User Interface) PADA ANDROID STUDIO. Tutorialnya sangat cocok juga bagi sahabat yang masih pemula yang ingin belajar pemrograman bebasis android dengan menggunakan Android Studio IDE.

Komponen-komponen User Interface lainnya yang akan dibahas disini dan bagaimana cara penggunaannya mari kita lihat :

    1.    Spinner

            Komponen Spinner adalah salah satu view yang cukup sering kita lihat penggunaannya hampir disemua aplikasi android. Komponen Spinner biasa digunakan untuk menampilkan list data yang salah satu dari data yang ditampilkan, nantinya akan dipilih. Spinner biasanya berbentuk list dropdown berisi item-item yang akan kita pilih. Dibawah ini saya membuat spinner di Android dengan data array disimpan pada file resource xml dalam bentuk string-array. Cara ini berguna jika value list pada spinner bersifat statis/tidak sering diubah-ubah.

        → Pertama-tama membuat project baru

        → Buka file strings.xml pada folder res/values seperti pada gambar, lalu masukan kode string-array dibawah ini

Code :

<resources>
    <string name="app_name">Modul3Spinner</string>
    <string-array name="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>

       → Selanjutnya pada layout activity_main.xml kita tambahkan sebuah spinner view. android:entries="@array/hari"  untuk memanggil string-array yang telah dibuah pada strings.xml.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hari ini :"
    android:textStyle="bold" />

<Spinner
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:entries="@array/hari" >
</Spinner>

        → Run App , hasilnya seperti dibawah ini

Hasil Penggunaan Spinner

    2.    Toggel Button

            Komponen Toggel Button biasa digunakan untuk menampilkan status dicentang/tidak dicentang(Aktif/Nonaktif) pada tombol. Ini bermanfaat jika pengguna harus mengubah pengaturan misalnya, dapat digunakan untuk Wifi nyala/mati, data seluler, dan sebagainya. Dibawah ini cara penggunaanya.

        → Script pada file activity_main.xml.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="Tombol ON/OFF Flash"
    android:textSize="18sp"
    android:textStyle="bold" />

<ToggleButton
    android:id="@+id/toggelButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="20dp"
    android:text="Toggel Button"
    android:textOff="Flash Mati"
    android:textOn="Flash Hidup"/>

        → Run App.

Hasil Penggunaan Toggel Button

    3.    Switch On/Off

            Komponen Switch adalah salah satu widget komponen User Interface yang digunakan untuk menghidupkan dan mematikan suatu fungsi didalam program aplikasi, yang diibaratkan sakelar yang bisa kita hidupkan(On) dan matikan(Off), widget ini mirip fungsinya dengan Toggel Button. Dibawah ini cara penggunaanya :

        → Script pada file activity_main.xml.

<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_marginLeft="15dp"
    android:layout_marginTop="20dp"
    android:showText="true"
    android:text="Switch"
    android:textOff="OFF"
    android:textOn="ON"
    android:textSize="18sp"
    android:textStyle="bold" />

        → Run App.

Hasil Penggunaan Switch ON/OFF

    4.    ProgressBar

            ProgressBar adalah indikator tampilan grafis yang menunjukan seberapa lama progress. ProgressBar di Android berguna karena sistem memberikan informasi kepada user perihal waktu yang dibutuhkan untuk menyelesaikan tugasnya. Ada 2 jenis ProgressBar yang terdapat pada Android Studio yaitu :

        1.    ProgressBar Rolling

                Jenis ini merupakan turunan dari progressBar yang nilai indikasi kemajuannya tidak tentu, dengan tampilan seperti roda yang berputar-putar. Script nya seperti dibawah ini.

        → Script pada file activity_main.xml.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Mohon Tunggu ...."
    android:textSize="18sp"
    android:textStyle="bold"/>

<ProgressBar
    android:id="@+id/progressBar_cyclic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="30dp"
    android:layout_marginLeft="10dp"
    android:minWidth="20dp"
    android:minHeight="20dp"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"/>

        2.    ProgressBar Horizontal

                ProgressBar Horizontal yaitu yang nilai indikasi kemajuannya dapat ditentukan. contohnya ssat kita mendownload file. Sripct code nya dibawah ini, tambahkan atribut style="?android:attr/progressBarStyleHorizontal"  untuk membuat progressBar Horizontal.

        → Script pada file activity_main.xml.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Sedang Menyimpan Data  ...."
    android:textSize="18sp"
    android:textStyle="bold"/>

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="0dp"
    android:indeterminate="false"
    android:max="100"
    android:minHeight="50dp"
    android:minWidth="200dp"
    android:progress="60"/>

        → Run App.

Hasil Penggunaan ProgressBar

    5.    SeekBar

            SeekBar adalah turunan dari ProgressBar yang digunakan untuk menampilkan indikasi kemajuan suatu proses, hampir sama dengan progressBar biasanya, yang membedakan hanyalah indikasi kemajuan pada SeekBar kita dapat menggeser maju dan mundur dengan ibu jari atau dengan cara di drag. Widget ini umumnya digunakan untuk memindahkan progres lagu, volume, dan lain sebagainya. Sricpt penggunaannya dibawah ini :

        → Script pada file activity_main.xml.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Atur Volume"
    android:textSize="18sp"
    android:textStyle="bold"/>

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbarSize="100dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

        → Run App.

Hasil Penggunaan SeekBar

    6.    RatingBar

           Komponen RatingBar biasa digunakan untuk  mereview sesuatu, contohnya seperti memberikan bintang, memberikan penilaian kesuatu objek sepeti film, game, dll. Peringkat mengembalikan angkat ploating-point, mungkin 1.0, 2.0, dan lain seterusnya, semakin banyak bintang yang di dapat dari klien/konsumen, semakin meningkat juga popularitas pada produk aplikasi android. Dibawah ini cara penggunaanya.

        → Script pada file activity_main.xml.

<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"/>

        → Run App.

Hasil Penggunaan RatingBar

    7.    ScrollView

           Komponen ScrollView digunakan agar konten pada layar aplikasi dapat di Scroll secara vertikal, karena jika tidak menggunakan SrcollView, jika konten kita melebihi ukuran layar maka konten tersebut akan terpotong. ScrollView sangat penting sekali untuk pengembangan aplikasi android, hampir semua aplikasi yang dikembangkan menggunakan ScrollView. Di dalam Android Studio terdapat beberapa jenis ScrollView yaitu ScrollView Vertikal, HorizontalScrollView, dan Nested ScrollView (ScrollView bersarang).

Dibawah ini saya membuat ScrollView Vertikal saja dan cara penggunaanya :

        → Script pada file activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView1" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView2" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView3" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView4" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView5" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView6" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView7" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView8" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView41" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView42" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView43" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Ini TextView44" />
    </LinearLayout>
</ScrollView>

        → Run App.

Hasil Penggunaan ScrollView

    Oke sahabat blogger udah tahu banyak kan komponen-komponen User Interface yang ada di Android Studio, ternyata masih banyak lagi. Next saya akan berbagi lagi, jangan sampe ketinggalan ya hihi... 😁. Sekarang kita belajar tutorial membuat tampilan form Registrasi dengan User Interface yang sudah di pelajari sebelumnya.

Tutorial Membuat Tampilan User Interface Form Registrasi

1.    Buka IDE Android Studio , kemudian kita buat project baru "Create New Project"

Buka Android Studio IDE

Membuat Project Baru

2.    Pilih lah "Empty Activity" ,lalu klik "Next".

Memilih Template Project

3.   Pada Configure Your Project  

Configure Project

Name → TugasModul4 (Bisa diisi sesuai keinginan)

Package Name → bisa di biarkan otomatis, atau bisa diubah menjadi nama blog disini saya menggunakan url blog saya ryeyen08.blogspot.com lalu diikuti nama project TugasModul4 

Save Location → bisa dibrowser sesuai yang di inginkan, disini saya menyimpannya di E:DOKUMEN STIKOM/SEMESTER 6/PAB/Modul4/tugasmodul4

Language → Java

Minimum API Level → API 16 → klik "Finish"

4.    Maka akan tampil IDE Android Studio, setelah itu kita akan ubah "ConstraintLayout" pada "Component Tree". 

Tampilan Jendela Android Studio

5.    Cara ubahnya Klik "Kanan" pada "ConstraintLayout">>"Convert view..."

Mengatur Componet Tree

6.    Maka akan muncul pilihan seperti gambar dibawah, kita pilih "LinierLayout" →  "Apply" untuk menggunakannya.

Memilih Layout yang digunakan

7.     Jika yang muncul LinearLayout (Horizontal) , maka diubah menjadi vertikal dengan cara klik "Kanan" pilih "LinierLayout"→  "Convert Orientation to vertical" seperti gambar dibawah.

Mengubah LinearLayout

8.    Selanjutnya kita akan masuk ke dalam coding, sahabat blogger bisa memilih layar "Split" seperti ini yang terdapat pada pojok kanan atas.

Memilih Posisi Jendela Project

 Agar memudahkan kita untuk melihat tampilan desain pada saat codingan di masukan. Akan tampil seperti ini.

Tampilan Jendela Project

9.    Nah langsung kita ketikan yang pertama itu membuat inputan untuk Username dengan EditText dan untuk atribut tipe datanya inputType="textPersonName". Tampilannya seperti gambar dibawah.

Membuat EditText username

10.    Kedua kita akan membuat inputan untuk Password dengan EditText dan artibut tipe datanya inputType="textPassword", karena passwordnya akan di sembunyikan. Scriptnya dan tampilan seperti dibawah.

Membuat EditText Password

11.    Ketiga kita akan membuat inputan untuk Email dengan EditText dan artibut tipe datanya inputType="textEmailAddress". Script dan tampilannya seperti gambar dibawah.

Membuat EditText Email

12.    Keempat kita akan membuat inputan untuk Phone dengan EditText dan artibut tipe datanya inputType="number", maka keyword yang akan muncul khusus number. Scriptnya dan tampilan seperti dibawah.

Membuat EditText Phone

13.    Kelima kita akan membuat inputan untuk Website dengan EditText dan artibut tipe datanya inputType="textUri". Scriptnya dan tampilan seperti  gambar dibawah.

Membuat EditText Website

14.    Selanjutnya membuat pilihan untuk jenis kelamin dengan RadioGroup dan Radio Button, untuk RadioGroup ini saya simpan di dalam LinearLayout yang baru agar lebih mudah dalam menentukan posisi RadioButton. Script dan tampilan nya akan seperti gambar dibawah.

Membuat RadioGroup dan RadioButton Jenis Kelamin

15.    Sekarang kita tambahkan Button, yang pertama Button untuk Registrasi dan yang kedua Button untuk Login.Kedua Button ini disimpan pada LinearLayout yang pertama diluar LinearLayout RadioButton, seperti gambar-gambar dibawah ini.

Membuat Button Registrasi

Membuat Button Login

17.    Dan terakhir membuat java yang hanya menambahkan fungsi untuk Button Registrasi saja, buka file MainActivity.java lalu ketikan script seperti pada gambar .

        A.    MainActivity.java → letak dimana kita akan menambahkan fungsi java.

        B.    Import → untuk memasukan library agar kita bisa menggunakan komponen yang akan digunakan

        C.    Untuk membuat fungsi onClick pada Button Registrasi.

Script File MainActivity.java

18. Setelah selesai semua dan tidak ada tanda-tanda error merah, maka jalankan Aplikasi dengan klik Run(Shift+F10).

Run App

19. Akan muncul Aplikasi pada layar emulator, langsung coba untuk memasukan data seperti tampilan dibawah ini.

 Aplikasi Form Registrasi

Untuk sahabat blogger yang mempunya spek RAM laptopnya 4GB, maka bisa menggunakan emulator di smartphone. Coba langkah-langkah dibawah ini:

1.     Buka app vystor di PC/Laptop, sambungkan smartphone dengan USB dan atur USB buging nya, maka akan terdeteksi seperti ini, lalu pilih "Run" tombol merah.

Tampilan Vystor di Laptop

2.     Selanjutnya kita Run pada aplikasi yang dibuat, akan muncul tampilan seperti ini. Silahkan bisa dicoba hihi

Tampilan Awal App

Masukan Inputan

Tampilan Output

    Bagimana sahabat blogger bisa ya bisa, jika ada kendala bisa diskusi lewat komentar dibawah atau bisa kirim email ke saya. Semoga bermanfaat ilmunya, next kita ketemu di postingan selanjutnya ya! TETAP SEMANGAT NGULIK !!!