Modul 5: Android Layout

Komponen Layout
Layout adalah komponen dasar dalam pembentukan UI dan merupakan container utama untuk
komponen-komponen lain pada tampilan aplikasi Android. Dalam satu tampilan aplikasi Android bisa
terdapat lebih dari satu Layout dengan adanya sebuah file XML layout sebagai parent, dan
dimungkinkan adanya nested layout dalam satu file UI XML. Penjelasan mengenai XML Layout dapat
dibaca pada http://developer.android.com/guide/topics/ui/declaring-layout.html

Terdapat empat jenis layout utama di Android :

 Linear Layout

 Relative Layout

 Frame Layout

 Grid Layout

Pembedanya adalah pada posisi penempatan komponen-komponen (child view) didalamnya,

sebagai berikut:

Linear Layout
Akan menempatkan komponen-komponen didalamnya secara horizontal atau vertical (menyamping
atau menurun). LinearLayout memiliki atribut weight untuk masing-masing child view yang terdapat
didalam LinearLayout yang berguna untuk mengontrol porsi ukuran view secara Relatif dalam
sebuah ruang (space) yang tersedia.
Relative Layout
Layout yang paling fleksibel dikarenakan posisi dari masing-masing komponen didalamnya dapat
mengacu secara relatif pada komponen yang lainnya dan juga dapat mengacu secara relatif ke batas
layar.

Frame Layout
Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada
didalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya (layering).
Komponen yang paling pertama pada layout ini akan berada dibawah komponen-komponen
diatasnya. Pada materi penggunaan fragment di materi sebelumnya, FrameLayout memiliki
kemampuan untuk menjadi container untuk fragment-fragment didalam sebuah Activity. Berikut
ilustrasi dari penggunaan FrameLayout terhadap child view yang dimiliki didalamnya.

Grid Layout
Diperkenalkan pada API level 14 (Android 4.o / Ice Cream Sandwich), layout ini akan memberikan
kemudahan dengan mengakomodir komponen didalamnya ke dalam bentuk Grid (Kolom dan Baris).
Dalam sebuah referensi, GridLayout merupakan komponen layout yang sangat flexibel dan dapat
dimanfaatkan untuk menyederhanakan pembuatan Layout UI yang bersifat kompleks dan bersarang
yang terdapat di komponen Layout lainnya.
Kapan sebaiknya saya menggunakan masing-masing jenis Layout tersebut?
Pemahaman yang baik terhadap dasar-dasar pembangunan UI di android, pengalaman, feeling, dan
mencari tahu bagaimana best practicenya. Semua tergantung latihan dan seberapa sering kita
berhadapan dengan kasus-kasus melakukan transformasi UI dari bentuk mockup ke dalam bentuk
kode XML di Android. Dengan membiasakan mengkode sisi UI di XML tanpa drag and drop akan
mempercepat pembentukan pola pikir dan feeling kita dalam membangun dan mentransformasi UI
ke dalam bentuk yang dibutuhkan.

Scroll View
ScrollView adalah sebuah komponen yang akan membuat komponen didalam dapat digeser (scroll)
secara vertical dan horizontal. Dengan ScrollView, dimungkinkan ukuran komponen didalamnya
melebihi ukuran screen. Komponen didalam scrollview hanya diperbolehkan memiliki 1 parent
utama dari layout linear, relatif, frame, atau grid layout.

Android Unit
Ekosistem android dikenal dengan fragmentasi spesifikasi device yang sangat bervariasi termasuk
perbedaan dimensi layar dan kerapatan pixel dari layar di masing-masing jenis device, terdapat 3
jenis pengukuran di desain layout android:

 px (pixel)

 dp/dip (density-independent pixel)

 sp (scale-independent pixels)

Untuk tampilan yang konsisten di handset Android terdapat satuan untuk dimensi dan ukuran dari
teks yaitu : dip/dp (density- independent pixel) dan sp (scale-independent pixels). Satuan dp/dip
digunakan untuk satuan dari nilai dimensi misal width (attribut : layout_width) dan height (attribut :
layout_height) dari sebuah komponen view. Sementara satuan sp digunakan untuk ukuran teks.
Perbedaannya dengan dp/dip, satuan sp akan menyesuaikan ukuran teks sesuai dengan setting
ukuran teks di device (yang biasa dapat di akses melalui menu settings oleh user).

Contoh kasus untuk penggunaan Android unit adalah sebagai berikut:

Misalkan terdapat dua tablet yang memiliki ukuran layar diagonal 7-inch. Tablet pertama (A)
memiliki resolusi layar 1200 x 1920px 320dpi dan yang lainnya (B) beresolusi 2048 x 1536px
326dpi.Membuat button dengan ukuran 300×300 px mungkin akan tampak normal pada tablet
A tapi akan tampak kecil di tablet B.

