Puji syukur alhamdulillah saya panjatkan kehadirat Allah SWT yang telah melimpahkan rahmat, taufiq serta hidayah-Nya. Dan sholawat serta salam saya tetap curah limpahkan ke junjungan nabi Muhammad SAW.
Ebook ini merupakan tulisan pertama saya tentang Pemrograman Android. Ebook ini saya buat dengan tujuan sebagai catatan untuk saya sendiri dan untuk berbagi kepada semua temen-temen yang sedang memulai belajar pemrograman android seperti saya ini.
Dalam ebook ini berisi tentang layout pada pemrograman android. Sebenarnya ebook ini saya buat setelah saya mempraktekkan video tutorial tentang Layout yang dibuat oleh Luh Putu Prapita yang saya temukan di youtube. Terima Kasih kepada Luh Putu Prapita telah membuat video tutorial tentang Layout sehingga memudahkan saya dalam memulai belajar pemrograman android.
Saya berharap ebook ini bisa memberi manfaat kepada saya dan juga kepada seluruh teman-teman dan khalayak ramai yang membaca ebook ini.
Ebook ini hanya membahas tentang layout. Layout yang dibahas pada ebook ini adalah:
- Liner Layout
- Relative Layout
- Absolut Layout
- Table Layout
Tool Yang Dibutuhkan
Untuk bisa mempraktekkan isi dari ebook ini, anda membutuhkan tool/alat yang bisa digunakan untuk membuat applikasi android yaitu Eclipse IDE atau yang lainnya, ADT dan SDK. Tool yang saya gunakan seperti berikut:
- Linux Mint 16 XFCE (OS)
- Eclipse IDE 4.2 Kepler
- Android SDK r22.3
- ADT
Disini saya tidak menjelaskan langkah-langkah instalasi semua tool tersebut. Dan juga saya tidak menjelaskan bagaimana cara membuat project. Anda bisa temukan cara itu semua di internet dengan mudah. Disini saya hanya memberikan inteface dan source codenya.
Pengenalan
Unit dasar dari sebuah applikasi android adalah activity. Activity ini berfungsi untuk menampilkan user interface (UI) yang didalamnya bisa berisi beberapa widget seperti TextView, Button, EditText dan lain-lain. Dalam satu applikasi android, bisa terdapat lebih dari satu activity tergantung sang programmer ingin memberi berapa activity.
1. Linear Layout
Pada Linear Layout suatu activity dianggap satu baris dan satu colum. Sehingga ketika kita menambahkan widget akan diletakkan secara berurutan sesuai dengan orientasi linear layout. Orientasi linear layout bisa vertikal dan bisa horizontal. Untuk lebih jelasnya mari kita bahas satu-satu.
1.a Linear Layout Vertikal
Seperti yang sudah dijelaskan diatas bahwasanya widget yang kita tambahkan pada linear layout akan diletakkan secara berurutan karena linear layout dianggap satu baris dan satu colum. Pada linear layout vertikal, widget yang kita tambahkan akan diurutkan dari atas kebawah. Silahkan perhatikan gambar dibawah ini:
1.a Linear Layout Vertikal
Pada gambar diatas, terdapat 5 widget yaitu TextView, dua EditText dan dua Button. Kelima widget tersebut disusun secara vertikal. Untuk membuat seperti gambar diatas, silahkan ketikkan code program berikut:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Linear_Layout_Vertical"
android:gravity="center"
android:textSize="20sp"/>
<EditText>
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="User_Name"/>
<EditText>
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Password"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_below="@id/passwd"
android:layout_toLeftOf="@id/btnCancel"/>
</LinearLayout>
Untuk lebih jelasnya silahkan anda tambahkan widget lain. Dan perhatikan letak widget yang anda tambahkan.
1.b Linear Layout Horizontal
Linear layout horizontal merupakan kebalikan dari linear layout vertikal. Pada linear layout horizontal ini, widget yang kita tambahkan akan diurutkan dari kiri ke kanan. Silahkan perhatikan gambar dibawah ini:
1.b Linear Layout Horizontal
Pada gambar diatas saya menambahkan 3 widget Button, yang mana 3 widget button tersebut diurutkan secara horizontal dari kiri ke kanan karena orientasi yang digunakan pada linear layout adalah horizontal. Untuk membuat seperti pada gambar diatas, silahkan ketikkan code program berikut:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Exit" />
</LinearLayout>
Silahkan tambahkan widget lagi dan perhatikan letak widget yang anda tambahkan.
2. Relative Layout
Relative Layout sangat berbeda dengan dengan linear layout. Pada relative layout kita bisa mengatur tata letak dari sebuah widget berdasarkan pada widget yang lain. Silahkan perhatikan gambar dibawah ini:
2. Relative Layout
Pada gambar diatas terdapat 4 widget. 2 widget EditText dan 2 widget Button. Widget EditText password diletakkan di bawah widget EditText User Name, widget Button Cancel di letakkan dibawah widget password dan disebelah kanan. Sedangkan widget button Login di letakkan dibawah EditText password dan disebelah kiri button Cancel. Jadi, pada relative layout ini kita mengatur tata letak suatu widget berdasarkan pada widget yang lain. Untuk membuat seperti gambar diatas, silahkan ketikkan kode program berikut:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/user"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="User_Name"/>
<TextView
android:id="@+id/passwd"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:layout_below="@id/user"/>
<Button
android:id="@+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_below="@id/passwd"
android:layout_alignParentRight="true"/>
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_below="@id/passwd"
android:layout_toLeftOf="@id/btnCancel"/>
</RelativeLayout>
Silahkan anda modifikasi code diatas agar anda bisa lebih memahaminya. Dan silahkan anda tambahkan widget lain dan silahkan atur tata letaknya sesuai dengan yang anda inginkan.
3. Absolut Layout
Pada Relative Layout ini kita mengatur tata letak sebuah widget berdasarkan koordinat x dan y. Silahkan perhatikan gambar dibawah ini:
3. Absolut Layout
Widget-widget diatas diatur berdasrkan koordinat x dan y. Untuk lebih jelasnya silahkan anda ketikkan dan jalankan code program berikut:
<AbsLayoutLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Absolut_Layout"
android:textSize="20sp"
android:layout_x="50dp"
android:layout_y="75dp"/>
<Button
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Button_Satu"
android:layout_x="20dp"
android:layout_y="120dp"/>
<Button
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Button_Dua"
android:layout_x="60dp"
android:layout_y="170dp"/>
<Button
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Button_Tiga"
android:layout_x="100dp"
android:layout_y="220dp"/>
</AbsLayoutLayout>
Silahkan anda modifikasi code diatas dan silahkan tambahkan widget lain dan atur sesuai koordinat x dan y seperti yang anda inginkan.
4. Table Layout
Table Layout berbeda dengan Linear Layout. Kalau di Linear Layout suatu activity dianggap satu baris dan satu colum. Tapi kalau di table layout kita bisa mendefinisikan beberapa baris dan beberapa colum. Silahkan perhatikan gambar dibawah ini:
4. Table Layout
Pada gambar diatas mungkin cuma terlihat ada 5 widget. Tapi sebenarnya pada gambar diatas terdapat 6 widget. Karena sebelum widget button Submit ada 1 widget TextView yang kosong. Kenapa masih diberi 1 widget TextView kosong? Karena kalau tidak dikasih TextView kosong tampilannya akan seperti pada gambar berikut:
Jadi sebenarnya TextView kosong tersebut hanya digunakan sebagai manipulasi tampilan agar terlihat lebih rapi dan indah. Biar anda lebih paham, silahkan anda ketikkan dan jalankan code program berikut:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama: "/>
<EditText
android:inputType="text"
android:layout_width="230dp"
android:layout_height="wrap_content"/>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alamat: "/>
<EditText
android:inputType="text"
android:layout_width="230dp"
android:layout_height="wrap_content"/>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"/>
</TableRow>
</TableLayout>
Perlu anda perhatikan bahwasanya setiap kita ingin menambahkan widget pada table layout kita harus menambahkan TableRow terlebih dahulu. Setelah itu, baru anda tambahkan widget yang lain didalam widget TableRow sehingga dalam TableRow ini terbentuk beberapa field yang terlihat seperti colum. Silahkan anda modifikasi code program diatas dan silahkan tambahkan widget lagi sehingga anda bisa lebih memahaminya.
Penutup
Sekian dari saya semoga ebook ini bisa membantu dan bisa menjadi referensi kita dalam memulai belajar pemrogrman android. Semoga saya bisa membuat ebook-ebook selanjutnya meskipun isi dari ebooknya sangat sederhana. Kritik dan saran dari para pembaca sangat saya harapakan demi memperbaiki kekurangan-kekurangan yang ada. Kriti dan saran dapat anda kirim melalui contact saya.
Sumber
