Belajar Android Studio (6)

 

PENGENALAN LAYOUTING

(LinearLayout, RelativeLayout, TableLayout, AbsoluteLayout)

PADA ANDROID STUDIO

 

Tata letak Android adalah kelas yang menangani pengaturan cara anaknya muncul di layar. Apa pun yang merupakan View (atau mewarisi dari View) bisa menjadi turunan dari sebuah layout. Semua tata letak mewarisi dari ViewGroup (yang diwarisi dari View) sehingga Anda bisa menumpuk tata letak. Anda juga dapat membuat tata letak kustom Anda sendiri dengan membuat kelas yang diturunkan dari ViewGroup. Gambar di bawah mengilustrasikan hierarki pewarisan antar tampilan di Android.

v  Pengenalan Layout

 

Blok penyusun dasar untuk antarmuka pengguna adalah objek View yang dibuat dari kelas View dan menempati area persegi panjang di layar dan bertanggung jawab untuk menggambar dan menangani event. View adalah kelas dasar untuk widget, yang digunakan untuk membuat komponen UI interaktif seperti tombol, bidang teks, dll. ViewGroup adalah subkelas View dan menyediakan wadah tak terlihat yang menampung Tampilan lain atau ViewGroup lain dan menentukan properti tata letaknya. Pada tingkat ketiga kami memiliki tata letak berbeda yang merupakan subkelas dari kelas ViewGroup dan tata letak tipikal mendefinisikan struktur visual untuk antarmuka pengguna Android dan dapat dibuat baik pada waktu proses menggunakan View.

ViewGroup dapat juga disebut dengan layout karena ViewGroup mengelola tampilan child dengan cara khusus dan umumnya digunakan sebagai root view. Berikut jenis-jenis layout yang dapat kita gunakan dalam android :

A.   LinearLayout : Viewgroup yang childnya diposisikan dan disejajarkan secara horizontal atau secara vertikal

B.   RelativeLayout : Viewgroup yang childnya diposisikan dan disejajarkan relatif terhadap tampilan komponen dalam lainnya.

C.   ConstrainLayout : Viewgroup yang childnya menggunakan titik jangkar, tepi, dan panduan untuk mengontrol posisi tampilan relatif terhadap komponen lain di layout. ConstrainLayout didesain untuk mempermudah saat menyeret dan melepaskan tampilan di editor layout.

D.   AbsoluteLayout : ViewGroup yang childnya disusun ke dalam baris dan kolom

E.    FrameLayout : Viewgroup childnya bertumpuk.

F.    GridLayout : Viewgroup childnya ditempatkan dalam kotak persegi panjang yang bisa digulir.

v  Atribut umum Viewgroup

Ø layout_height : untuk mengatur tinggi dari View

Ø layout_width : untuk mengatur lebar dari View

Ø layout_margin : untuk mengatur extra space di semua sisi luar View.

Ø layout_marginTop : mengatur extra space sisi atas layout.

Ø layout_marginBottom :mengatur extra space sisi bawah layout.

Ø layout_marginLeft : mengatur extra space sisi kiri layout.

Ø layout_marginRight : mengatur extra space sisi kanan layout.

Ø layout_gravity : menentukan posisi child View.

Ø layout_weight : menentukan seberapa banyak extra space dialokasikan.

Ø layout_x : menentukan koordinat x layout.

Ø layout_y : menentukan koordinat y layout.

Ø paddingLeft : mengisi padding kiri layout.

Ø paddingRight : mengisi padding kanan layout.

Ø paddingTop : mengisi padding atas layout.

Ø paddingBottom : mengisi padding bawah layout.

 

·         Linear Layout

Android LinearLayout adalah grup tampilan yang meratakan semua Child view baik secara vertikal maupun horizontal. LinearLayout mengelompokkan child view-nya dengan menampilkan dalam satu baris atau kolom (vertikal atau horizontal). Viewgroup biasa digunakan untuk membuat form.

Berikut adalah atribut penting khusus untuk LinearLayout -

 

Contoh App LinearLayout

 

Sebuah linear layout, sesuai dengan namanya menampilkan dan memposisikan elemen di dalamnya dalam satu arah, secara horizontal atau vertikal. Arahnya dapat diatur melalui atribut android:orientation.

Jadi di dalam setiap baris/kolom hanya ada 1 objek (widget) yang kita tempatkan. di Linear Layout ini ada dua jenis, yaitu :