Akan lain cerita, jika kita spesifikasikan ukuran buttonnya dengan ukuran yang bergantung pada
density layar alias menggunakan dip misal 300x300 dp. Button tersebut akan tampak sama pada
devices dengan resolusi berbeda.

Apabila kita menggunakan satuan 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 Device/Emulator Nexus 4. Sehingga ukuran tersebut tampak sama dan konsisten secara
fisik untuk beragam device dengan ukuran layar yang berbeda.

Standar/Konsistensi Tampilan
Aplikasi yang baik harus memiliki User Interface dan User Experience yang konsisten antar device. Ini
adalah sebuah tantangan yang cukup berat di ekosistem Android yang berjalan pada beragam
spesifikasi device yang tersedia di pasaran. Bacaan lebih lanjut :

http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screendensities.html
http://dpi.lv/
https://pixplicity.com/dp-px-converter/
https://www.youtube.com/watch?v=zhszwkcay2A
https://jampasir.wordpress.com/2015/07/15/android-unit-px-pixel-dpdip-density-independent-
pixel- dan-sp-scale-independent-pixels/

Practice Session #5:

Android Layout
Pada CodeLab kali ini kita akan mempelajari implementasi dari beberapa Jenis layout yang terdapat
pada Android SDK untuk membangun sebuah tampilan User Interface untuk sebuah Activity maupun
Fragment. Penulisan pada code xml mungkin akan berbeda-beda berdasarkan subjectivitas
developer. Oleh karna itu saya sarankan untuk sesering mungkin berhadapan dengan tampilan-
tampilan MockUp aplikasi dan mentransformasinya ke dalam UI xml Android.

