Tugas 6 PENGENALAN LAYOUTING (LinearLayout, RelativeLayout, TableLayout, AbsoluteLayout)

PENGENALAN LAYOUTING

(LinearLayout, RelativeLayout, TableLayout, AbsoluteLayout)

1. Linear Layout

Nahh Yang pertama kita akan membahas tentang Linear Layout . Nahh apakah itu Linear Layout ? Linear Layout adalah jenis layout dimana user menempatkan 1 objek (widget) per baris/kolom.

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

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

Horizontal Linear Layout : Apabila user menempatkan 1 objek per kolom

Nahh Lalu bagaimana cara membuat Linear Layout ini ?? Mudah saja, disini saya akan membuat atau mencontohkan 2 linear layout., langsung saja yuk kita buat :

1. Membuat Linear Layout Versi 1 Dengan Color

v Pertama kita buat terlebih dahulu projek baru, caranya kita klik create new projek, disini saya mengguanakan versi android 4.1.3

v Kemudian kita pilih/klik Empty Activity untuk membuat projek kosong, setelah itu kita klik next.

v Setelah itu kita akan mengkonfigurasi projek kita, disini saya memberikan name nya itu “LinearLayout1”, untuk packagenya saya kasih namanya itu “sultanbisri.blogspot.com” dan saya akan menyimpan file project saya di “D:\semester6\ti3\Android Studio\Sultan Bisri\sultanbisri\Pertemuan6\LinearLayout1”, untuk bahasa pemrograman yang saya pakai adalah menggunakan bahasa java, dan disini saya memilih minimum API nya adalah API 19, dan setelah itu klik finish.

v Kemudian silahkan teman-teman semuanya dibuka file activity_main.xml, setelah itu silahkan ketikan script dibawah ini :

v Kemudian silahkan di RUN pada emulatornya, maka akan tampil seperti gambar dibawah ini :

2. Membuat Linear Layout Versi 2 Dengan Menggunakan Edit Text

v Pertama kita buat terlebih dahulu project baru, caranya kita klik create new projek

v Kemudian kita pilih/klik “Empty Activity”, atau membuat projek baru yang dimana projeknya itu berupa kosong, kemudian kita klik next.

v Setelah itu kita akan mengkonfigurasi projek kita, disini saya memberikan name nya itu “LinearLayout2”, untuk packagenya saya kasih namanya itu “sultanbisri.blogspot.com” dan saya akan menyimpan file project saya di “D:\semester6\ti3\Android Studio\Sultan Bisri\sultanbisri\Pertemuan6\LinearLayout2”, untuk bahasa pemrograman yang saya pakai adalah menggunakan bahasa java, dan disini saya memilih minimum API nya adalah API 19, dan setelah itu klik finish.

v Untuk selanjutnya silahkan dibuka file activity_main.xml, kemudian ketikan script atau koding dibawah ini :

v Kemudian terakhir jalankan/RUN emulatornya, setelah itu silahkan diketik yang ada di aplikasi temen-temen masing-masing.

2. Relative Layout

Nahh setelah kita bahas linear layout sekarang kita bahas Relative Layout , Apakah itu Relative Layout ??? Relative Layout adalah layout yang penataan nya 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.

Nahh Lalu bagaimana cara membuat Relative Layout ini ?? Mudah saja, disini saya akan membuat atau mencontohkan 2 Relative layout., langsung saja yuk kita buat

1. Membuat Relative Layout Versi 1 Dengan Menggunakan Button

v Sebelum kita membuat aplikasinya, alangkah baiknya kita buat terlebih dahulu project baru, cara membuatnya kita klik “create new projek”.

v Kemudian kita pilih “Empty Activity” atau projek kosong yang belum sama sekali ada templatenya, kemudian kita klik tombol next.

v Setelah itu kita akan mengkonfigurasi projek kita, disini saya memberikan name nya itu “RelativeLayout1”, untuk packagenya saya kasih namanya itu “sultanbisri.blogspot.com” dan saya akan menyimpan file project saya di “D:\semester6\ti3\Android Studio\Sultan Bisri\sultanbisri\Pertemuan6\RelativeLayout1”, untuk bahasa pemrograman yang saya pakai adalah menggunakan bahasa java, dan disini saya memilih minimum API nya adalah API 19, dan setelah itu klik finish.

v Selanjutnya silahkan dibuka file “activity_main.xml”, dan ketikkan script yang ada dibawah ini :

v Terakhir, silahkan teman-teman untuk menjalakan/RUN emulatornya dan silahkan dicoba :

2. Membuat Relative Layout Versi 2 Dengan Menggunakan Edit Text

v Sebelumnya kita terlebih dahulu membuat projek baru, dengan caranya klik pada “create new projek”

v Kemudian kita pilih “Empty Activity” atau template kosong, setelah itu klik next.

v Setelah itu kita akan mengkonfigurasi projek kita, disini saya memberikan name nya itu “RelativeLayout2”, untuk packagenya saya kasih namanya itu “sultanbisri.blogspot.com” dan saya akan menyimpan file project saya di “D:\semester6\ti3\Android Studio\Sultan Bisri\sultanbisri\Pertemuan6\RelativeLayout2”, untuk bahasa pemrograman yang saya pakai adalah menggunakan bahasa java, dan disini saya memilih minimum API nya adalah API 19, dan setelah itu klik finish.

