Sharing Knowledge

« Create UI using XML... | Main | Android Resource »
Thursday May 13, 2010

Android Container

Container dalam Android berperan dalam pengaturan widget atau component untuk membentuk desain aplikasi anda. Container ini bisa kita letakkan di dalam beberapa Layout seperti Linear Layout, Relative Layout, Table Layout dan Scroll View.

1. Linear Layout
Untuk menkonfigurasi Linear Layout, ada 5 jenis container yang mendukung yaitu orientation, fill model, weight, gravity and padding.

a. Orientation
Orientation atau orientasi menunjukkan apakah LinearLayout mewakili baris atau kolom. Tambahkan properti android: orientation pada LinearLayout dalam file XML anda, pengaturan nilainya adalah horisontal untuk baris atau vertikal untuk kolom.  Orientation ini dapat dimodifikasi pada runtime dengan menerapkan method setOrientation ().

b. Fill Model
Ada 2 macam fill model yaitu wrap_content dan fill_parent
- wrap_content, yaitu lebar tergantung pada lebar layout
- fill_parent, yaitu widget harus mengisi width parent, jika tidak ada parent maka akan mengisi semua lebar layar atau screen

c. Weight
layout:weight berfungsi untuk menetukan berapa banyak ruang ekstra dalam Layout yang akan dialokasikan untuk View.

d. Gravity
layout_gravity berfungsi untuk menentukan bagaimana posisi Child View.

e. Padding
Padding berfungsi untuk memberikan spasi pada widget ? widget yang ditampilkan dengan menggunakan properti android:padding atau memanggil method setPadding() pada kelas Activity.


      Gambar 1, menunjukkan relation antara widget, cell dan padding values

Contoh working with resource ini kita hanya bermain di xml. Sedangkan di kelas Activity untuk memanggil file xml yang berisi design yang telah kita buat.

main.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  >
  <RadioGroup android:id="@+id/orientation"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5px">
    <RadioButton
      android:id="@+id/horizontal"
      android:text="horizontal" />
    <RadioButton
      android:id="@+id/vertical"
      android:text="vertical" />
  </RadioGroup>
  <RadioGroup android:id="@+id/gravity"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="5px">
    <RadioButton
      android:id="@+id/left"
      android:text="left" />
    <RadioButton
      android:id="@+id/center"
      android:text="center" />
    <RadioButton
      android:id="@+id/right"
      android:text="right" />
  </RadioGroup>
</LinearLayout>

LLContainer.xml
 package android.countainers;

import android.app.Activity;
import android.os.Bundle;

public class LLCountainer extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Gambar 1 Linear layout Container

2. Relative Layout
Container yang bisa digunakan dalam Relative Layout antara lain :
a. android: layout_alignParentTop, widget harus sejajar dengan bagian atas container.
b. android: layout_alignParentBottom, widget harus sejajar dengan bagian bawah container             
c. android: layout_alignParentLeft, sisi kiri widget harus sejajar dengan sisi kiri container
d. android: layout_alignParentRight, sisi kanan widget harus selaras dengan sisi container
e. android: layout_centerHorizontal, widget harus diposisikan secara horizontal pada pusat container
 f. android: layout_centerVertical, widget harus diposisikan secara vertikal di pusat container
g. android: layout_centerInParent, widget harus diposisikan secara horisontal dan vertikal di tengah wadah.

main.xml

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="5px">
  <TextView android:id="@+id/label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="URL:"
    android:paddingTop="15px"/>
  <EditText
    android:id="@+id/entry"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/label"
    android:layout_alignBaseline="@id/label"/>
  <Button
    android:id="@+id/ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/entry"
    android:layout_alignRight="@id/entry"
    android:text="OK" />
  <Button
    android:id="@+id/cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/ok"
    android:layout_alignTop="@id/ok"
    android:text="Cancel" />
</RelativeLayout>

 
   Gambar 2 Relative layout Container

3. Table Layout
TableLayout bekerja sama dengan TableRow. TableLayout mengontrol perilaku container secara keseluruhan kemudian widget diletakkan ke dalam satu atau lebih TableRow container.
Untuk lebih jelasnya, lihat contoh pendeklarasian container di TableLayout berikut :

main.xml

 <?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:stretchColumns="1">
  <TableRow>
    <TextView
        android:text="URL:" />
    <EditText android:id="@+id/entry"
      android:layout_span="3"/>
  </TableRow>
  <View
    android:layout_height="2px"
    android:background="#0000FF" />
  <TableRow>
    <Button android:id="@+id/cancel"
      android:layout_column="2"
      android:text="Cancel" />
    <Button android:id="@+id/ok"
      android:text="OK" />
  </TableRow>
</TableLayout>

   Gambar 3 Table layout Container

4. Scroll View
Keterbatasan ukuran layar telepon mengharuskan kita menggunakan sebuah scroll untuk melihat informasi yang panjang. ScrollView adalah container yang menyediakan scrolling untuk isinya.

main.xml

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
  <TableLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="0">
    <TableRow>
      <View
        android:layout_height="80px"
        android:background="#000000"/>
      <TextView android:text="#000000"
        android:paddingLeft="4px"
        android:layout_gravity="center_vertical" />
    </TableRow>
    <TableRow>
      <View
        android:layout_height="80px"
        android:background="#440000" />
      <TextView android:text="#440000"
        android:paddingLeft="4px"
        android:layout_gravity="center_vertical" />
    </TableRow>
    <TableRow>
      <View
        android:layout_height="80px"
        android:background="#884400" />
      <TextView android:text="#884400"
        android:paddingLeft="4px"
        android:layout_gravity="center_vertical" />
    </TableRow>
    <TableRow>
      <View
        android:layout_height="80px"
        android:background="#aa8844" />
      <TextView android:text="#aa8844"
        android:paddingLeft="4px"
        android:layout_gravity="center_vertical" />
    </TableRow>
    <TableRow>
      <View
        android:layout_height="80px"
        android:background="#ffaa88" />
      <TextView android:text="#ffaa88"
        android:paddingLeft="4px"
        android:layout_gravity="center_vertical" />
    </TableRow>
    <TableRow>
      <View
        android:layout_height="80px"
        android:background="#ffffaa" />
      <TextView android:text="#ffffaa"
        android:paddingLeft="4px"
        android:layout_gravity="center_vertical" />
    </TableRow>
    <TableRow>
      <View
        android:layout_height="80px"
        android:background="#ffffff" />
      <TextView android:text="#ffffff"
        android:paddingLeft="4px"
        android:layout_gravity="center_vertical" />
    </TableRow>
  </TableLayout>
</ScrollView>

     Gambar 4 Scroll View Container

 

_netoya_

Posted at 01:42AM May 13, 2010 by nety ozora in General  |  Comments[0]

Comments:

Post a Comment:
  • HTML Syntax: Allowed