Penggunaan Library:
CircleImageView (https://github.com/hdodenhof/CircleImageView)

Kebutuhan asset pengembangan (letakkan pada folder/direktori drawable) :

 Image ukuran 400 x 200 pixel untuk image hotel

 Image ukuran 128 x 128 pixel untuk image avatar

1. Buat Project dengan Start a new Android Studio Project

2. Pilih Blank Activity lalu isikan Application Name: LayoutSample dan Company domain dengan
nama yang kamu mau, kemudian Klik Next dan. Lanjutkan hingga Finish. Biarkan gradle
menggenerate project kita.

3. Selanjutnya kita akan mendefinisikan warna dasar pada aplikasi yang akan kita buat melalui
file xml, Caranya: modifikasi file colors.xml di direktori values dengan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#E91E63</color>
<color name="primary_dark">#C2185B</color>
<color name="primary_light">#F8BBD0</color>
<color name="accent">#03A9F4</color>
<color name="primary_text">#212121</color>
<color name="secondary_text">#727272</color>
<color name="icons">#FFFFFF</color>
<color name="divider">#B6B6B6</color>
</resources>

Sekarang seharusnya bisa terlihat warna dasar apa saja yang kita gunakan di sebelah kiri dari masing-
masing baris:

4. Pada file styles.xml, masih di direktori values silakan modifikasi kode di dalamnya sehingga
menjadi seperti ini :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
</style>
</resources>

Tujuan dari kode di atas akan meng-override Base Colors untuk PrimaryColor dan PrimaryDarkColor
pada keseluruhan aplikasi.

5. Pada file strings.xml, masih di direktori Values silakan modifikasi kode didalamnya sehingga
menjadi seperti ini :
<resources>
<string name="app_name">LayoutSample</string>
<string name="hello_world">Hello world!</string>
<string name="action_bookmark">Bookmark</string>
</resources>
Tujuan dari kode di atas akan meng-override teks Settings menjadi Bookmark.

6. Kemudian kita akan membuat menu melalui file xml, Caranya: Buat file xml resource baru
dengan cara klik-kanan pada direktori res -> New -> Android Resource File dan beri nama
menu_main dan Resource Type: Menu, dan Klik OK. seperti contoh di bawah ini:

Setelah terbuat silakan lengkapi dengan kode berikut:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
<item android:id="@+id/action_bookmark" android:title="@string/action_bookmark"
android:orderInCategory="100" app:showAsAction="never" />
</menu>

7. Menambahkan Module CircleImageView, download file tersebut yang memiliki extensi .AAR:

http://repo1.maven.org/maven2/de/hdodenhof/circleimageview/2.0.0/

Tambahkan module tersebut ke project dengan klik menu "File" -> pilih "Project Structure.."
Klik tanda plus kiri atas

Kemudian masukkan library AAR yang didownload dengan pilih import jar/AAR package dan lakukan
sampai selesai.

Setelah itu Klik Modules "app" dan masuk ke tap "Dependencies" kemudian klik tanda "+" sebelah
kanan atas. Pilih "3. Module Dependency" dan pilih "circleimagesview-2.0.0" dan klik OK. Hasilnya
seperti di bawah ini:
Kemudian klik "Sync"

Jika sudah berhasil maka secara otormatis Pada Gradle.build (Module:App) akan tergenerate seperti
di bawah ini:
dependencies{
compilefileTree(include:['*.jar'],dir:'libs')
testCompile'junit:junit:4.12'
compile'com.android.support:appcompat-v7:24.0.0'
compileproject(':circleimageview-2.0.0')
}

8. Masukkan gambar avatar dan banner. Dengan cara salin ke folder drawable di Explorer.
Contoh gambar yang digunakan ditutorial ini dapat didownload: link download bahan.

9. Pada activity_main.xml lengkapi kodenya sebagai berikut.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout android:id="@+id/fr_image" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView android:layout_width="match_parent" android:layout_height="wrap_content"
android:src="@drawable/gambar_hotel"
android:adjustViewBounds="true"/>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:padding="8dp" android:background="#AA000000"
android:layout_gravity="bottom|left" android:layout_marginBottom="20dp">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="$74" android:textSize="28sp" android:textStyle="bold"
android:textColor="@android:color/white"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Pernight" android:textSize="14sp" android:textStyle="normal"
android:layout_marginTop="3dp" android:textColor="@android:color/white"/>
</LinearLayout>
</FrameLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical" android:padding="10dp" android:layout_below="@id/fr_image">
<TextView android:layout_width="match_parent" android:layout_height="wrap_content"
android:text="HiltonHotelIslaNublarResort" android:textSize="24sp" android:gravity="center"
android:textStyle="bold" android:textColor="@color/primary_text"/>
<TextView android:layout_width="match_parent" android:layout_height="wrap_content"
android:text="JurassicWorldAvenue,Westisland,87milesofCostaRica" android:textSize="15sp"
android:gravity="center" android:layout_centerVertical="true"
android:layout_marginTop="15dp" android:layout_marginBottom="15dp"
android:textStyle="normal" android:textColor="@color/primary_text"/>
<de.hdodenhof.circleimageview.CircleImageView android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/avatar" android:layout_gravity="center"
android:layout_marginBottom="10dp" app:civ_border_width="2dp"
app:civ_border_color="@color/primary_text"
/>
<TextView android:layout_width="match_parent" android:layout_height="wrap_content"
android:text="SidiqPermana(owner)" android:gravity="center"
android:layout_gravity="center"/>
</LinearLayout>
<Button
android:layout_width="match_parent" android:layout_height="wrap_content"
android:text="Requesttobook" android:background="@android:color/holo_red_light"
android:textColor="@android:color/white" android:layout_alignParentBottom="true"/>
</RelativeLayout>

Pada kode diatas kita menggunakan kombinasi layout: RelativeLayout, LinearLayout dan
FrameLayout untuk mendapatkan hasil tampilan aplikasi yang diinginkan.

10. Pada MainActivity.java silakan lengkapi kodenya sebagai berikut. Sesuaikan nama package
yang kamu gunakan (Baris 1)
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity; import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

getSupportActionBar().setTitle("Hotel Hilton"); getSupportActionBar().setSubtitle("Isla

Nublar"); getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId();

//noinspection SimplifiableIfStatement if (id == R.id.action_bookmark) {

return true;
}
if (id == android.R.id.home){ finish();
}

return super.onOptionsItemSelected(item);
}
}

Pada kode di atas kita menggunakan SupportActionBar dan memanfaatkan fungsi untuk
menampilkan Judul, Sub-Judul dan Back Button.

11. Silakan Run ke emulator atau device (atau export ke apk untuk install secara manual di
device). Tampilan hasil apps adalah sebagai berikut.
Modul 6: Simple Listview

Listview dan Gridview

Listview merupakan komponen utama yang dapat menampilkan dan menampung data dalam jumlah
yang banyak secara vertical dalam bentuk list yang dapat di-scroll secara vertical. Contoh aplikasi
yang menggunakan Listview adalah Whatsapp. Lebih lanjut mengenai Listview dapat dibaca di
http://developer.android.com/guide/topics/ui/layout/listview.html

