Pengenalan Komponen User Interface (UI) Android Studio

 

Haii teman – teman semua! Di postingan sebelumnya kita sudah membahas tentang pengenalan android studio dan membuat tampilan biodata sederhana menggunakan tools yang ada di android studio. Nah, sekarang kita akan membuat latihan – latihan langsung dari kode programnya, tapi sebelumnya kita kenalan dulu dengan komponennya yaitu Komponen UI (User Interface) android studio.

User Interface (UI) adalah komponen – komponen yang ada pada aplikasi android, secara umum user interface (UI) meliputi activity. Activity menggunakan method setContentView(R.layout.filenamexml) untuk merender tampilan pada layer perangkat. Semua yang berhubungan dengan UI pada aplikasi android biasanya berada pada lokasi res/layout/filename.xml. Cara termudah membangun UI adalah dengan menggunakan file XML statis, namun terkadang kita memerlukan UI yang dinamis saat aplikasi berjalan, oleh karena itu dimungkinkan pula menciptakan UI melalui kode program.

Komponen UI terbagi menjadi beberapa kategori yaitu :

1. Layout : layout merupakan perluasan dari kelas ViewGroup. Layout berfungsi sebagai wadah komponen lainnya. Layout mengatur bagaimana komponen lainnya akan ditampilkan. Jenis – jenis layout yaitu LinearLayout, RelativeLayout, FrameLayout, TableLayout, dan GridLayout.
2. Widget : widget terdiri dari button, CheckBox, TextView, Switches, ImageView, Progressbar,spinner, dan WebView. Widget disebut dengan UI Control.
3. TextField : dengan komponen ini user dapat melakukan input teks.
4. Container : merupakan komponen yang umum digunakan untuk menampilkan komponen – komponen yang sama. Beberapa komponen container yaitu RadioGroup, ListView, ScrollView.
5. Date & Time : komponen ini digunakan untuk menampilkan tanggal dan waktu.

Komponen UI – Basic View diantaranya ada :

1. TextView adalah elemen pada android studio yang digunakan untuk menampilkan output berupa text pada UI seperti gambar dibawah ini 
    

   

   
   
   
   
2. EditText adalah elemen UI untuk memasukkan dan memodifikasi text, di dalam penerapannya atribut EditText seperti input type harus ditetapkan secara spesifik 
   
   
   
   
   
   
   
   
   
   
   
3. Button adalah UI elemen dimana user dapat meng-klik atau melakukan tap untuk menghasilkan sebuah action. 
   
   
   
   
   
   
4. ImageView adalah elemen yang biasa digunakan untuk menampilkan image file ke dalam aplikasi. 
    

   
   
   
5. RadioGroup dan RadioButton adalah elemen yang telah disiapkan oleh Android Studio yang biasa untuk menampilkan pilihan yang dipilih berupa satu lingkaran dengan titik tengah, yang nantinya digunakan sebagai opsi input. 
   
   
   
   
   
   
6. CheckBox digunakan untuk menampilkan pilihan dimana kita bisa memilih dari satu (multiple choice), berbeda dengan spinner atau radio button dimana kita hanya bisa memilih satu pilihan. 
    

   
7. ImageButton adalah salah satu widget dari komponen UI yang berfungsi untuk menampilkan gambar, namun tidak hanya gambar, ImageView bisa juga kita navigasikan menjadi sebuah Button, untuk mengeksekusi program dan juga dapat menghubungkan antar activity. Berbeda dengan ImageView, pada ImageView kita hanya dapat menampilkan gambar saja. 
    

    

Sedikit penjelesan komponen UI Android Studio dan contoh program beserta sintak xml nya. Untuk komponen masih banyak lagi jenisnya, tapi untuk saat ini kita bahasnya hanya basic viewnya saja.

Baiklah sekarang kita langsung membuat latihannya yaitu membuat pengenalan nama dengan komponen yang sudah kita bahas diatas.

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 -> Modul3LatihanTugas

Package Name -> ubah menjadi nama blog atau website kalian masing - masing, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project modul3latihantugas.

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. Maka akan tampil IDE Android Studio 

 

3. Sebelum ke activity_main kalian ubah terlebih dahulu Layout nya 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. Hapus atau tambahkan pada bagian tag <TextView> dan <EditText> dengan sintak dibawah ini. 

 

 Untuk membuat pilihan kota tempat tinggal, gunakan tag <RadioGruop> dan <RadioButton> 

Dan terakhir untuk mengeksekusi yang telah di inputkan kita gunakan tombol dengan tag <Button>

 

6. Seteleh selesai mengetikkan yang kita butuhkan di activity_main.xml untuk memproses ketika kita mengklik tombol maka kata "Selamat datang" akan kita ubah menjadi ucapan "Halo, (Nama yang kita inputkan) Anda dari (Kota yang dipilih)" 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 MainJava.java seperti gambar dibawah ini : 

 

 

8. Kemudian Jalankan emulator tambahan (Vysor) di kedua perangkat yaitu PC dan Handphone kalian masing - masing, dan hasilnya 

 Demikian Pengenalan Komponen UI yang ada di android studio semoga apa yang di sampaikan bermanfaat untuk teman - teman semua. Selamat Mengerjakan!!!

Terima Kasih.