Praktikum Pengenalan Komponen UI

     Assalammualaikum

Pada postingan kali ini, saya akan membahas komponen - komponen UI yang terdapat di Android Studio. Secara umum arsitek User Interface (UI) pada aplikasi android adalah user interface yang meliputi Activity dan User Interface yang terdiri dari komponen.

Semua yang berhubungan dengan User Interface pada aplikasi android biasanya berada pada lokasi res/layout/namafile.xml (nama file adalah nama file project yang akan dibuat, contoh tes.xml), dimana koding java untuk memanggilnya yang kita kenal dengan R.layout.namafile.

Saat aplikasi berjalan, antarmuka XML di-loadkedalam event handler onCreate() pada class activity dengan menggunakan method setContentView(). Ketika project dijalankan atau di Run maka setiap elemen didalam file XML akan dikompilasi menjadi class GUI (Graphic User Interface) android, dengan atribut yang diwakili oleh method. Sistem android kemudian menciptakan UI Activity ketika di-load.

    Komponen yang terdapat di User Interface pada android adalah sebagai berikut :

1.      <ViewGroup>

Kumpulan view dimana kita dapat menentukan tata letak komponen view secara berbeda, seperti LinearLayout, RelativeLayout, FrameLayout, serta Tabulasi. Atribut dari ViewGroup yang biasa dipakai adalah sebagai berikut :

a.       android.id, yang berisi variable unik dari element tersebut.

b.      android:layout_height, dimensi value-nya (height) yang digabungkan dengan opsi "match_parent” atau "wrap_content".

c.       android:layout_width, dimensi value-nya (width) yang digabungkan dengan opsi "match_parent" atau "wrap_content".

 

2.      <View>

Sama seperti <ViewGroup> tetapi <View> lebih dikenal dengan "individual UI component", atributnya juga minimal terdiri dari tiga yang sama persis dengan atribut yang dimiliki oleh <ViewGroup>

 

3.      <requestFocus>

Element kosong yang bisa kita definisikan didalam <view>

 

4.      <include>

Memasukkan file layout kedalam layout. Atributnya sama dengan <ViewGroup> dan <view> tetapi ada satu tambahan atribut yaitu <resource> yang berfungsi untuk menentukan file layout-nya.

Komponen UI - Basic View yang akan dipelajari disini adalah :

1.      TextView

2.      EditText

3.      Button

4.      ImageButton

5.      ImageView

6.      CheckBox

7.      ToggleButton

8.      RadioButton

9.      RadioGroup

Baiklah, setelah pengenalan singkat dari saya, saya akan mencoba membuat projek sesuai dengan urutan Basic View yang akan dipelajari :

A.                 TextView

TextView adalah elemen pada Android Studio yang digunakan untuk menampilkan output berupa text pada UI sesuai dengan tampilan gambar di atas, TextView dilengkapi oleh banyak atribut - atribut yang antara lain dan biasa digunakan sebagai berikut :

a.       text: Text yang akan ditampilkan

b.      textsize: Ukuran text

c.       textcolor: Warna text

d.      textALLCAPS: Menampilkan text semuanya kapital

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

untuk langkah pembuatan projeknya sebagai berikut

1.      Jalankan aplikasi IDE Android Studio, caranya :

a.       Klik Start lalu klik Android Studio

b.      Klik Start a new Android Studio Project

c.       Pilih Empty Activity lalu Next

Configure Your Project 

·         Name                           : Modul3TextView

·         Package Name             : Diubah menjadi nama blog masing – masing, disini saya akan menggunakan url blog saya gustidjafiralasdialbar.blogspot.com lalu diikuti nama project modul3textview

·         Save Location             : C:\Users\User\AndroidStudioProjects\Modul3TextView

·         Language                    : Java

·         Minimum API Level   : API 16

Lalu klik Finish

2.      Kemudian muncul tampilan Android Studio, setelah itu ketik script pada file activity_main.xml seperti text dibawah ini :

3.      Kemudian buka Vysor dan jalankan scriptnya, maka akan muncul tampilan seperti ini

 

B.                 Edit Text

Edit Text adalah elemen UI untuk memasukkan dan memodifikasi text, didalam penerapannya atribut edittext seperti input type yang harus ditetapkan secara spesifik.

1.      Jalankan aplikasi IDE Android Studio, caranya :

a.       Klik Start lalu klik Android Studio

b.      Klik Start a new Android Studio Project

c.       Pilih Empty Activity lalu Next

Configure Your Project

·         Name                           : Modul3EditText

·         Package Name             : Diubah menjadi nama blog masing – masing, disini saya akan menggunakan url blog saya gustidjafiralasdialbar.blogspot.com lalu diikuti nama project modul3edittext

·         Save Location             : C:\Users\User\AndroidStudioProjects\Modul3EditText

·         Language                    : Java

·         Minimum API Level   : API 16

Lalu klik Finish

2.      Kemudian muncul tampilan Android Studio, setelah itu ketik script pada file activity_main.xml seperti text dibawah ini :

3.      Kemudian buka Vysor dan jalankan scriptnya, maka akan muncul tampilan seperti ini

 

C.                Komponen Button & Image