Sedangkan gridview merupakan komponen utama yang dapat menampilkan dan menampung data
dalam jumlah yang banyak dalam bentuk grid (baris dan kolom). Biasanya implementasinya adalah
menampilkan katalog barang pada mobile commerce, gallery Image dsb. Salah satu apps yang
memanfaatkan gridview adalah Instagram. Lebih lanjut mengenai Gridview, dapat dibaca pada
tautan http://developer.android.com/guide/topics/ui/layout/gridview.html.
Persamaan dua komponen ini adalah untuk menampilkan data kedalam bentuk List dan Grid
dibutuhkan Adapter yang berfungsi untuk memproses dan menformat tiap item data dalam
GridView atau ListView.

Adapter
Adapter adalah sebuah mekanisme untuk membinding sekumpulan data, memproses dan
memformat tampilan item-item data yang akan ditampilkan melalui listview atau gridview. Lebih
lanjut dapat dibaca pada http://developer.android.com/reference/android/widget/Adapter.html.

Android SDK telah menyediakan Adapter bawaan yang secara default dapat digunakan dan
dikustomisasi sesuai dengan kebutuhan yang ada. Berikut adalah native adapter yang terdapat
didalam Android SDK.

ArrayAdapter : Adapter yang diperuntukan untuk mem-binding data-data dalam format array.

SimpleCursorAdapter : Adapter yang diperuntukan untuk mem-binding data-data column dalam

format objek Cursor (umumnya merupakan hasil nilai balik jika kita melakukan query pada
ContentProvider)

Untuk customisasi Adapter dari Stractch bisa menggunakan BaseAdapter:

http://developer.android.com/reference/android/widget/BaseAdapter.html

Practice Session #6 :
SimpleListView
Pada codelab kali ini kita akan membuat implementasi dari ListView dalam menampung data
bentuk String array sehingga dapat ditampilkan dalam bentuk List yang bisa diakses oleh
pengguna.

Implementasi ListView sangat luas, selain memiliki tujuan utama yaitu menampilkan data dalam
jumlah yang banyak. ListView juga bisa digunakan sebagai tampilan pilihan menu pada aplikasi
Android.

1. Buat Project dengan Start a new Android Studio Project

2. Lalu isikan Application Name dengan SimpleListView dan Company domain dengan nama
yang kamu mau, kemudian Klik Next dan pilih Blank Activity. Lanjutkan hingga Finish. Biarkan
gradle menggenerate project kita.

3. Pada activity_main.xml lengkapi kodenya sebagai berikut.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<ListView
android:id="@+id/lv_i
tem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="@android:color/transparent">
</ListView>
</RelativeLayout>

Pada code diatas kita menambahkan ListView kedalam tampilan xml kita dan nantinya akan kita
manipulasi di class Activity java yang kita punya.

4. Pada MainActivity.java silakan lengkapi kodenya sebagai berikut. Sesuaikan nama package
yang kamu gunakan (Baris 1)
package com.sidiq.codelab.simplelistview;

import android.os.Bundle;
import
android.support.v7.app.AppCompatActi
vity; import android.view.View;
import
android.widget.AdapterVi
ew; import
android.widget.ArrayAdap
ter; import
android.widget.ListView;
import
android.widget.Toast;
public class MainActivity extends
AppCompatActivity { private ListView
lvItem;
private String[] footballClubs = new String[]{
"Juventus", "Manchester United", "Liverpool",
"Bayern Munchen", "Real Madrid", "Ajax
Amsterdam", "Barcelona"
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

lvItem = (ListView)findViewById(R.id.lv_item);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this,
android.R.layout.simple_list_item_1,
android.R.id.text1,
footballClubs);
lvItem.setAdapter(adapter);

lvItem.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(MainActivity.this, "Kamu klik : "+footballClubs[position],
Toast.LENGTH_LONG).show();
}
});
}
}
Pada kode diatas (perhatikan komentar dalam kode) kita melakukan beberapa langkah :

1. Menginisialisasi ListView berdasarkan id yang ada di file layout xml (line 16)
2. Menginisialisasi data String array yang akan kita tampilkan di ListView (line 17)
3. Membuat object adapter dengan menggunakan Adapter bawaah android secara
default dengan menentukan beberapa parameter sebagai inputannya (line 28-37):
a. Class Activity mana yang memanggil/menggunakan class ArrayAdapter
b. Layout xml untuk tampilan item list (disini kita menggunakan bawaan android)
c. Id dari object TextView untuk menampilkan item-item data dari object String
array
d. Sumber data yang akan ditampilkan dalam konteks ini adalah : String array
bernama footballClubs
e. Men-set objek adapter kedalam ListView

5. Silakan Run dengan tombol Run ke emulator atau device atau export ke apk untuk
instal secara manual di device. Tampilan hasil apps adalah sebagai berikut.