PENGENALAN KOMPONEN UI

April 02, 2021

PENGENALAN KOMPONEN UI

Hii Sobat searchpediaa .. dimanapun anda berada jangan lupa tetap jaga kesehatan dengan menerapkan 5M. Semoga dengan teratur & disiplinnya, kita semua mampu melewati ini semua & Berakhirnya wabah ini dengan cepat .. Amiiinnn

Kali ini admin yang tampan ingin berbagi pengetahuan & hasil praktikum mimin selama kuliah di mata kuliah : Pemrograman Aplikasi Bergerak di tingkat 6 ini. Doain juga yaa supaya mimin bisa lulus di th dpn. mimin jg gk nyangka bisa secepet ini kuliah padahal cuman haha-hihi tiba2 udah semester 6..ckck

Okay tak usah banyak cakap..

Lets goo mari kita belajar Tentang Pengenalan Komponen UI

*Pengertian UI

UI Atau User Interface (Antarmuka pengguna)merupakan bentuk tampilan grafis yang berhubungan langsung dengan pengguna (user) . Antarmuka pengguna berfungsi untuk menghubungkan antara pengguna dengan sistem operasi. sehingga komputer tersebut bisa digunakan merupakan tampilan grafis yang berhubungan langsung dengan pengguna user. Antarmuka pengguna berfungsi untuk menghubungkan antara pengguna dengan sistem operasi, sehingga komputer tersebut bisa digunakan.

Secara umum, tujuan dari teknik interaksi manusia-mesin adalah untuk menghasilkan sebuah antarmuka pengguna yang membuatnya mudah, efisien, dan menyenangkan untuk mengoperasikan sebuah mesin dengan cara yang menghasilkan hasil yang diingikan, Ini biasanya berarti bahwa operator harus menyediakan input minimal untuk mencapai output yang diharapkan , dan juga bahwa mesin harus meminimalkan output yang tidak diinginkan .

Komponen User Interface terbagi menjadi beberapa kategori :

Layout : Layout merupakan perluasan dari kelas ViewGroup. Layout berfungsi sebagai wadah komponen lainnya. Layout mengatur bagaimana komponen lainnya akan ditampilkan. Jenis - jenis yaitu LinearLayout,RelativeLayout, FrameLayout, TableLayout, dan GridLayout.
Widget : Widget terdiri dari Button, Checkbox, Textview, Switches,Imageview, Progress bar, spinner, dan Webview. Widget disebut jugan dengan UI control.
Text Field : Dengan komponen ini user dapat melakukan input teks.
Container : Merupakan komponen yang umum digunakan untuk menampilkan komponen - komponen yang sama. Beberapa Container yaitu radio Group, list view, scroll view.
Date & Time : Komponen ini digunakan untuk menampilkan tanggal dan waktu.

Ada beberapa terminologi umum untuk User Interface ( Antarmuka) android , yaitu:

1) Views : View adalah base class untuk semua komponen visual (biasa disebut sebagai controls atau widgets). Semua widget UI, termasuk layout UI, mewarisi kelas View.

2) View Groups : View Group adalah perluasan dari kelas View yang berfungsi menampung beberapa child View.

3) Fragments : Fragments berfungsi sebagai pembungkus layout dan mengoptimasi tampilan layout pada ukuran layar perangkat yang berbeda-beda.

4) Activities : Activity adalah sesuatu yang ditampilkan, yang merepresentasikan window atau layar. Untuk menampilkan User Interface maka kita melekatkan View pada activity.

Untuk mempermudah dalam pengelompokan , maka view dikelompokkan menjadi :

1) Basic Views : Basic view merupakan objek View dasar yang meliputi Widget (Control) dan TextField

2) Picker Views : Merupakan View yang menyediakan list untuk dipilih user, seperti TimePicker dan DatePicker.

3) List Views : Merupakan View yang menampilkan item list yang panjang, seperti ListView dan SpinnerView

Yang akan kita pelajarin pada modul ini, Yaitu :

Cara menggunakan "Basic View" Untuk mendesain UI
Cara mendapatkan referensi objek yang kita tambahkan di xml
Menambahkan event handler pada objek View.

Basic "View" Yang akan kita kenali yaitu :

TextView
EditText
Button
ImageButton
ImageView
Checkbox
ToggleButton

Setelah saya mencoba menggunakan laptop saya yang potato ini tidak berhasil menjalankan emulatornya, akhirnya saya memutuskan menggunakan PC dengan spesifikasi :

RAM : 8 GB
PROCESSOR : CORE I3-4160 CPU @3.60GHz
STORAGE : SSD 240GB
OS : WINDOWS 10
GRAPHIC CARD : INTEL(R) HD GRAPHICS 4400

*Selagi anda ingin belajar, jangan putus asa. Tetap semangat cari jalan keluarnya. Mimin saranin untuk bisa menggunakan virtual melalui smartphone sendiri jika tidak ingin mengupgrade kondisi laptopnya

Kalau anda sudah berhasil masuk ke virtualnya melalui android studio, kita lanjutkan kembali :

Text View
TextView adalah elemen pada android studio yang digunakan untuk menampikan output berupa text pada UI sesuai dengan tampilan gambar di atas, textview dilengkapi oleh banyak atribut-atribut yang antara lain dan biasa di gunakan sebagai berikut:

➢ text: Text yang akan ditampilkan

➢ textsize: Ukuran text

➢ textcolor: Warna text

➢ textALLCAPS: Menampilkan text semuanya kapital

➢ textStyle: Style (Normal, Bold, Italic, BoldItalic) untuk text

Step by step nya :

