PENGENALAN LAYOUTING PADA APLIKASI ANDROID STUDIO

Layout adalah sebuah tampilan dari aplikasi android. Dimana pada layout kita bisa menata komponen-komponen aplikasi seperti : foto, teks, video, maupun komponen lainnya secara mudah.

Layout memiliki fungsi yang mirip dengan kertas. Saat kita akan membuat desain segitiga kita akan membutuhkan media menggambarnya, ya kertas adalah salah satunya. Kemudian kita akan menarik garis sehingga membentuk sebuah segitiga. Jadi kita bisa membuat desain apa saja pada sebuah kertas.

Begitupun dengan layout kita bisa menambahkan komponen-komponen aplikasi bahkan mengaturnya agar tampilannya menjadi indah dan nyaman dimata pengguna aplikasi.

Layout juga bisa disebut sebagai ViewGroup karena ViewGroup mengelola tampilan child dengan cara khusus dan umumnya digunakan sebagai root view. Ada 5 jenis layout pada android studio yang bisa digunakan untuk merancang tampilan aplikasi semenarik mungkin. Layout-layout tersebut antara lain :

    1.    Linear Layout

        Dengan menggunakan Linear Layout setiap komponen atau elemen yang akan digunakan untuk merancang aplikasi android disejajarkan dalam satu arah saja, yaitu secara horizontal atau vertical.

    2.    Relative Layout

        Merupakan layout yang bisa dipakai untuk mengatur widget atau komponen aplikasi android secara relative (bebas ), tidak sebatas vertical atau horizontal saja.

    3.    TableLayout

        Untuk merancang layout menggunakan baris dan kolom kita bisa menggunakan TableLayout. Tidak akan ada garis kolom, baris, atau cell yang ditampilkan meskipun namanya adalah table layout.

    4.    Frame Layout

        Jika kita ingin membuat layout dengan komponen-komponen yang saling tumpang tindih, maka kita bisa menggunakan Frame Layout. Misal kita ingin memasukan komponen tombol ke dalam komponen gambar.

    5.    Contstraint Layout

        Adalah layout yang baru di android studio. Ia merupakan pengembangan dari Linear Layout. Dengan menggunakan constrait layout kita bisa membuat tampilan aplikasi android yang responsive, kompleks, dan powerfull.

    6.    Grid Layout

        Layout yang viewgroup childnya diletakan dalam kotak persegi panjang yang dapat digulir.

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


Adapun beberapa atribut yang sering digunakan dalam ViewGroup adalah sebagai berikut :

layout_height = untuk mengatur tinggi 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

Proses membuat layout ( tata letak komponen ) sebuah aplikasi android bisa dilakukan dengan mudah jika kita sudah memahami cara menggunakan macam-macam layout yang ada pada android studio.
Setidaknya meskipun kita tidak punya kemampuan desain yang bagus namun pengetahuan dasar melakukan layout sebuah aplikasi tetap harus kita miliki.

Secara ringkas di artikel ini penulis akan membahas macam-macam layout pada android studio yang sering digunakan para developer saat merancang aplikasi androidnya.





    1.    Linear Layout

Linear Layout adalah layout yang menyejajarkan semua child view-nya dalam satu arah, secara vertikal atau horizontal. Anda bisa menetapkan arah layout dengan atribut android:orientation. Semua anak LinearLayout akan ditumpuk satu sama lain, jadi daftar vertikal hanya akan memiliki satu anak per baris, seberapa pun lebarnya, dan daftar horizontal hanya akan setinggi satu baris (tinggi anak yang tertinggi, ditambah pengisi). LinearLayout akan mengikuti margin antara anak dan gravity (sejajar kanan, tengah, atau kiri) setiap anak. 

Jadi didalam setiap baris/kolom hanya ada 1 objek yang kita tempatkan. Dalam LinearLayout ada dua jenis orientasi yaitu, Vertical Linear Layout, apabila user menempatkan 1 widget perbaris, dan Horizontal Linear Layout, jika user menempatkan 1 objek per kolom. Semua isi dari LinearLayout akan ditampilkan berdasarkan urutan penulisan mereka di file Layout. untuk lebih jelasnya coba perhatikan dan praktikan contoh berikut dengan mengikuti langkah berikut : 

Contoh pertama :

    a. pada activity_main.xml, ketikan script seperti dibawah ini :



    b.    Maka, saat dijalankan hasilnya akan tampak seperti gambar berikut :



Contoh kedua :

     a. pada activity_main.xml, ketikan script seperti dibawah ini :


    b.    Maka, saat dijalankan hasilnya akan tampak seperti gambar berikut :




    2.    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. Jadi dapat diartikan bahwa Relative Layout adalah desain tampilan pada aplikasi dengan tata letak objek atau komponen secara bebas tanpa aturan sesuai orientasi (horizontal atau vertical) seperti yang diterapkan pada Linear Layout. Untuk lebih jelasnya coba perhatikan dan praktikan contoh berikut dengan mengikuti langkah berikut : 

Contoh pertama :

    a. pada activity_main.xml, ketikan script seperti dibawah ini :


     b.    Maka, saat dijalankan hasilnya akan tampak seperti gambar berikut :


Contoh kedua :

    a. pada activity_main.xml, ketikan script seperti dibawah ini :


    b.    Maka, saat dijalankan hasilnya akan tampak seperti gambar berikut :



    3.    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.Table Layout terdiri dari:

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

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 :

TableLayout : Tag pembuka untuk menggunakan TableLayout
TableRow : Tag untuk membuat Baris

Untuk lebih jelasnya coba perhatikan dan praktikan contoh berikut dengan mengikuti langkah berikut : 

Contoh pertama :

    a. pada activity_main.xml, ketikan script seperti dibawah ini :


    b.    Maka, saat dijalankan hasilnya akan tampak seperti gambar berikut :


Contoh kedua :

    a. pada activity_main.xml, ketikan script seperti dibawah ini :


    b.    Maka, saat dijalankan hasilnya akan tampak seperti gambar berikut :




    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. Absolute layout sudah tidak direkomendasikan karena membuat UI menjadi tidak fleksibel, makannya sudah sangat jarang digunakan, bahkan kelas ini sudah tidak berlaku lagi di tingkat API 3. Sebagai gantinya anda bisa menggunakan FrameLAyout, RelativeLayout atau custom lain sebagai gantinya. Untuk lebih jelasnya coba perhatikan dan praktikan contoh berikut dengan mengikuti langkah berikut : 

    a. pada activity_main.xml, ketikan script seperti dibawah ini :


    b.    Maka, saat dijalankan hasilnya akan tampak seperti gambar berikut :


Jika diperhatikan, 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 kebawah.


Nah setelah membaca artikel diatas diharapkan kawan - kawan sudah mengerti tentang jenis - jenis dan fungsi Layout pada Android Studio. Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.







































Comments

Popular posts from this blog

Membuat To Do List menggunakan SQLite pada Android Studio

Cara Membuat CRUD Database MySQL dengan PHP pada aplikasi Android Studio