Pemrograman Bergerak

Application UI – Xml, Basic Widget, Style

dan Localization
Ramaditia D – [email protected] v1.2
Best Practice
q Desain yang baik untuk performa aplikasi
Cepat dan jika terdapat proses yang memakan waktu, maka jalankan di background dan asynchronous.
q Desain yang baik agar aplikasi dapat bersifat responsive
Berikan feedback ke pengguna terhadap aksi yang dilakukannya
q Desain yang mengakomodasi kebutuhan informasi pengguna
Menampilkan informasi yang dibutuhkan pengguna. Bila diperlukan, aplikasi perlu menampilkan
informasi terakhir yang diperoleh
q Desain untuk optimasi pengunaan baterai
Usahakan agar aplikasi menggunakan daya baterai yang kecil. Minimalisir penggunaan background
service yang tidak perlu
q Desain untuk efisiensi pengunaan koneksi jaringan
Memilah-milah task mana yang perlu dijalankan saat perangkat pengguna terhubung
Resolusi dalam Android
q Resolusi dalam android terdiri dari:
o ldpi digunakan untuk device layar low density atau resolusi
rendah 120dpi (dot per inch),
o mdpi untuk medium (160dpi) ,
o hdpi untuk high density (240dpi) dan
o xhdpi untuk ekstra high density (320dpi).
o xxhdpi untuk resolusi 480dpi
Gambar untuk Semua Jenis Layar
q Agar gambar tetap terlihat bagus pada semua jenis handphone dengan pixel yang berbeda-
beda, maka perlu menyiapkan gambar dengan berbagai versi

q Hal ini untuk mencegah gambar yang digunakan terlihat pecah, kabur atau terlalu kecil pada
device dengan resolusi berbeda.
Satuan Dimensi di Android
q Ekosistem Android dikenal dengan fragmentasi spesifikasi perangkat yang sangat bervariasi.
Beragam perangkat Android memiliki perbedaan dimensi layar dan kerapatan pixel (density).

q Untuk tampilan yang konsisten di perangkat Android, terdapat 2 jenis satuan, yaitu dip/dp
(density-independent pixel) dan sp (scale-independent pixels).

q Satuan dp digunakan untuk satuan dari nilai dimensi misal width (attribut : layout_width) dan
height (attribut : layout_height) dari sebuah komponen view atau viewgroup.

q Satuan sp digunakan untuk ukuran teks. Perbedaannya dengan dp / dip adalah satuan sp
android akan men-scale ukuran teks sesuai dengan setting ukuran teks di peranti (yang biasa
dapat di akses melalui menu settings)
Contoh Satuan Dimensi
Contoh Satuan Dimensi 2
Pada gambar di samping ukuran
200dp akan dikonversi
pada device mdpi (device
dengan density 160dpi/dots per
inch) menjadi 200px dan menjadi
400px pada device xhdpi
(density 420dpi) misal pada Nexus
4. Sehingga ukuran tersebut
tampak sama dan konsisten
secara fisik untuk beragam
peranti dengan ukuran layar yang
berbeda.
Menulis XML
q Extensible Markup Language (XML) adalah notasi untuk menulis file
yang berisi informasi yang disebut element.

q Sebagai contoh sebuah file yang menggambarkan tata letak layar yang
mungkin mengandung unsur - unsur tombol dan gambar.

q Awal setiap element di tandai dengan tag yang di kelilingi dengan

karakter “<“ dan “>”.
Contoh XML
Contoh Membuat UI dengan XML
1. Menggunakan XML

Root element
Attribute

Child element
Attribute

Child element
Attribute
Load XML Layout
q Jika menggunakan XML untuk deklarasi Layout, setiap XML layout tersebut
akan di-compile dalam View resource dan harus di-load pada method
Activity.onCreate() dengan menggunakan method setContentView().
Contoh Membuat UI dengan Java
2. Instansiasi saat Runtime

Declare Widget
 View Hierarchy
View merupakan obyek menggambar komponen
tampilan ke layar yang mana pengguna dapat melihat
dan berinteraksi langsung.

