Android Layout : LinearLayout | RelativeLayout

Nah Artikel sebelum'nya kan kita membahas Gimana sih Membuat Project Android ?
sekarang waktunya membahas tentang Layout ,
di sini saya akan memberi contoh 3 Layout yang menurut saya sering saya gunakan , yaitu :

1. Linear Layout
2. Relative Layout
3. Table Layout

Nah Sekarang Pertama"  LinearLayout dulu ya :p

• LinearLayout ada 2 jenis : 

1. LinearLayout (Vertical)
2. LinearLayout (Horizontal)

Udah tau kan ?

Sekarang kita buka tuh /res/layout  
buka tuh activity_layout.xml














Setelah itu isikan Code seperti di bawah
Bila setingan' masih Graphical Layout ! ubah ke activity_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dip"
        android:text="Nama:" />

  <EditText
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="10dip"
      android:ems="10" />

  <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:padding="5dip"
      android:text="Pass:" />
     
  <EditText android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
     android:layout_marginBottom="10dip"/>     
  
  <Button android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
      android:background="#aee"
     android:text="Login"/>
  
  <LinearLayout android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
     android:orientation="horizontal" 
     android:layout_marginTop="25dip">
      
  <TextView android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
     android:text="Home" 
     android:padding="15dip" 
     android:layout_weight="1"
     android:background="#feee"
     android:gravity="center"/>
     
  <TextView android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
     android:text="About" 
     android:padding="15dip" 
     android:layout_weight="1"
      android:background="#cee"
      android:gravity="center"/> 
  
  </LinearLayout>
    
</LinearLayout>

Nah , nanti akan terdapat 2 Linear Layout

Kita Lihat Kode'nya !

perbedaan pada android:orientation 

• Linear Layout yang pertama adalah ( vertical )

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

• Linear Layout yang ke dua adalah ( horizontal )

 
  <LinearLayout android:layout_width="fill_parent" 
     android:layout_height="wrap_content"
   android:orientation="horizontal" 
   android:layout_marginTop="25dip">
    

Nah sudah tau kan LinearLayout ? 

sekarang waktu'nya RelativeLayout !

kita buat .xml baru 

cara'nya = klik kanan pada layout -> New -> Android XML File

kita beri nama layout'nya : relative_layout

pilih Root Element: RelativeLayout

Nah sekarang beri code seperti di bawah ini : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">

    <TextView android:id="@+id/label" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Email" />

    <EditText android:id="@+id/inputEmail" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/label" />
  
    <Button android:id="@+id/btnLogin" 
        android:layout_width="wrap_content"
     android:layout_height="wrap_content" 
     android:layout_below="@id/inputEmail"
        android:layout_alignParentLeft="true" 
        android:layout_marginRight="10px"
        android:text="Login" />

    <Button android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btnLogin" 
        android:layout_alignTop="@id/btnLogin"
        android:text="Cancel" />
            
    <Button android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
     android:layout_alignParentBottom="true" 
     android:text="Register new Account"
     android:layout_centerHorizontal="true"/>
</RelativeLayout>

Nah sekarang coba jalanin deh ke Emulator'nya

Selesai deh Mudah kan ?   , hehehe 

SEKIAN Android Layout : LinearLayout | RelativeLayout