1)      Vertical Linear Layout : Apabila user menempatkan 1 widget (objek) per baris

2)      Horizontal Linear Layout : Apabila user menempatkan 1 objek per kolom.

Semua isi dari Linear Layout akan ditampilkan berdasarkan urutan penulisan mereka di file layout. Contoh ini akan memandu Anda melalui langkah-langkah sederhana untuk menunjukkan cara membuat aplikasi Android Anda sendiri menggunakan LinearLayout. Ikuti langkah-langkah berikut :

1.      Pertama jalankan aplikasi IDE Android Studio, caranya :

a.      Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih → Empty Activity → Next

Configure Your Project

Name → LinearLayout

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ LinearLayout

Language → Java

Minimum API Level → API 16 → Klik Finish

2.      Maka akan   Tampil   IDE   Android   Studio,   setelah   itu   Buka   dan   ubah   script activity_main.xml menjadi seperti gambar di bawah ini

3.      Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

4.      Kita akan mencoba Kembali membuat App menggunakan LinearLayout yang kedua (2) Pertama jalankan aplikasi IDE Android Studio, caranya :

a.      Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih → Empty Activity → Next

Configure Your Project

 

Name → LinearLayout2

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ LinearLayout2

Language → Java

Minimum API Level → API 16 → Klik Finish

5.         Maka akan   Tampil   IDE   Android   Studio,   setelah   itu   Buka   dan   ubah   script activity_main.xml menjadi seperti gambar di bawah ini

6.         Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

 

·         Relative Layout

Android RelativeLayout memungkinkan Anda menentukan bagaimana child views diposisikan secara relatif satu sama lain. Posisi setiap tampilan dapat ditentukan sebagai relatif terhadap elemen saudara atau relatif terhadap parent.

Relative Layout adalah layout yang penataannya ini adalah penataan yang menempatkan widget-widget didalamnya seperti layer, sehingga sebuah widget dapat berada di atas/di bawah widget lainnya atau dengan kata lain Relative merupakan layout yang penataannya lebih bebas (Relative) sehingga bisa di tata di mana saja. Dalam sebuah Relative Layout, kita memposisikan view di dalamnya relatif terhadap view lain atau si parent view-nya. Atribut yang bisa dipakai untuk memposisikan suatu View di dalam RelativeLayout adalah:

ü  Posisi berdasarkan View lain yang satu level: layout_above, layout_below, layout_toLeftOf, layout_toRightOf

ü  Posisi   berdasarkan     parent: android:layout_centerHorizontal, android:layout_centerVertical

ü  Posisi penjajaran berdasarkan View lain yang satu level: layout_alignTop, layout_alignBottom, layout_alignLeft, layout_alignRight, layout_alignBaseline

ü  Posisi   penjajaran        berdasarkan     parent: layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight.

Jadi intinya kita dapat secara bebas mengatur objek objek yang kita tempatkan apabila kita menggunakan Relative Layout.

Contoh Program dibawah ini akan memandu Anda melalui langkah-langkah sederhana untuk menunjukkan cara membuat aplikasi Android Anda sendiri menggunakan RelativeLayout. Ikuti langkah-langkah berikut

1.      Pertama jalankan aplikasi IDE Android Studio, caranya :

a.      Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih → Empty Activity → Next

Configure Your Project

 

Name → RelativeLayout

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ RelativeLayout

Language → Java

Minimum API Level → API 16 → Klik Finish

 

2. Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

3.      Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

 

4.      Kita akan mencoba Kembali membuat App menggunakan RelativeLayout yang kedua (2) Pertama jalankan aplikasi IDE Android Studio, caranya :

a.       Pilih Start → Android Studio

b.       Pilih → Start a new Android Studio Project

c.       Pilih → Empty Activity → Next

Configure Your Project

 

Name → RelativeLayout

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ RelativeLayout

Language → Java

Minimum API Level → API 16 → Klik Finish

5.      Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

 

6.      Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

·         Table Layout

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom. Layout ini digunakan untuk keperluan tertentu saja karena kebanyakan pembangunan tampilan antar muka lebih sering memanfaatkan Relative Layout dan Linear Layout.

TableLayout pada Android adalah subkelas ViewGroup yang digunakan untuk menampilkan elemen View child dalam baris dan kolom untuk mengatur semua elemen child menjadi baris dan kolom dan tidak menampilkan garis batas di antara baris, kolom atau cells. Cara kerja TableLayout hampir mirip dengan tabel HTML dan berisi kolom sebanyak baris dengan cells terbanyak.