Viewgroup yaitu sebuah obyek yang mewadahi obyek-

obyek view.

Source: https://developer.android.com/guide/topics/ui/declaring-layout
Contoh Widget Turunan dari View
q Text View, widget untuk menampilkan teks

q Button, widget yang berinteraksi dengan user dengan tap atau klik dan
kemudian menampilkan suatu action

q ImageView, widget untuk menampilkan gambar

q GridView, widget untuk menampilkan informasi dalam bentuk grid

q ListView, widget untuk menampilkan infromasi dalam bentuk list

Contoh Layout Turunan dari ViewGroup
q ConstraintLayout, untuk menempatkan widget dengan cara yang fleksibel.

q LinearLayout, untuk menempatkan 1 widget per baris atau kolom secara

sejajar.

q RelativeLayout, untuk menempatkan widget secara relative (bergantung pada

widget yang lain)

q FrameLayout, untuk menempatkan widget yang memblokir area layar.

q TableLayout, untuk menempatkan widget dengan posisi baris dan kolom.

View
Text View
q TextView digunakan untuk menampilkan label teks
Contoh:
q Beberapa contoh property dari TextView :
o android:textSize
o android:textStyle
o android:textColor
q Catatan: pada atribut textSize, direkomendasikan Hasil:
menggunakan ukuran sp. sp merupakan singkatan
dari scaled-pixel yang memperhitungkan
kepadatan resolusi dan juga preferensi ukuran
font dari pengguna.
 1 2 3

Attribut Value:
Wrap Content dan Match Parent
EditText
q EditText digunakan untuk menerima input dari
Contoh:
pengguna.
q EditText adalah perluasan dari TextView yang bisa
diupdate. Fungsi yang biasanya sering digunakan
adalah:
o TxtBox.setText(”nilai tertentu”)
o TxtBox.getText().toString() Hasil:
Button
q Button merupakan turunan dari TextView
Contoh:
sehingga yang berlaku di TextView juga berlaku di
button.
q Tambahan property yang penting adalah:
o onClick
q Catatan: dp yang digunakan sebagai satuan
panjang merupakan singkatan dari density- Hasil:
independen pixel. Nilai pixel untuk 1 dp berubah-
ubah sesuai dengan resolusi. 1 dp pada resolusi
160 pixel berarti 1 pixel. Jika resolusinya 320 pixel,
maka 1 dp = 2 pixel demikian seterusnya.
ImageButton
q ImageButton adalah turunan dari button, Contoh:
gunakan widget ini jika ingin
menggunakan image sebagai pengganti
tulisan pada button.

Hasil:
ImageView
q ImageView dapat digunakan untuk Contoh:
menampilkan image.
q Gambar di widget ImageView bisa diambil
dari Assets atau dari Drawable

Hasil:
CheckBox & RadioButton
q Pada CheckBox, beberapa pilihan boleh aktif.

q Sedangkan pada RadioButton, hanya satu pilihan

yang boleh aktif (mutual exclusive) di dalam satu
group yang disebut radioGroup
ProgressBar
q ProgreessBar adalah view yang berfungsi Contoh:
untuk menampilkan progres.

q Biasanya digunakan untuk keperluan

loading data misalnya ketika kita sedang
mengambil data dari internet maka
Hasil:
bisa menggunakan progressbar untuk
sebagai penanda jika kita sedang
mengambil atau meload data.
View Group
LinearLayout
o Menempatkan widget-widget didalamnya secara horizontal atau vertical.
o Terdapat attribute “weigth” untuk masing-masing child view untuk menentukan porsi
ukuran view

android:orientation=”horizontal” android:orientation=”vertical”
Source: https://developer.android.com/guide/topics/ui/layout/linear.html
Contoh LinearLayout

Linear 1

Linear 1

Linear 2
Linear 2
RelativeLayout
Layout yang paling fleksible dikarenakan posisi dari masing-masing komponen di dalamnya dapat
mengacu secara relatif pada komponen yang lainnya dan juga dapat mengacu secara relatif ke
batas layar.