1. Pertama jalankan aplikasi IDE android studio

a. Pilih Start → Android Studio

b. Pilih → Start a new Android Studio Project

c. Pilih → Empty Activity → Next

Configure Your Project :

Name → Modul3TextView

Package Name → ubah menjadi nama blog kalian masing-masing, di sini saya menggunakan url
blog ini lalu di ikuti nama project modul3textview

Save Location → Bebas

Language → Java

Minimum API Level → API bebas disesuaikan dengan spesifikasi anda → Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml
seperti text di bawah ini:

Hasilnya Setelah di run:

2. EditText

adalah elemen UI untuk memasukkan dan memodifkasi text, di dalam penerapannya atribut edittext seperti input type harus ditetapkan secara spesifik, Silahkan perhatikan contoh berikut :

Hasilnya :

Ok lanjut ke penjelasan dari attribut EditText. Bisa dilihat diatas ada id layout width, layout height, hint, inputType, Layout marginTop, disini saya akan menjelaskan hint dan inputType saja karena untuk yang lainnya sudah diberikan penjelasan di textView.

Hint, berfungsi untuk menampilkan sebuah text didalam inputan yang biasanya berupa petunjuk agar user tau apa yang harus diinputkan pada inputan tersebut.
InputType, berfungsi untuk menentukan type dari inputan yang harus diinput oleh user, contohnya seperti email , password, tanggal , nama orang ,dll.

3. Button , ImageButton, dan ImageView

Button atau tombol biasanya memiliki fungsi untuk melakukan perintah tertentu seperti login atau submit. ImageButton adalah salah satu widget dari komponen User Interface yang berfungsi untuk menampilkan gambar. ImageView adalah salah satu widget yang digunakan untuk menampilkan sebuah gambar baik itu format .jpg ataupun .png

Kita akan memasukkan gambar ke folder res/drawable, berikut langkah - langkahnya :

Copy Gambar

Pertama Copy gambar yang akan kita masukan ke folder res/drawable

folder res/drawable

Pada sisi kiri Android Studio , pada tab Project kita pilih folder res lalu klik kanan pada folder drawable dan klik paste

memilih tempat penyimpanan

Selanjutnya pilih tempat penyimpanannya , klik saja sesuai gambar diatas lalu ok.

memberi nama file

Lalu, akan ada menu untuk mengubah nama file, silahkan dirubah jika diperlukan lalu klik Refactor atau ok. Selanjutnya perhatikan syntax contoh berikut :

Mari kita bedah atribut diatas, untuk syntax yang ini hampir tidak ada atribut yang baru, cuman satu attribut yang baru, yaitu src. Apa fungsi dari src? src memiliki kepanjangan source yang artinya adalah sumber. kalau attribut src berfungsi untuk mencari sumber data atau gambar. Hasil dari sytaxt diatas adalah sebagai berikut :

Memang cukup sederhana dikarenakan tidak banyak attribut yang kita praktekan .

4. RadioButton, RadioGroup, Checkbox, & ToggleButton

Komponen RadioGroup dan RadioButton adalah elemen yang telah disediakan oleh Android Studio yang biasa digunakan untuk menampilkan pilihan yang akan dipilih berupa satu lingkaran kecil dengan titik ditengahnya, yang nantinya akan digunakan sebagai opsi input

Pada dasarnya Toggle Button adalah Tombol/Button di android yang dimodifikasi sehingga mempunyai dua buah state, yaitu ON atau OFF. Toggle Button sifatnya di dunia nyata mirip saklar lampu, dimana kita bisa menyalakan atau mematikan saklar tersebut.

Langsung kita lihat contohnya :

Seperti biasa kita akan membahas attribut yang baru muncul saja, dikarenakan yang lainnya sudah kita pernah bahas di point sebelumnya , pertama untuk checked berfungsi untuk menentukan apa yang secara default dipilih oleh aplikasi , lalu ada style berfungsi untuk menentukan gaya dari checkbox.

Ini adalah hasil dari running code diatas:

Membuat Aplikasi Form Sederhana

Membuat sebuah aplikasi form sederhana yang bisa menampilkan lagi hasil dari inputan yang kita input.

Pertama kita buka Aplikasi Android Studio, Lalu klik Create New Project

Ini adalah tampilan awal dari project yang kita kerjakan :

Tampilan awal project

Silahkan pilih tampilan daru UI Android Studio, Boleh code atau split . disini kita memilih split

Rubah androiddx.contraintlayout.widget.ConstraintLayout jadi LinearLayout.

Ini hasilnya setelah dirubah :

Untuk selanjutnya kita coding di activity_main.xml sesuai dengan gambar dibawah

Perhatikan tag <RelativeLayout> pada diatas. RelativeLayout adalah layout yang penataannya ini menempatkan widget - widget didalamnya seperti layer, sehingga sebuah widget dapat berada di atas / dibawah widget lainnya. Sedangkan Relative merupakan layout yang penataannya lebih bebas sehingga bisa di tata dimana saja . Dapat diartikan Relative Layout adalah desain tampilan pada aplikasi dengan tata letak objek atau komponen secara bebas tanpa aturan sesuai orientasi (Horizontal atau vertical) seperti yang di terapkan pada Linear Layout.

Selanjutnya perhatikan atribut dalam tag Button. Bisa kita lihat disitu ada atribut layout centerInParent. Layout centerInParent adalah suatu atribut yang berfungsi menempatkan tag Button pada posisi di tengah - tengah "Parent" yang dalam syntax diatas "parent" itu adalah tag RelativeLayout.

Berikut adalah tampilan design dari activity main: