Dokumen tersebut membahas desain antarmuka pengguna untuk aplikasi Android menggunakan berbagai jenis tampilan seperti text view, edit text, button, picker view, list view, spinner view, dan fragment. Secara khusus membahas cara menambahkan dan mengonfigurasi komponen-komponen tersebut di dalam kode XML dan Java.

1. Designing Your User
Interface
with Views
Mohammad Faried Rahmat S.ST., M.Tr.T

2. Apa yang dipelajari ?
• Bagaimana Membuat Tampilan Standard Dari Aplikasi Android yang
anda Buat
• Bagaimana Menggunakan Picker Views untuk Menampilkan List Item
• Bagaimana menggunakan List View untuk Menampilkan List Dari Item
• Memahami Fragment Pada Android Studio

3. Tampilan Dasar Android
• Dalam Basic View Terdiri Dari TextView, EditText, Dan Button
• Textview dapat kita gunakan untuk menampilkan teks di layar. Baris
kode xml di bawah merupakan atribut yang umum digunakan pada
textView.

4. Contoh & Code
Tampilan TextView

5. Penjelasan
• Pada Tampilan Diatas Menggunakan Layout Dengan Tipe Linear
Layout
• Terdapat 2 text Pada Tampilan dengan ID Masing Masing Dengan
nama myfirsttext, dan mysecondtext dengan ukuran 20 SP ( Scale-
independent Pixel ) ukuran sp biasa digunakan untuk ukuran standart
dari text di android

6. EditText
• EditText merupakan komponen yang digunakan Ketika kita akan melakukan
edit pada sebuah field text untuk menambahkan EditText dengan menuliskan
kode xml berikut :

7. Code & Hasil
<EditText android:id="@+id/myTextField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:hint="Tuliskan sesuatu ..."/>

8. Penjelasan
• Pada Code Diatas Field Edit text dengan ukuran menyesuaikan layar
dengan menggunakan match_parent pada layout_width
• Margin Atas berjarak 50dp
• Dengan Adanya Text Bantu Android:hint berisi Tuliskan Sesuatu ….

9. Button
• Kita dapat menambahkan Button dengan menuliskan kode xml berikut :
• <Button android:id="@+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#2980b9"
android:textColor="#FFFFFF" android:text="TOMBOL"/>

10. Penjelasan
• Pada Code Button diatas memiliki margin atas / layout_margintop
sebesar 50dp
• Dengan Background Code untuk button / tombol #2980b9 warna
biru teal
• Android:textcolor digunakan untuk mewarnai text
dengan warna putih

11. Hasil

12. Picker Views
• Dalam Picker Views Terdiri dari TimePicker

13. Code TimePicker
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:gravity="center_horizontal|center_vertical"
android:layout_height="match_parent">
<Button
android:id="@+id/bt_showtimepicker"
android:text="Show TimePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Waktu dipilih : "
android:id="@+id/tv_timeresult"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
TAMBAHKAN PADA ACTIVITYMAIN.XML

14. Penjelasan
• Layout yang digunakan linear layout
• Button Digunakan untuk menampilkan Show Time Picker
• Textview kolom disini digunakan untuk memilih secara custom waktu
yang akan dipilih

15. • Tambahkan Pada MainActivity.java

16. #2

17. Penjelasan
• Import yang dibutuhkan mengenai memanggil library : TimePicker,
Button TextView , dateformat ,dll
• Selanjutnya Fungsi OnCreate untuk menampilkan halaman utama
dengan komponen
• ShowTime Dialog disini menampilkan waktu yang dapat dicustom
sesuai waktu yang diinginkan

18. Hasil

19. List View
• Dalam List View Terdiri Dari View yang berfungsi menampilkan daftar
( dalam bentuk List ), Meliputi List View dan Spinner View
• Berikut Contoh List View

20. Code List View
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/simpleListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=“tugas.com.listexample.MainActivity">
</ListView>

21. Penjelasan
• ListView ini menggunakan id @+id/simpleListView
• Menggunakan layout match_parent dan wrap_parent
• Tools:context digunakan untuk penghubung setiap layout

22. Hsil

23. Spinner View
• Spinner adalah salah satu view atau widge yang cukup banyak
digunakan pada Aplikasi Android, Widget Spinner digunakan untuk
menampilkan List/Dropdown menu, yang terdiri dari item-item, untuk
memuahkan user dalam memilih sebuah konten pada aplikasi, kita
dapat menyimpan item/valuenya menggunakan sebuah Array atau
ArrayList, lalu menampilkannya pada Spinner.

24. Tambahkan Pada ActivityMain.xml

25. • Tampilan pada SpinnerView ini menggunakan Tipe Constraintlayout
• Spinnerwidget memiliki ukuran layout height 50dp dan width 160dp
• Dengan Margin atas,bawah,kanan, kiri 10dp

26. Tambahkan Pada MainActivity.java

27. Penjelasan
• Library yang diimport Array, spineer
• String Course disini berisi list array Course. Yang nantinya ditampikan
pada dropdown
• ArrayAdapter digunakan untuk mengumpulkan list array yang telah
ditentukan pada Listarray String Course ke Dropdwon

28. Hasil

29. Fragment
• Android Fragment adalah sebuah bagian dari user interface atau
perilaku sebuah aplikasi yang dapat ditempatkan pada activity yang
memungkinkan untuk mendesain activity yang modular. atau bisa
dikatakan fragment semacam sub-activity.

30. Siklus Hidup Fragment
• Class fragment memiliki kode yang terlihat hampir seperti Activity.
Fragment berisi method callback mirip dengan Activity, seperti
onCreate (), onStart (), onPause (), dan OnStop (). Siklus hidup dari
fragment berhubungan dengan siklus hidup Activity, berikut tahapan
siklus hidup fragment yang berkaitan dengan siklus hidup dari
activity.