Android Development | Tak Kenal Maka Tak Tau bersama Layouting Uhuy

Yusri Yusron
Chevalier Lab
Published in
3 min readMar 16, 2019

Oi oi oi Chevas, ada yang baru nihhhh …

Wahh apaan tuh?

Apa hayo?

Yap, sekarang kita akan membahas tentang Layouting di Android nih …

Ada yang gatau ga? :v

Jadi dalam membangun sebuah aplikasi, pasti dibutuhkan tampilannya dong atau sering disebut User Interface . Nahh, untuk struktur dari tampilan itu disebut dengan layout.

Layout yang paling umum dipakai pada aplikasi android adalah Linear Layout, Relative Layout dan Frame Layout, berikut penjelasannya :

Linear Layout

Linear Layout sesuai dengan namanya merupakah sebuah layout yang terletak pada suatu garis lurus, bisa garis lurus secara vertical ataupun garis lurus secara horizontal. Untuk mengatur orientation bisa menggunakan atribut android:orientation=”vertical” atau android:orientation=”horizontal”.

Untuk membuat layout berorientasi vertical, kalian cukup menuliskan kodenya secara berurutan. Sebagai contoh :

<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:padding=”16dp”
android:orientation=”vertical”
>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”Track Name”
android:textColor=”@android:color/black”
/>
<EditText
android:id=”@+id/editTextTrackName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Enter Track Name”
/>
<Button
android:id=”@+id/buttonAddTrack”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”Add Track”
/>
</LinearLayout>

Dari kode di atas dituliskan secara berurutan, dimulai dari TextView — EditText — Button.

Sedangkan, untuk membuat layout berorientasi horizontal itu sedikit berbeda dengan vertical, tidak hanya dengan menuliskan secara berurutan tetapi ada atribut untuk mengatur seberapa lebar yang diberikan pada suatu content. Sebagai contoh :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:orientation="horizontal"
android:weightSum="4"
>
<Button
android:id="@+id/buttonAddTrack"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add Track"
android:layout_weight="2"
/>
<Button
android:id="@+id/buttonReset"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Reset"
android:layout_weight="2"
/>
</LinearLayout>

Pada view group Linear Layout di atas, terdapat android:weightSum=”4" yang berarti layout dari sebuah linear layout yang berorientasi horizontal itu memiliki lebar layar android sebanyak 4.

Kemdian terdapat atribut android:layout_weight=”2" ayang berarti button Add Track tersebut memakan lebar sebanyak 2 dan button Reset memakan lebar layar sebanyak 2 juga sehingga terbagi menjadi 2 pada layar android kalian.

Cukup mudah dipahami kan Chevas? Uhuy

Kalau ada pertanyaan langsung tuliskan di kolom komentar ya !

Dan jangan lupa kasih clap nya 50x boleh lah ya.

Chevalier Lab

We code, we share, we create.

--

--