Table Layout terdiri dari:

1)      Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.

2)      Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.

Beberapa tag pada Table Layout :

1)      TableLayout : Tag pembuka untuk menggunakan TableLayout

2)      TableRow : Tag untuk membuat Baris

TableLayout Attributes

Berikut adalah atribut penting khusus untuk TableLayout

Contoh Program dibawah ini akan memandu Anda melalui langkah-langkah sederhana untuk menunjukkan cara membuat aplikasi Android Anda sendiri menggunakan RelativeLayout. Ikuti langkah-langkah berikut

1.      Pertama jalankan aplikasi IDE Android Studio, caranya :

a.      Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih → Empty Activity → Next

Configure Your Project

Name → RelativeLayout

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ RelativeLayout

Language → Java

Minimum API Level → API 16 → Klik Finish

 

2.      Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

 

3.      Jika di lihat menggunakan View Design + Blueprint akan tampil seperti gambar di bawah ini. Setelah itu coba di run menggunakan emulator

 

4.      Kita akan mencoba Kembali membuat App menggunakan RelativeLayout yang kedua (2) Pertama jalankan aplikasi IDE Android Studio, caranya :

a.      Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih → Empty Activity → Next

Configure Your Project

 

Name → RelativeLayout

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ RelativeLayout

Language → Java

Minimum API Level → API 16 → Klik Finish

 

5.      Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

6.      Jalankan di emulator Maka akan tampil seperti gambar di bawah ini

 

·         Absolute Layout

Absolute Layout menggunakan angka/koordinat untuk mengatur si widget tersebut. Atribut yang digunakan adalah layout_x dan layout_y. Android AbsoluteLayout digunakan ketika komponen UI di layar diposisikan pada posisi mereka mutlak sehubungan dengan asal di sudut kiri atas layout. Kita perlu menentukan x dan y koordinat posisi masing- masing komponen pada layar. AbsoluteLayout sudaj tidak direkomendasikan karena membuat UI tidak fleksibel, sebenarnya AbsoluteLayout sudah jarang digunakan.

Berikut ini adalah atribut yang paling penting yang digunakan dalam layout ini:

Ø  android: id : ini adalah ID yang unik mengidentifikasi tata letak

Ø  android: foreground : ini mendefinisikan ditarik untuk menarik atas konten dan nilai yang mungkin dapat menjadi nilai warna, dalam bentuk “#rgb”, “#argb”, “#rrggbb”, atau “#aarrggbb”

Ø  android: foregroundGravity : Mendefinisikan gravitasi untuk diterapkan pada ditarik latar depan. Default gravitasi untuk mengisi. Nilai yang mungkin adalah atas, bawah, kiri, kanan, tengah, center_vertical, center_horizontal dll

Ø  android: measureAllChildren : Menentukan apakah untuk mengukur semua anak atau hanya orang-orang di negara terlihat atau tidak terlihat saat mengukur. Default ke false

Beberapa poin penting untuk dicatat:

Contoh Program dibawah ini akan memandu Anda melalui langkah-langkah sederhana untuk menunjukkan cara membuat aplikasi Android Anda sendiri menggunakan RelativeLayout. Ikuti langkah-langkah berikut

1.      Pertama jalankan aplikasi IDE Android Studio, caranya :

a.      Pilih Start → Android Studio

b.      Pilih → Start a new Android Studio Project

c.       Pilih → Empty Activity → Next

Configure Your Project

 

Name → RelativeLayout

Package Name → Biarakn Apa Adanya

Save Location → C:\Users\ACER\AndroidStudioProjects\NamaFolder\ RelativeLayout

Language → Java

Minimum API Level → API 16 → Klik Finish

 

2.      Maka akan Tampil IDE Android Studio, setelah itu Ketikan script pada file activity_main.xml seperti text di bawah ini:

 

3.      Jika di lihat menggunakan View Design + Blueprint akan tampil seperti gambar di bawah ini. Setelah itu coba di run menggunakan emulator

 

Coba kalian perhatikan, atribut layout_x digunakan untuk mengatur koordinat x, yaitu jarak sebuah objek yang bisa kita geser ke kiri dan ke kanan, sedangkan atribut layout_y digunakan untuk mengatur koordinat y, yaitu jarak sebuah objek yang bisa kita geser ke atas dan ke bawah.