29 December 2012

Cara Penggunaan Layout di Android - Linear Layout dan Relative Layout

Setelah tahu cara menginstal adt plugin pada eclipse sebelumnya, Pada pembelajaran kali ini, saya akan berbagi tentang penggunaan layout di Android. Saya kategorikan Linear Layout dan Relative Layout menjadi layout utama.

Perbedaan diantara keduanya terletak pada tata letak penempatan elemen yang ada di dalamnya.

Linear layout adalah layout yang terstruktur. linear layout akan meletakkan elemen yang ada di dalamnya secara berurutan tergantung orientationnya. jika  orientationnya vertical, maka peletakan elemen akan terurut kebawah. Sedangkan jika orientationnya horizontal (secara default, orientation horizontal tidak ditulis di dalam XML), maka peletakan elemennya akan terurut ke samping.

Sednagkan pada Relative layout adalah layout yang tergantung. Relative layout akan meletakkan elemen secara bebas, tidak terurut. Peletakan berdasarkan ketergantungannya kepada yang lain misal kepada parent atau kepada elemen lain.

untuk lebih jelasnya, buatlah project "Contoh Layout". buka folder layout, lalu liat XMLnya.

gantikan isinya dengan kode layout dibawah ini.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

    </RelativeLayout>
  
</LinearLayout>
Di layout tersebut, terdapat tiga sub layout yaitu linear vertical, linear horizontal, dan relative layout. Setelah itu, lakukan penambahan elemen pada tiap layout dengan DRAG and DROP melalui graphical layout. lihat apa yang terjadi..

ini adalah layout modifikasi saya :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <requestFocus />
        </EditText>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <EditText
            android:id="@+id/editText3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="54dp"
            android:layout_marginTop="22dp" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/editText3"
            android:layout_marginRight="76dp"
            android:text="Button" />

    </RelativeLayout>
   
</LinearLayout>


Masih banyak layout yang lain, saya harap Anda belajar sendiri bagaimana menggunakannya. Karna saya yakin dengan belajar sendiri, akan lebih mengena maksudnya. Termasuk dengan contoh yang saya berikan ini, hanya secuil dari fungsi-fungsi yang ada di Android. Sekali lagi, Anda harus mencoba. Untuk pertanyaan lebih lanjut bisa dengan menulis comment dibawah ini. :D Terima kasih

Selanjutnya saya akan sharing tentang menggunakan tombol dengan onClickListener button android.

10 comments:

  1. gitu to. lanjutkan karyamu

    ReplyDelete
  2. terimaksih bnyak atas pengajarannya.

    ReplyDelete
  3. mantap sekali pak, terimakasih ilmunya

    ReplyDelete
  4. tq infonya.

    folback
    http://perumnas3.blogspot.com/

    kunjungan balik.

    ReplyDelete
  5. Tutarni : Terima kasih atas tutorial yang sangat bermanfaat, saya akan mencoba semoga berhasil, mohon dibanyakin lagi tutorialnya ya...

    ReplyDelete
  6. Bermanfaat sekali ilmu nya gan. Makasih sebelumnya.
    http://muhammadfarizcb.blogspot.com/

    ReplyDelete
  7. ilmunya bermanfaat. trimakasih bung

    ReplyDelete