MATERI RESPONSIVE LAYOUT ANDROID STUDIO

PEMBUATAN RESPONSIVE LAYOUT 
 
A. Jenis dan Fungsi Layout

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

 1. Linear Layout

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

 

 

Jika menggunakan android orientation vertikal maka pengaturan layout akan berurutan dari atas ke bawah secara vertical. Jika menggunakan android orientation horizontal maka pengaturan layout akan berurutan dari kiri ke kanan secara horizontal. pengisi). Linear Layout akan mengikuti margin dan gravity  sejajar kanan, tengah, atau kiri. Berikut ini contoh desain aplikasi android menggunakan linear layout.

2. Relative Layout
Relative Layout merupakan pengaturan layout yang menempatkan widget widget didalamnya seperti

layer, sehingga sebuah widget dapat berada di atas atau di bawah widget lainnya.  Jika dibandingkan dengan linear layout maka Relative Layout merupakan layout yang penataannya lebih bebas karena penempatan widget tidak perlu berurutan dari atas ke bawah atau dari kiri ke kanan seperti pada Linear Layout, melaikan widget dapat ditempatkan dimana saja dengan 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 drag pada posisi yang diinginkan, tapi jika ingin menggunakan kode XML, ada beberapa atribut yang bisa digunakan  pada  elemen  atau  kompenen  UI  didalam  Relative Layout  yaitu: 

• android:layout_centerInParent: jika kita set menjadi "true",elemen UI akan berada di tengah relatif terhadap lebar 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 tersebut di set menjadi "true", komponen UI akan berada di tengah bagian bawah layout. Selain itu ada juga beberapa artibut yang tidak bisa dikombinasikan atau bisa disebut mutual exclusive, yaitu hanya bisa dipilih satu misalnya  android:layout_centerVertical dengan android:layout_alignParentBottom.

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 atas image, seperti terlihat pada gambar berikut ini. 

 

4. Table Layout
Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan 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 jenis 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.