July 24, 2024

Cara Membuat Aplikasi Android: “Membedakan Layout pada Android”

3 min read

Halo PalComSter! Para programmer yang berbahagia, kali ini akan masuk pengenalan layout Android sebelum kita membuat sebuah aplikasi Android. Pada saat tahap perancangan aplikasi Android, diperlukan tata letak komponen yang rapi sehingga tampilan aplikasi yang dibuat terlihat cantik. Ada beberapa tata letak atau layout yang bisa digunakan di Android, yaitu:

  1. Linear Layout
  2. Relative Layout
  3. Table Layout, dan Tab Layout.

Penggunaan berbagai macam layout tersebut selain Tab Layout akan didemokan dalam satu aplikasi yang diberi nama ‘PerbedaanLayout’.

1. Relative Layout

RelativeLayout adalah layout yang menampilkan elemen-elemen view dalam posisi relatif. Posisi dari sebuah view dapat diletakkan relatif terhadap posisi elemen view di sekitarnya atau relatif terhadap area layout utama. Sebuah desain tampilan aplikasi bisa dibuat lebih mudah dan sederhana menggunakan RelativeLayout dibandingkan dengan LinearLayout. Mari lihat implementasinya.

[sourcecode language=”java”]

<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">

<TextView android:id="@+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="7dip"
android:text="My Notes in the morning…" />
<EditText
android:id="@+id/tf"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dip"
android:hint="write ur day here…"
android:layout_below="@id/text" />
<Button
android:id="@+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tf"
android:layout_alignParentRight="true"
android:width="160dip"
android:drawableLeft="@android:drawable/ic_input_get"
android:text="Share" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/share"
android:layout_alignBottom="@id/share"
android:layout_alignParentLeft="true"
android:drawableLeft="@android:drawable/ic_input_add"
android:text="Add"
/>

</RelativeLayout>

[/sourcecode]

Tampilan yang dibuat akan memiliki tampilan teks (TextView), tombol (Button) dengan gambar, dan text field (EditText). Beberapa elemen view diberi id. Id ini akan menjadi sebuah identitas atau nama untuk suatu elemen view agar bisa diacu oleh elemen view lainnya.

Kita lihat dari xml di atas, text field dengan id tf berada di bawah teks dengan id text melalui pengaturan atribut android:layout_below. Tombol dengan id share pun berada di bawah text field tf. Atribut android:layout_marginBottom pada text field tf digunakan agar ada jarak tambahan di bawah view text field. Dalam hal ini, jaraknya adalah sebesar 30 dip. Atribut android:layout_alignParentRight pada tombol dengan id share akan memposisikan tombol tersebut rata kanan relatif terhadap parent-nya. Parent dari tombol share adalah RelativeLayout. Lalu tombol tanpa id ditempatkan di kiri tombol share melalui atribut android:layout_toLeftOf. Untuk mempercantik tampilan tombol, digunakanlah gambar yang sudah menjadi bawaan Android. Hal ini dilakukan melalui atribut android:drawableLeft. Ini artinya, gambar yang ditempatkan berada di kiri teks.
Mari lihat hasilnya melalui emulator. Kita akan dapatkan tampilan sebagai berikut.

ss-layout-android

2. Linear Layout

LinearLayout adalah layout yang menampilkan elemen-elemen view dalam arah linear, vertikal atau pun horizontal. Ini adalah layout paling sederhana di Android. Mari lihat implementasinya di Android.

 

[sourcecode language=”java”]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">

<TextView
android:text="innovation for Indonesia.."
android:background="#4c0000" android:textSize="10pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<TextView
android:text="turn on our dreams!"
android:textSize="13pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:text="ya!"
android:layout_marginTop="30pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
[/sourcecode]

Bisa kita lihat, tampilan yang dibuat akan memiliki tampilan teks (TextView) dan tombol (Button). Ukuran teks diatur melalui atribut android:textSize. Salah satu teks juga diberi warna background (latar belakang) dengan kode warna #4c0000 melalui atribut android:background.
Mari lihat hasilnya melalui emulator. Kita akan dapatkan tampilan sebagai berikut.

ss-layouter2

3. Table Layout

TableLayout adalah layout yang menampilkan elemen view dalam suatu posisi baris dan kolom dalam suatu representasi tabel. Bagi Anda yang sudah pernah mempelajari HTML, penggunaan TableLayout disini seperti penggunaan table dengan tag <table> dan <tr>. Mari lihat seperti apa bedanya.

[sourcecode language=”java”]
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">

<TextView android:text="Toko Buku Pintar" android:textSize="12pt" android:background="#70a2c1" android:padding="3dip" android:layout_marginBottom="20dip" android:layout_gravity="center_horizontal"/>
<TableRow>
<TextView
android:text="Email"
android:layout_column="0"
android:padding="3dip"/>
<TextView
android:text=":"
android:padding="3dip"/>
<EditText
android:padding="3dip" android:width="240dip"/>
</TableRow>
<TableRow>
<TextView
android:text="Password"
android:layout_column="0"
android:padding="3dip"/>
<TextView
android:text=":"
android:padding="3dip"/>
<EditText
android:padding="3dip"
android:width="240dip"
android:password="true"/>
</TableRow>

<Button
android:text="Sign In"
android:layout_margin="20dip"
android:drawableRight="@android:drawable/ic_menu_compass"
android:padding="3dip"/>

</TableLayout>
[/sourcecode]

File tablelayout.xml akan merepresentasikan tabel dengan 4 baris. Baris pertama ada teks “Toko Buku Pintar”. Di baris kedua terdapat TableRow yang merepresentasikan sebuah baris dalam suatu tabel. TableRow seperti tag pada HTML. TableRow sendiri sebenarnya adalah layout untuk menyusun elemen-elemen view di dalamnya secara horizontal. Jika di dalam tag ada tiga buah elemen view, berarti dalam posisi baris ini terdapat tiga kolom yang terisi. Bagaimanapun, penempatan awal elemen view bisa kita atur melalui atribut android:layout_column pada view.

Kita lihat dari file xml, android:layout_column=”0″ menandakan elemen view ditempatkan di kolom ke-0. Jika elemen selanjutnya tidak didefinisikan penempatan kolomnya, penempatan elemen view akan berada kolom sebelah kanannya dari view yang ada.

Jika kita bandingkan baris 1 dengan baris 2, mungkin muncul pertanyaan “kenapa baris pertama tidak menggunakan tag ?” Baris pertama dalam xml ini langsung menggunakan elemen view, yaitu TextView. Ini berarti, satu baris hanya terdiri dari satu elemen view. Hal ini bisa dilakukan, tidak harus sebuah baris selalu direpresentasikan dengan TableRow.

ss-layouter-3

Itulah ketiga buah layout sederhana yang bisa digunakan saat membuat aplikasi berbasis Android. Masih ada jenis layout yang lain di Android. Silakan dieksplorasi lebih lanjut.

Referensi :

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.