PENGENALAN KOMPONEN UI PADA ANDROID STUDIO

1.1. Kompetensi Pengenalan Komponen UI Pada Android Studio 1.2. Tujuan Mahasiswa mengerti, memahami dan dapat menggunakan Komponen UI yang ada pada Android Studio 1.3. Teori Singkat Modul Ini berfokus pada pengenalan User Interface. User Interface merupakan sesuatu yang bisa dilihat oleh user dan berfungsi sebagai media bagi user berinteraksi dengan perangkat. Activity menggunakan method setContentView(R.layout.namafilexml) untuk merender tampilan pada layar perangkat. Komponen User Interface terbagi menjadi beberapa kategori : 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, Progress bar, spinner, dan Webview. Widget disebut juga dengan UI Control. 3. Text Field : Dengan komponen ini user dapat melakukan input teks. 4. Container : Merupakan komponen yang umum digunakan untuk menampilkan komponen-komponen yang sama. Beberapa container yaitu radio group, list view, scroll view. 5. 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 Views 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 KOMPONEN UI – BASIC VIEW Yang akan kita pelajar 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 : 1) TextView 2) EditText 3) Button 4) ImageButton 5) ImageView 6) Checkbox 7) ToggleButton 8) RadioButton 9) RadioGroup a. Atribut Untuk menentukan bagaimana objek View akan ditampilkan di layar maka kita perlu menambahkan atribut pada objek View. Kita dapat menambahkan atribut pada tag xml. Contoh : Mengatur atribut panjang dan tinggi suatu View dapat kita tentukan dengan menuliskan kode di bawah android:layout_width=”match_parent” android:layout_height=”wrap_content” b. Identifier Kita menggunakan atribut “id” pada tag xml untuk memberikan identifier pada objek View kita. Id tersebut akan kita gunakan untuk mereferensikan objek tersebut. Gunakan atribut id=”@+id/namaId” untuk menambahkan id pada objek View. 1.4. Pelaksanaan Praktikum 1.4.1. Praktikum Apps.1 (Komponen 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 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 1. Pertama jalankan aplikasi IDE Android Studio, caranya : a. Pilih Start → Android Studio b. Pilih → Start a new Android Studio Project c. Pilih → Empty Activity → Next

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

3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :

1.4.2. Praktikum Apps.2 (Komponen EditText) EditText adalah elemen UI untuk memasukkan dan memodifkasi text, di dalam penerapannya atribut edittext seperti input type harus ditetapkan secara spesifik, 1. Pertama jalankan aplikasi IDE Android Studio, caranya : a. Pilih Start → Android Studio b. Pilih → Start a new Android Studio Project c. Pilih → Empty Activity → Next

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

3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :

1.4.3. Praktikum Apps.3 (Komponen Button & Image) Komponen Button adalah UI elemen dimana user dapat meng-klik atau melakukan tap untuk menghasilkan sebuah action. Dan Komponen ImageView adalah elemen yang biasa digunakan untuk menampilkan image file ke dalam aplikasi. 1. Pertama jalankan aplikasi IDE Android Studio, caranya : a. Pilih Start → Android Studio b. Pilih → Start a new Android Studio Project c. Pilih → Empty Activity → Next

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

3. Setelah itu buka project di android studio Kembali, lalu cari folder Res/Drawable/ di dalam stuktur folder project kita. Lalu kilik kanan pada folder Drawable Pilih Paste.

4. Klik OK pada pilihan tempat penyimpanan file kita dan beri/ubah nama file kita, jangan menggunakan spasi dalam penamaan file, karena naninya akan menjadi kendala dalam peanggilan file tersebut Ketika app android kita akan di jalankan .

5. Ketikan script pada file activity_main.xml seperti text di bawah ini:

6. Jalankan di emulator 1.4.4. Praktikum Apps.4 (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. Pertama jalankan aplikasi IDE Android Studio, caranya : a. Pilih Start → Android Studio b. Pilih → Start a new Android Studio Project

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

3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini:

1.4.5. Praktikum Apps.5 1. Pertama jalankan aplikasi IDE Android Studio, caranya : a. Pilih Start → Android Studio b. Pilih → Start a new Android Studio Project c. Pilih → Empty Activity → Next