Komponen Button adalah UI elemen dimana user dapat mengklik atau melakukan tap untuk menghasilkan sebuah action. Dan komponen ImageView adalah elemen yang biasa digunakan untuk menampilkan image file ke dalam aplikasi.

1.      Jalankan aplikasi IDE Android Studio, caranya :

a.       Klik Start lalu klik Android Studio

b.      Klik Start a new Android Studio Project

c.       Pilih Empty Activity lalu Next

Configure Your Project

·         Name                           : Modul3ButtonImage

·         Package Name             : Diubah menjadi nama blog masing – masing, disini saya akan menggunakan url blog saya gustidjafiralasdialbar.blogspot.com lalu diikuti nama project modul3buttonimage

·         Save Location             : C:\Users\User\AndroidStudioProjects\Modul3ButtonImage

·         Language                     : Java

·         Minimum API Level   : API 16

Lalu Klik Finish

2.      Maka akan tampil IDE Anroid Studio, siapkan sebuah file jpg/image jika bisa gunakan foto anda dengan resolusi kecil saja, buka file Explore dan copy file yang akan dipilih

3.      Setelah itu buka project Android Studio yang sebelumnya, lalu cari folder Res/Drawable/ didalam struktur folder project kita. Lalu klik kanan pada folder Drawable kemudian Paste

4.      Klik OK pada pilihan tempat penyimpanan file kita dan ubah nama file seperti apa yang kita mau, dengan syarat tidak boleh adanya pemakaian spasi, karena takut terjadi error ketika script dijalankan

5.      Setelah itu ketik script pada file activity_main.xml seperti text dibawah ini :

 

Untuk bentuk desain kurang lebih akan seperti ini :

6.      Kemudian buka Vysor dan jalankan scriptnya, maka akan muncul tampilan seperti ini

D.                 Komponen RadioButton

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.

1.      Jalankan aplikasi IDE Android Studio, caranya :

a.       Klik Start lalu klik Android Studio

b.      Klik Start a new Android Studio Project

c.       Pilih Empty Activity lalu Next

Configure Your Project

·         Name                           : RadioButtonGrup

·         Package Name             : Diubah menjadi nama blog masing – masing, disini saya akan menggunakan url blog saya gustidjafiralasdialbar.blogspot.com lalu diikuti nama project radiobuttongrup

·         Save Location             : C:\Users\User\AndroidStudioProjects\RadioButtonGrup

·         Language                     : Java

·         Minimum API Level   : API 16

Lalu Klik Finish

2.      Kemudian muncul tampilan Android Studio, setelah itu ketik script pada file activity_main.xml seperti text dibawah ini :

3.      Kemudian buka Vysor dan jalankan scriptnya, maka akan muncul tampilan seperti ini

 

E.                 Komponen Button

1.      Jalankan aplikasi IDE Android Studio, caranya :

a.       Klik Start lalu klik Android Studio

b.      Klik Start a new Android Studio Project

c.       Pilih Empty Activity lalu Next

Configure Your Project

·         Name                           : Modul3Button

·     Package Name             : Diubah menjadi nama blog masing – masing, disini saya akan menggunakan url blog saya gustidjafiralasdialbar.blogspot.com lalu diikuti nama project modul3button

·         Save Location             : C:\Users\User\AndroidStudioProjects\Modul3Button

·         Language                     : Java

·         Minimum API Level   : API 16

Lalu klik Finish

 

2.      Kemudian muncul tampilan Android Studio, setelah itu ketik script pada file activity_main.xml seperti text dibawah ini :

Cara mendapatkan referensi objek dan menambahkan event hadler

Kita menggunakan 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 klik pada tombol, gunakan interface setOnClickListener(..)

3.      Selanjutnya ketikan script pada file MainActivity.java seperti text dibawah ini :

4.      Kemudian buka Vysor dan jalankan scriptnya, maka akan muncul tampilan seperti ini

LATIHAN TUGAS

            Tugas yang akan dibuat kali ini tentang menampilkan Nama dan tempat tinggal seseorang, untuk langkah – langkahnya seperti ini :

1.      Jalankan aplikasi IDE Android Studio, caranya :

a.       Klik Start lalu klik Android Studio

b.      Klik Start a new Android Studio Project

c.       Pilih Empty Activity lalu Next

Configure Your Project

·         Name                           : Modul3LatihanTugas

·         Package Name             : Diubah menjadi nama blog masing – masing, disini saya akan menggunakan url blog saya gustidjafiralasdialbar.blogspot.com lalu diikuti nama project modul3latihantugas

·         Save Location             : C:\Users\User\AndroidStudioProjects\Modul3LatihanTugas

·         Language                     : Java

·         Minimum API Level   : API 16

Lalu klik Finish

2.      Kemudian muncul tampilan Android Studio, setelah itu ketik script pada file activity_main.xml seperti text dibawah ini :

3.      Setelah itu ketik script pada file MainActivity.java seperti text dibawah ini :

4.      Kemudian buka Vysor dan jalankan scriptnya, maka akan muncul tampilan seperti ini

 

Sekian penjelasan tentang komponen UI dan tutorial untuk menampilkan nama dan tempat tinggal, kurang lebihnya mohon maaf

Wassalammualaikum