v Kemudian silahkan buka file “activity_main.xml”, lalu ketikkan script dibawah ini :

v Terakhir silahkan dijalankan/RUN emulatornya, maka akan tampil seperti gambar dibawah ini.

3. Table Layout

Table Layout adalah sebuah layout yang terdiri dari kolom dan baris, setiap objek atau view yang berada didalam Table Layout, akan tersusun seperti tabel, yaitu ada kolom dan juga barisnya, Table Layout digunakan untuk mempermudah kita dalam merancang User Interface pada Activity.

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

Nahh Lalu bagaimana cara membuat Table Layout ini ?? Mudah saja, disini saya akan membuat atau mencontohkan 2 Table layout., langsung saja yuk kita buat

1. Membuat Form Login Dengan Menggunakan Table Layout

v Sebelum kita membuat aplikainya, terlebih dahulu kita membuat project baru, dengan caranya kita klik “create new project”.

v Kemudian kita pilih “Empty Activity” dan setelah itu kita klik tombol next

v Setelah itu kita akan mengkonfigurasi projek kita, disini saya memberikan name nya itu “TableLayout1”, untuk packagenya saya kasih namanya itu “sultanbisri.blogspot.com” dan saya akan menyimpan file project saya di “D:\semester6\ti3\Android Studio\Sultan Bisri\sultanbisri\Pertemuan6\TableLayout1”, untuk bahasa pemrograman yang saya pakai adalah menggunakan bahasa java, dan disini saya memilih minimum API nya adalah API 19, dan setelah itu klik finish.

v Selanjutnya silahkan ketikan secript dibawah ini, sebelum diketik scriptnya, terlebih dahulu kita buka folder res, kita buka lagi folder layout setelah itu kita baru buka file activity_main.xml, silahkan baru bisa di ketikan script yang ada dibawah ini :

v Maka tampilan sebelum di RUN akan seperti gambar dibawah ini :

v Kemudian jalankan di emulatornya, maka akan muncul tampilannya seperti pada gambar dibawah ini :

2. Membuat Table Layout Versi 2

v Sebelum membuat project, alangkah baiknya kita buat terlebih dahulu project barunya, dengan caranya klik Create New Project.

v Kemudian kita pilih “Empty Activity” dan setelah itu klik next.

v Setelah itu kita akan mengkonfigurasi projek kita, disini saya memberikan name nya itu “TableLayout2”, untuk packagenya saya kasih namanya itu “sultanbisri.blogspot.com” dan saya akan menyimpan file project saya di “D:\semester6\ti3\Android Studio\Sultan Bisri\sultanbisri\Pertemuan6\TableLayout2”, untuk bahasa pemrograman yang saya pakai adalah menggunakan bahasa java, dan disini saya memilih minimum API nya adalah API 19, dan setelah itu klik finish.

v Selanjutnya kita akan mengetikkan script pada file activity_main.xml. Cara membuka file activity_main.xml yaitu kita buka terlebih dahulu folder res, kemudian kita buka fodler layout, setelah itu kita buka file activity_main.xml. Silahkan ketikan script dibawah ini :

v Kemudian kita jalankan emulatornya, maka akan memunculkan tampilan seperti gambar dibawah ini :

4. Absolute Layout

Absolute Layout adalah salah satu komponen user interface. Yang digunakan untuk mengatur tata letak suatu widget seperti Button, TextView, EditText, dsb, dengan menggunakan atribut layout_x dan layout_y pada komponen user interface, seperti Button, yang digunakan untuk mengatur koordinat atau angka di atribut layout_x dan layout_y.

Pada tutorial ini, kita akan belajar apa itu yang dimaksud dengan Absolute Layout serta cara menggunakannya pada project aplikasi yang kita buat menggunakan Android Studio.

v Pertama buka aplikasi Android Studio kalian, Create New Project

v Kemudian kita pilih “Empty Activity” dan setelah itu klik next.

v Setelah itu kita akan mengkonfigurasi projek kita, disini saya memberikan name nya itu “AbsoluteLayout”, untuk packagenya saya kasih namanya itu “sultanbisri.blogspot.com” dan saya akan menyimpan file project saya di “D:\semester6\ti3\Android Studio\Sultan Bisri\sultanbisri\Pertemuan6\AbsoluteLayout”, untuk bahasa pemrograman yang saya pakai adalah menggunakan bahasa java, dan disini saya memilih minimum API nya adalah API 19, dan setelah itu klik finish.

v Selanjutnya buka activity_main.xml pada project tersebut, disini kita akan mencoba menggunakan Absolute Layout dengan beberapa komponen tambahan lainnya seperti Button, TextView dan EdiText

v Maka tampilan sebelum di RUN akan seperti gambar dibawah ini :

v Kemudian kita jalankan emulatornya, Ketika sudah tampil emulatornya, maka silahkan ketikan pada edit text tersebut, berikut tampilannya :

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.