TABLE LAYOUT, ABSOLUTE LAYOUT, RELATIVE LAYOUT, LINEAR LAYOUT, FRAME LAYOUT (LAYOUT MANAGER PADA ANDROID)

AYOK-EDUKATIF - TABLE LAYOUT, ABSOLUTE LAYOUT, RELATIVE LAYOUT, LINEAR LAYOUT, FRAME LAYOUT (LAYOUT MANAGER PADA ANDROID)

Layout Manager

• Untuk meletakan komponen (view) pada layar, android menggunakan layout manager.

“An Android layout is a class that handles arranging the way its children appear on the screen. Anything that is a View can be a child of a layout”

• Jenis layout manager:

Ø Table Layout,

Ø Absolute Layout,

Ø Relative Layout,

Ø Linear Layout,

Ø Frame Layout.

TABLE LAYOUT

• TableLayout meletakan komponen dalam bentuk tabel (baris dan kolom), mirip seperti Table yang digunakan di HTML untuk mengatur layout. Penggunamendefinisikan baris dengan tag <TableRow> dan secara otomatis sistem mendefinisikan kolomnya.

• Kita dapat menentukan bahwa elemen harus menempati lebih dari satu kolom menggunakan android: layout_span. Hal ini dapat meningkatkan jumlah total kolom juga, jadi jika kita memiliki baris dengan dua elemen dan setiap elemen memiliki android: layout_span = "3" maka akan memiliki setidaknya enam kolom dalam tabel.

• Kolom dimulai dari nol

Pertama buka Eclipse,setelah masuk akan muncul tampilan seperti berikut :

Klik File -> New ,lalu klik Android Application Project

Pada Menu Android Application Project akan muncul tampilan berikut lalu kita isi Nama aplikasi,nama projek dan nama package sesuai yang kita inginkan ,setelah terisi kemudian klik next

Klik next lagi untuk melanjutkan menu berikutnya, kemudian kita atur tampilan sesuai keinginan kita ,lalu klik next

Pada menu activity kita pilih saja blank activity lalu klik next

Lalu klik Finish

Setelah membuat projectnya lalu kita atur tampilan projectnya dengan cara klik kanan pilih Change Layout lalu klik

Setelah masuk menu Change Layout kita ubah menjadi Table Layout kemudian klik OK

Lalu kita isikan Codingnya seperti gambar berikut

Berikut gambarnya

Lalu jalankan Android Virtual Device Managernya dengan cara klik Menu Window kemudian > pilih Android Virtual Device Manager

Kita isikan AVD Name, Device, Target, dan CPUnya lalu klik OK

Pilih yang tadi kita buat kemudian klik Start

Kemudian klik Launch

Tunggu loadingnya

Lalu secara otomatis pada Grapichal Layout terisi seperti gambar berikut

Klik Run

Berikut adalah hasilnya

ABSOLUTE LAYOUT

• Absolute layout didasarkan pada ide sederhana dengan menempatkan masing-masing kontrol pada posisi absolut.

• Penentuan koordinat x dan y pada layar untuk setiap kontrol

• Layout ini jarang digunakan karena membuat tidak fleksibel sehingga sangat berisiko dalam proses perbaikan.

Langkah-langkahnya:
Buka eclipse
Klik Menu File -> New -> Android Application Project

Pada Menu Android Application Project akan muncul tampilan berikut lalu kita isi Nama aplikasi,nama projek dan nama package sesuai yang kita inginkan ,setelah terisi kemudian klik next

Kemudian kita atur tampilan sesuai keinginan kita ,lalu klik next

Lalu klik Finish

Setelah membuat projectnya lalu kita atur tampilan projectnya dengan cara klik kanan pilih Change Layout lalu klik, Setelah masuk menu Change Layout kita ubah menjadi Table Layout kemudian klik OK

Lalu Kita isikan coding xmlnya seperti gambar berikut

Berikut gambarnya

Setelah mengisi coding pada xmlnya klik Run Configurations untuk menjalankan aplikasinya

Kita masukan projek yang tadi kita buat dengan cara klik browse , pilih menu Launch dan atur kemudian klik Run

Berikut adalah hasilnya

RELATIVE LAYOUT

• RelativeLayout mengatur posisi secara relatif berdasarkan posisi widget yang lain atau parentnya.

• Hal ini bisa dibilang tata letak yang rumit , dan kita perlu beberapa properti untuk benar-benar mendapatkan tata letak yang kita inginkan

Langkah langkahnya adalah

pertama buka eclipse, setelah masuk klik New > Android Application Project

Pada Menu Android Application Project akan muncul tampilan berikut lalu kita isi Nama aplikasi,nama projek dan nama package sesuai yang kita inginkan ,setelah terisi kemudian klik next

Klik next lagi untuk melanjutkan menu berikutnya, Kemudian kita atur tampilan sesuai keinginan kita ,lalu klik next

Pada menu activity kita pilih saja blank activity lalu klik next, Lalu klik Next

Isikan coding dibawah ini pada xml (activity_main)

Berikut gambarnya

Setelah mengisi codingnya kemudian kita jalankan aplikasinya dengan cara klik Run Configuration lalu atur projectnya dan pilih Launch lalu klik Run

Inilah Outputnyaa

LINEAR LAYOUT

• Tata letak Linear mengatur elemen sepanjang garis tunggal.

• Menentukan apakah garis yang vertikal atau horizontal menggunakan android: orientasi.

• Berikut contoh tata letak XML sampel menggunakan Linear Layout.

Pertama buka Eclipse,setelah masuk akan muncul tampilan seperti berikut :

Klik File -> New ,lalu klik Android Application Project, Pada Menu Android Application Project akan muncul tampilan berikut lalu kita isi Nama aplikasi,nama projek dan nama package sesuai yang kita inginkan ,setelah terisi kemudian klik next

Setelah itu langsung klik Next saja, Kemudian kita atur tampilan sesuai keinginan kita ,lalu klik next lagi

Klik finish

Kita isikan coding xmlnya seperti di bawah ini

Berikut gambarnya

Setelah mengisi codingnya langkah selanjutnya adalah menjalankan aplikasi dengan cara klik Run Configuration lalu atur projectnya dan pilih Launch lalu klik Run

Ini hasil Outputnya

FRAME LAYOUT

• Framelayout digunakan untuk menampilkan satu komponen. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk. Kita bisa menambahkan layout lain sebagai child di dalam frame layout.

• Contoh untuk deklarasi berikut menampilkan dua ImageView (pastikan file image telah disimpan di direktori :

• [project]/res/drawable-xxhdpi,

Langkah-langkahnya

Setelah itu langsung klik Next saja, Kemudian kita atur tampilan sesuai keinginan kita ,lalu klik next lagi

Klik Finish

Isikan coding berikut pada xml (activity_main)

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

<FrameLayout

android:layout_width="fill_parent"

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

android:layout_height="fill_parent">

<ImageView

android:id="@id/ImageView01"

android:layout_width="fill_parent"

android:layout_height="244dp"

android:scaleType="fitCenter"

android:src="@drawable/baby"/>

<ImageView

android:src="@drawable/Bungsu1"

android:layout_height="50dp"

android:layout_width="fill_parent"/>

</FrameLayout>

Berikut gambarnya

Setelah mengisi codingnya langkah selanjutnya adalah menjalankan aplikasi dengan cara klik Run Configuration lalu atur projectnya dan pilih Launch lalu klik Run

Inilah outputnya