Sharing Knowledge

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

Create UI using XML : Layout View

Layout adalah elemen container dalam user interface. Setiap kali kita mendefinisikan file xml dengan user interface tertentu, kita perlu menggunakan elemen ini untuk membuat hierarky view. Ada beberapa jenis layout, yaitu :

    * LinearLayout
    * TableLayout
    * RelativeLayout
    * AbsoluteLayout
    * FrameLayout
    * ScrollView

1. Linear Layout
Suatu Layout yang mengatur Child View (view anak) ke dalam sebuah baris horisontal atau vertikal tunggal. Linear Layout ini bisa menciptakan scrollbar jika panjang window melebihi panjang screen atau layar.

Seperti biasa buat design tampilan di file xml, misal linear.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">
    
    <EditText android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="one">
     </EditText>
        
    <EditText android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="two">
     </EditText>   
        
    <EditText android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="three">
    </EditText>
    
</LinearLayout>

Di file linear.xml, amati bahwa elemen <LinearLayout> mempunyai elemen <TextView> yang terkandung di dalamnya. Setiap View dan ViewGroup memiliki seperangkat atribut umum, beberapa diantaranya lihat pada Tabel 1.

Attribute

Description

layout_width

Menentukan lebar View atau ViewGroup

layout_height

Menentukan ketinggian View atau ViewGroup

layout_marginTop

Menentukan ekstra ruang pada sisi atas View atau ViewGroup

layout_marginBottom

Menentukan ekstra ruang pada sisi bawah View atau ViewGroup

layout_marginLeft

Menentukan ekstra ruang pada sisi kiri View atau ViewGroup

layout_marginRight

Menentukan ekstra ruang pada sisi kanan View atau ViewGroup

layout_gravity

Menentukan bagaimana posisi Child View

layout_weight

Menentukan berapa banyak ruang ekstra dalam Layout yang akan dialokasikan untuk View

layout_x

Menentukan koordinat-x View atau ViewGroup

layout_y

Menentukan koordinat-y View atau ViewGroup

fill_parent

Mengisi width parent, jika tidak ada parent maka akan mengisi semua lebar layar atau screen

wrap_content

Lebar tergantung pada lebar layout

android:id

Untuk memberikan tanda pengenal ketika ada lebih dari satu widget

                                                       Tabel 1 Attribut umum View dan ViewGroup

Namun tidak semua attribute diatas berlaku untuk keduanya (View dan ViewGroup). Sebagai contoh, layout_weight dan attribut layout_gravity hanya berlaku untuk View di LinearLayout dan TableLayout.

Untuk belajar macam - macam Layout, kita tidak perlu coding di kelas Activity. Kita hanya perlu memanggil nama file di xml (linear.xml) agar tampil saat Android di run.

LinearLayout.xml

package android.LinearLayout;

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

public class LinearLayout 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


2. Table Layout
Kita dapat mengatur posisi widget di baris dan kolom. TableLayout ini memiliki unsur-unsur TableRows. Setiap TableRows ini dapat menyimpan satu atau lebih kolom.

Buat file xml dengan nama table.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">
    <TableRow>
        <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="First Name:" >
        </TextView>
        
        <EditText android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Barack">
        </EditText>
    </TableRow>
    
    <TableRow>
        <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Last Name:">
        </TextView>
        
        <EditText android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Obama">
        </EditText>
    </TableRow>
    
</TableLayout>

Hasilnya setelah runtime seperti gambar dibawah ini


                                 Gambar 2 Table Layout


3. Relative Layout
Dalam RelativeLayout, anda dapat menentukan posisi Child View agar relatif terhadap satu sama lain.

Isi relatif.xml dengan elemen - elemen dibawah ini

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

<TextView android:id="@+id/userNameLbl"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Username: "

android:layout_alignParentTop="true" >

</TextView>

<EditText android:id="@+id/userNameText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/userNameLbl" >

</EditText>

<TextView android:id="@+id/pwdLbl"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/userNameText"

android:text="Password: " >

</TextView>

<EditText android:id="@+id/pwdText"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/pwdLbl">

</EditText>

<TextView android:id="@+id/pwdHintLbl"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/pwdText"

android:text="Password Criteria... " >

</TextView>

<TextView android:id="@+id/disclaimerLbl"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:text="Use at your own risk... " >

</TextView>

</RelativeLayout>

Perhatikan bahwa setiap View dalam RelativeLayout memiliki atribut yang memungkinkan mereka untuk menyesuaikan dengan View lain. Atribut-atribut ini adalah:

  • layout_alignParentTop

  • layout_alignParentLeft

  • layout_alignLeft

  • layout_alignRight

  • layout_below

  • layout_centerHorizontal


                              Gambar 3 Relative Layout

4. Absolute Layout
Di Absolute Layout ini anda menentukan sendiri letak Child View. Gambar 4 menunjukkan dua tombol atau Button View terletak pada posisi tertentu dengan menggunakan android_layout_x dan atribut android_layout_y. Sebagai panduan bahwa titik (0,0) berada di layar bagian kiri atas

Absolute.xml

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <Button
        android:layout_width="188px"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_x="126px"
        android:layout_y="361px"
        />
    <Button

android:layout_width="113px"

        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_x="12px"
        android:layout_y="361px"
        />

</AbsoluteLayout>

Gambar dibawah menunjukkan dua tombol atau Button View terletak pada posisi tertentu dengan menggunakan android_layout_x dan atribut android_layout_y.


                                   Gambar 4 Absolute Layout

5. Frame Layout
Frame Layout adalah Layout yang bertindak sebagai frame view (bingkai tampilan) untuk menampilkan suatu objek.. Dalam gambar 5 itu kita menggunakan imageView yang ditaruh di res/drawable.

Buat kode di frame.xml. Dalam Frame Layout ini kita menggunakan imageView, jadi copy sebuah image dan taruh di res/drawable.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    android:id="@+id/widget68"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="40px"
        android:layout_y="35px"
        >        
        <ImageView
            android:src = "@drawable/androidlogo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />            
    </FrameLayout>
</AbsoluteLayout


                                  Gambar 5 Frame Layout

Jika kita coba menambahkan widget lain, salah satunya seperti Button maka Button ini akan menindih (ovelap) view sebelumnya

<Button

            android:layout_width="124px"
            android:layout_height="wrap_content"
            android:text="Print Picture"       
            />


                         Gambar 6 Overlapping Frame Layout

6. Scroll View
Scroll View digunakan untuk men-scroll list yang panjangnya melebihi panjang screen atau layar. ScrollView hanya dapat berisi satu Child View atau ViewGroup, yang biasanya adalah sebuah LinearLayout.

<?xml version="1.0" encoding="utf-8"?>

<ScrollView

android:id="@+id/widget54"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android"

>

<LinearLayout

android:layout_width="310px"

android:layout_height="wrap_content"

android:orientation="vertical"

>

<Button

android:id="@+id/button1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 1"

/>

<Button

android:id="@+id/button2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 2"

/>

<Button

android:id="@+id/button3"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 3"

/>

<EditText

android:id="@+id/txt"

android:layout_width="fill_parent"

android:layout_height="300px"

/>

<Button

android:id="@+id/button4"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 4"

/>

<Button

android:id="@+id/button5"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 5"

/>

</LinearLayout>

</ScrollView>

 

                                     Gambar 7 Scoll View

 

_netoya_

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

Comments:

Post a Comment:
  • HTML Syntax: Allowed