Macam Macam Layout di Android Studio

Linear Layout

Dalam menggunakan Linear Layout setiap komponen atau elemen yang akan digunakan untuk merancang aplikasi android disejajarkan dalam satu arah saja, yaitu secara horizontal atau vertical.

Tag pembuka dari Linear Layout adalah < LinearLayout > dan tag akhirannya yaitu </ LinearLayout > . Untuk menentukan horizontal atau vertical tag atau atribut yang dipakai yaitu android:orientation.

Contoh Linear Layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="send" />
</LinearLayout>

hasil dari kode-kode xml di atas yaitu seperti gambar dibawah ini :

Relative Layout

Relative Layout adalah merupakan layout yang bisa dipakai untuk mengatur widget atau komponen aplikasi android secara relative (bebas), tidak sebatas vertical atau horizontal saja.

Setiap komonen bisa ditentukan posisinya secara relative (bebas), seperti dibagian bawah, kiri, atas, dan tengah. Tag pembuka RelativeLayout yaitu <RelativeLayout> dan penutupnya </RelativeLayout>.

Contoh xml Relative Layout :

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

    <ImageView
        android:src="@mipmap/ic_launcher"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:id="@+id/iv_profpic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/et_chat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/iv_profpic"
        android:hint="Masukkan pesan ..." />

    <Button
        android:id="@+id/bt_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignRight="@id/et_chat"
        android:text="Submit" />

    <TextView
        android:id="@+id/tv_chat2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bt_submit"
        android:layout_alignParentRight="true"
        android:layout_margin="10dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Hei juga, kabar baik !" />

    <TextView
        android:id="@+id/tv_chat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_chat2"
        android:layout_margin="10dp"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="Haloo, apa kabar?" />

</RelativeLayout>

hasil dari semua kode diatas yaitu :

Table Layout

Dalam kita membuat layout menggunakan baris dan kolom kita bisa menggunakan Table Layout. Tidak akan ada garis kolom, baris, atau cell yang ditampilkan meskipun namanya adalah table layout.

Tag pembukanya yaitu <TableLayout>, sedangkan tag penutup dari layout ini adalah </TableLayout>.

Contoh penertapannya silahkan ketikan kode-kode xml dibawah ini pada Activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*"  
    android:stretchColumns="*" >

    <!-- Baris pertama -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp" 
            android:text="Baris Pertama"  
            android:layout_span="3"
            android:gravity="center"
            android:background="#37abc8"
            android:textColor="#f2f2f2"/>  
    </TableRow>

    <!-- Baris kedua -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp" 
            android:text="Baris Kedua"  
            android:layout_span="3"
            android:gravity="center"
            android:background="#222222"
            android:textColor="#f2f2f2"/>  
    </TableRow>

    <!-- Baris ketiga -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:textSize="18dp" 
            android:text="Baris Ketiga"  
            android:layout_span="3"
            android:gravity="center"
            android:background="#f6f6f6"
            android:textColor="#222222"/>  
    </TableRow>
</TableLayout>

Penjelasan kode :

Baris 11 hingga baris 24 adalah script XML untuk baris pertama.
Baris 27 – 40 untuk baris kedua
dan Baris 43 – 56 untuk baris ketiga
Masing-masing teks pada baris bisa terletak ditengah dari baris itu sendiri adalah karena kita memecahnya menggunakan tag android:layout_span=”3″

Tinggalkan Balasan