Pengenalan Layouting Lanjutan (FrameLayout, ListView, GridView, ConstrainLayout) Pada Android Studio

v   Frame Layout

FrameLayout adalah layout sederhana. layout ini bisa berisi satu atau lebih View  child, dan mereka bisa tumpang tindih satu sama lain. Oleh karena itu, atribut android:  layout_gravity digunakan untuk menemukan ViewChild. 

Untuk membuat FrameLayout pada layout.xml tersebut, kalian perlu  menambahkan tag <FrameLayout> dan di akhri dengan tag </FrameLayout>, pada contoh  berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button  pertama, seperti berikut ini: 

Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian  atur sendiri, kalian dapat menggunakan beberapa atribut Berikut adalah atribut penting  khusus untuk FrameLayout :

➢ android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri elemen UI  pada elemen UI lainnya. 

➢ android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan elemen  UI pada elemen UI lainnya. 

➢ android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI pada  elemen UI lainnya. 

➢ android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah elemen UI  pada elemen UI lainnya.

➢ android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah,  center, center horizontal dan center vertical. 

 

·         Buka IDE Android Studio

·         Ketikan Script File di activity_main.xml

·         Hasil

 

v     List View

ListView adalah salah satu widget yang digunakan untuk menampilkan data atau  nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView  tersebut didapat dari sebuah Array atau Database yang sudah ditentukan. ListView  pada saat ini sudah tergantikan dengan RecyclerView yang memiliki konsep  Material Design, karena lebih custom dan juga dapat mengatur tampilan layoutnya. Walaupun begitu, ListView masih banyak digunakan oleh programmer untuk  membuat list/daftar item yang sederhana pada aplikasi mereka.

 

·         Buka IDE Android Studio

·         Ketikan Script File di activity_main.xml

·         Ubah script MainActivity.java

·         Hasil

 

v    Grid View

GridView adalah salah satu container, yang digunakan untuk menampilkan  konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti  sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan  coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang  ditampilkan secara Grid atau Kotak-kotak. 

Penjelasan pada atribut-atribut yang digunakan: 

➢ android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.

➢ android:gravity : Menentukan gravitasi di dalam setiap sel. 

➢ android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris. 

➢ android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada. 

➢ android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.

➢ android:numColumns : Menentukan berapa kolom yang akan ditampilkan. 

 

·         Buka IDE Android Studio

·         Ketikan Script File di activity_main.xml

·         Ubah script MainActivity.java

·         Hasil

 

v  Constraint Layout

 

Constraint layout merupakan layout terbaru dari android. Layout ini berbasis relative  layout, namun mempunyai tingkat kemudahan yang lebih baik dalam penggunaannya.  Hal ini dikarenakan, contraint layout dapat digunakan dengan baik pada design mode  didalam Android Studio. Setiap item pada constraint layout memiliki 4 arah constraint  yaitu top, left, right, dan bottom. Ke empat arah ini memiliki sebuah connection source  yang dapat ditarik ke parent atau ke objek lain. Perhatikan gambar di bawah ini. 

Sebenarnya Constraint Layout mirip dengan Relative Layout, karena letak View  bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya.  Contohnya di Relative Layout kita bisa meletakkan sebuah View di atas, bawah, atau  samping View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout  menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint  Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor. 

 

Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiap  sisinya, yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb. Tali tersebut wajib  kita “ikatkan” kepada anchor point atau suatu titik yang dapat berupa sisi dari Parent  Layout, View lain, ataupun titik bantu (helper) yang bisa kita buat sendiri.

ConstraintLayout merupakan salah satu komponen ViewGroup yang dapat kita  gunakan untuk menyusun tampilan aplikasi yang kompleks tanpa adanya nested layout.  ConstraintLayout tersedia dengan dukungan kompatibilitas mulai dari Android 2.3 (API  Level 9) sampai dengan yang terbaru. 

ConstraintLayout memiliki kesamaan dengan RelativeLayout. Dalam penggunaan  semua view yang berada di dalamnya disusun berhubungan antara parent dan view  lainnya. Tapi ConstraintLayout lebih fleksibel dari RelativeLayout dan mudah digunakan  dengan dukungan Layout Editor pada Android Studio. Kita bisa menambah view baru ke  dalam ConstraintLayout. Kita gunakan drag and drop di Layout Editor yang berada pada  tab Design atau dengan menambahnya secara manual melalui tab Text. Kita perlu  menentukan posisi dari view atau bagaimana agar view tersebut terhubung dengan  parent layout atau view lainnya. Mengapa demikian?, Karena setelah ditambahkan,  view tersebut tidak memiliki constraint yang menghubungkannya dengan parent layout  atau view lainnya. Sehingga ketika dijalankan, posisi dari view tersebut akan berada di  bagian atas sebelah kiri. 

Berbeda ceritanya dengan RelativeLayout. Saat kita ingin menentukan posisi atau  menghubungkan dua buah view, kita bisa menggunakan attribute seperti layout_below  atau layout_above. Nah untuk ConstraintLayout kita akan menggunakan constraint  sebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan view  lainnya sesuai harapan kita.  

 

·         Buka IDE Android Studio

·         Ketikan Script File di activity_main.xml

·         Hasil

 

 

Pengenalan Layouting (LinearLayout, RelativeLayout, TableLayout, AbsoluteLayout) Pada Android Studio

vv  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 : 

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

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

·    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. 

·      AbsoluteLayout : ViewGroup yang childnya disusun ke dalam baris dan kolom

·      FrameLayout : Viewgroup childnya bertumpuk.

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

Ø  Linear Layout

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 : 

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

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

1.      Buka IDE Android Studio

2.      Ketikan Script File di activity_main.xml

3.      Hasil

 

Ø  Linear Layout 2

1.      Buka IDE Android Studio

2.      Ketikan Script File di activity_main.xml

3.      Hasil

 

Ø  Relative Layout

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.

1.      Buka IDE Android Studio

2.      Ketikan Script File di activity_main.xml

3.      Hasil

Ø  Relative Layout 2

1.      Buka IDE Android Studio

2.      Ketikan Script File di activity_main.xml

3.      Hasil

 

Ø  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: 

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

b.      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. 

1.      Buka IDE Android Studio

2.      Ketikan Script File di activity_main.xml

3.      Hasil

 

Ø  Table Layout 2

1.      Buka IDE Android Studio

2.      Ketikan Script File di activity_main.xml

3.      Hasil

Ø  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.

1.      Buka IDE Android Studio

2.      Ketikan Script File di activity_main.xml

3.      Hasil