Tutorial Android | Design Layout Use Concept Height and Weight

Okey, Dalam mendesain layout android, dapat di katakan susah-susah gampang. Karena biasnya dibuat dalam bentuk relative layout. Kali ini saya akan coba membuat dengan Linier layout dan membagi layout secara proposional sesuai dengan keinginan kita. Coba Lihat Contoh gambar di bawah ini:

Linear Layout Vertical 4:1

Pertama saya akan menjelaskan contoh yang menggunakan Layout dengan orientation vertikal (lihat juga disini ). oke kita langsung aja masuk ke tutorialnya:

1. Buat Project baru di file -> new -> Android Application Project
2. Lalu Buat Strukur layout Seperti ini:
   
3. Lalu sesuaikan dengan Code berikut ini:
   

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/LinearLayout1"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       tools:context=".MainActivity" >
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="0px"
           android:layout_weight="4"
           android:background="#ffff61"
           android:orientation="vertical" >
       </LinearLayout>
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="0px"
           android:layout_weight="1"
           android:background="#58ffff"
           android:orientation="vertical" >
       </LinearLayout>
   
   </LinearLayout>
   

   
   
4. Oke gini penjeleasannya, pada Concept Height dan Weight, Parentnya Harus Linear Layout tidak boleh menggunakan Layout yang lainnya. dan diset seperti ini:
   

   android:layout_width="match_parent"
   android:layout_height="match_parent"

5. Lalu untuk Childnya Jika Mau di bentuk vertical maka Height harus si set Opx
   android:layout_height="0px"
   Lalu widthnya di set "match_parent"
   dan ini yang penting Kita harus menentukan bobotnya atau perbandingannya. itu digunakan pada weight : android:layout_weight="4"
   

Linear Layout Horizontal 1:1

Untuk Horizontal Sama saja seperti yang vertical. untuk Strukturnya tetap sama seperti gambar diatas. lalu apa yang membedakan. Yaitu pengesetan 0px nya. kalau Vertical Height-nya yang di set 0px. Lalu untuk Horizontal, weight nya yang di set 0px. Langsung aja ke tutorialnnya:

1. Buat Project baru.
2. Lalu buat layout dengan code berikut ini.
   

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/LinearLayout1"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="horizontal"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       tools:context=".MainActivity" >
   
       <LinearLayout
           android:layout_width="0px"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:background="#ffff61"
           android:orientation="horizontal" >
       </LinearLayout>
   
       <LinearLayout
           android:layout_width="0px"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:background="#58ffff"
           android:orientation="horizontal" >
       </LinearLayout>
   
   </LinearLayout>
   

   
   
3. Sekarang Bandingkan dengan code yang diatas, sesuai dengan yang saya block kuning.
4. Terakhir Tinggal di run aja.