MATERI RESPONSIVE LAYOUT ANDROID STUDIO

 PEMBUATAN RESPONIVE LAYOUT

A.Jenis dan fungsi layout

Layout merupakan suatu tampilan tata letak di Android untuk mengatur penempatan teks, gambar, ataupun kompone lainnya sehingga tampilan pada aplikasi yang dibuat terlihat rapi dan nyaman untuk dilihat oleh pengguna. Jenis dan fungsi layout adalah sebagai berikut:

1.Linear Layout

Linear Layout adalah layout yang menyejajarkan semua semua child view-nya dalam stu arah, secara vertikal atau horizontal. Pengguna linear layout dapat menetapkan arah layoout menggunakan atribut android:orientation.

Jika menggunakan android orientation vertikal maka pengaturan layout akan berurutan dari atas kebawah secara vertikal. Jika menggunakan android horizontal maka pengaturan layout akan berurutan dari kiri ke kanan secara horizontal. Linear Laayout akan mengikuti margin dan gravity sejajar kanan, tengah, atau kiri. Berikut ini contoh desai aplikasi andois menggunakn linear layout.

2.Relative Layout                                                                                                                   

Relative Layout merupakan pengatauran layout yang menempatkan widget widget didalamnya seperti

layer, sehingga sebuah widget dapat berada diatas atau dibawah widget lainnya. Jika dibandingkan denagan liner layout maka relative layout merupakan layout yang penataannya lebih bebas karena penempatan widget dapat ditempatkan dimana saja denagan mengacu pada widget lain.

Jadi dapat diartikan bahwa Relative layout dapat membuat desain tampilan aplikasi dengan tata letak objek atau komponen secara bebas tanpa aturan sesuai orientasi (horizontal atau vertical) seperti yang diterapkan pada linear layout. Untuk mengatur posisi elemen User Interface, misalnya Button, cukup dragpada posisi yang diinginkan, tapi jika ingin menggunakan kode XML, ada beberapa atribut yang bisa diguanakan pada elemen atau komponen UI didalam Relative Layout yaitu:

android:layout_centerInParent: jika kita set menjadi "true", elemen UI akan berada di tengah relatif terhadap lebarr dan tinggi Layout.

android:layout_centerHorizontal: jika kita set menjadi "true", elemen UI akan berada di tengah relatif terhadap lebar Layout. 

android:layout_centerVertical: jika kita set menjadi "true", elemen UI akan berada di tengah relatif terhadap tinggi Layout. 

android:layout_alignParentBottom: jika kita set menjadi "true", elemen UI diletakan rata sisi bawah layout.

android:layout_alignParentTop: jika kita set menjadi "true", elemen UI diletakan rata sisi atas layout. 

android:layout_alignParentLeft: jika kita set menjadi "true", elemen UI diletakan rata sisi kiri layout. 

android:layout_alignParentRight: jika kita set menjadi "true", elemen UI diletakan rata sisi kanan layout.  

Ada beberapa atribut yang bisa dikombinasikan, misalnya android:layout_centerHorizontal dengan android:layout_alignParentBottom. Jika kedua atribut tesebut di set menjadi "true", komponen UI akan berada di tengah bagian bawah layout. Selain itu ada juga beberapa atribut yang tidak bisa dikombinasikan atau bisa disebut mutual exclusive, yaitu hanya bisa dipilih satu misalnya android:layout_centerVertical dengan android:layout_alignParenBottom.

Pengaturan posisi relatif antara elemen UI dengan elemen UI lainnya juga dapat dilakukan, ada beberapa atribut yang dapat digunakan yaitu: 

android:layout_above: jika di set menjadi "true", elemen UI akan berhimpit atau berada di atas elemen UI yang di picu/dituju. 
android:layout_below: jika di set menjadi "true", elemen UI akan berhimpit atau berada di bawah elemen UI yang di picu/dituju.
android:layout_toLeftOf: jika di set menjadi "true", elemen UI akan berhimpit atau berada di sisi kiri elemen UI yang di picu/dituju. 
android:layout_toRightOf: jika di set menjadi "true", elemen UI akan berhimpit atau berada di sisi kanan elemen UI yang di picu/dituju.

Berikut ini adalah contoh tampilan User Interface menggunakan Relative Layout.

3. Frame Layout

Frame Layout adalah layout yang biasanya digunakan untuk membuat objek yang saling bertindihan contohnya yaitu kita membuat button di atsa image, seperti terlihat pada gambar berikut ini.

4. Table layout

Table Layout adalahh layout yang digunakan untuk membangun user interface (tampilan antar muka) aplikasi android dengan berasarkan baris dan kolom.

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 jeenis informasi yang berbeda mengenai baris tersebut.Beberapa tag pada table layout yaitu:

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

Berikut ini adalah contoh penggunaan Table Layout.

5. Constraint Layout

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. Akan tetapi, Constraint Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.

Pada Constraint Layout, setiap View memiliki semacam tali (Constraint) yang menarik tiap sisinya, yang mana tali tersebut bisa diatur Elastisitasnya, Marginnya, dan sebagainya. Tali tersebut wajib “diikatkan” kepada anchor point atau suatu titik yang dapat berupa sisi dari Parent Layout, View lain, ataupun titik bantu (helper) yang bisa dibuat sendiri.. Penggunaan Constraint Layout memungkinkan membuat dsain tampilan aplikasi yang responsive sesuai ukuran layar perangkat android dan sesuai orientasi layar portrait atau landscape. Berikut ini contoh penggunaan Constraint Layout untuk membuat tampilan aplikasi yang responsive secara ukuran layar dan orientasi layar.

B. LEMBAR KERJA 

Tampilan aplikasi disebut responsive ketika tampilan aplikasi tersebut rapih dan konsisten pada berbagai ukuran perangkat android misalnya smartphone dengan ukuran 5 inchi, tablet dengan ukuran layar yang lebih besar, baik pada orientasi portrait atau landscape. Responsive Layout pada tampilan aplikasi android dapat dibuat menggunakan Constraint Layout, sehingga pada kegiatan pembelajaran ini akan digunakan pembuatan tampilan aplikasi menggunakan Constraint layout. Dalam Lembar kerja ini, terdapat contoh latihan yang dijelaskan langkah-langkah pengerjaannya secara terperinci dan sudah ada source codenya untuk dipraktekkan. Lembar Kerja ini juga memuat tugas berupa soal untuk dicari pemecahan jawabannya sekaligus dipraktekkan dalam diskusi kelompok pada kegiatan pembelajaran. Semua Lembar kerja baik latihan maupun tugas sebaiknya dipraktekkan, dengan tujuan dapat mengaplikasikan topik materi ini.