Beberapa Attribut:
o android:layout_centerHorizontal
o android:layout_centerVertical
o layout_centerInParent
o android:layout_above
o android:layout_below
o android:layout_alignParentBottom
o android:layout_alignParentTop
o android:layout_alignParentLeft
o android:layout_alignParentRigth

Source: https://developer.android.com/guide/topics/ui/layout/relative
Contoh RelativeLayout
FrameLayout
q Layout ini adalah layout yang paling sederhana. Layout ini akan membuat widget yang ada
didalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya (layering).
Contoh FrameLayout
TableLayout
Susunan widget di dalam TableLayout akan berada
dalam baris dan kolom. Namun tidak akan
menampilkan garis pembatas untuk baris, kolom
atau cell-nya.
Contoh TableLayout
Contraint Layout
Memungkinkan Anda membuat tata letak yang kompleks dan besar dengan hierarki tampilan
datar (tidak ada grup tampilan tersarang).

q Relative Positioning q Centering Positioning and Bias

Baca lebih lanjut:

https://developer.android.com/training/constraint-layout
Source: decoding academy
Scroll View
q Layout yang memungkinkan komponen di dalamnya digeser (scroll)
secara vertikal dan horizontal. Komponen di dalam scrollview
hanya diperbolehkan memiliki 1 parent utama dari linearlayout,
relativelayout, framelayout, atau tablelayout.

q Baca lebih lanjut:

q https://developer.android.com/reference/android/widget/ScrollView.html
Style and Themes
 Themes
Setting Themes

Contoh 2 themes pada pada 1 Activity:

Theme.AppCompat (kiri)
dan Theme.AppCompat.Light (kanan)

Apply Themes pada android manifest

Source: https://developer.android.com/guide/topics/ui/look-and-feel/themes
Style
Style merupakan sebuah kumpulan properti yang dibutuhkan untuk mendefinisikan bagaimana
sebuah komponen view dan layar jendela (bisa activity maupun fragment) ditampilkan.
Contoh properti ini adalah height, width, background_color.
Aturan Menggunakan Style

q Semua style yang dibuat harus berada dalam tag resources.

q Semua style yang ingin didefinisikan harus berada dalam tag style.
q Semua atribut yang didefinisikan dalam sebuah style harus berada dalam tag item
Resource Strings
Syntax 1. Buka /res/values/strings.xml
2. Ubah string hello menjadi “Hello, world!
This string from resource string”.
3. sehingga keseluruhan isi strings.xml
menjadi seperti ini.
Menggunakan Resource String
q Menggunakan pada XML

@string/string_name

q Menggunakan pada Java

R.string.string_name
Bisa juga convert menggunakan method getText()
Resource String Array
Format Contoh

Cara menggunakan
Localization
q Untuk menambah jumlah pengguna dari aplikasi, tentunya kita perlu
merangkul lebih banyak pengguna, baik dari dalam maupun luar negeri.

q Di sinilah peran localization dalam aplikasi kita. Localization adalah

mekanisme dari sebuah aplikasi untuk bisa menyesuaikan bahasa dari
konten sebuah aplikasi dengan pengaturan bahasa yang disetel oleh
pengguna.

q Misalnya ketika perangkat menggunakan bahasa Inggris, maka konten dari

aplikasi akan tampil dalam bahasa Inggris.
Localizing dengan Resource String
1. Klik kanan pada strings.xml
2. Pilih “Open Translation Editor” Tambah localizing baru
 Hasil Akhir Aplikasi:

Latihan 1
Linear Layout
 Hasil Akhir Aplikasi:

Latihan 2
Youtube Splash Screen
 Hasil Akhir Aplikasi:

Latihan 3
Sign Up Screen
Referensi
q Official Android Developer Documentation: https://developer.android.com/
q Imaduddin, Ahmad dan Sidiq Permana. 2017. Menjadi Android Developer Expert. Bandung:
PT.Presentologics.