Beranda
Android Studio

Pengenalan dan Contoh Program LinearLayout, RelativeLayout, TableLayout, dan AbsoluteLayout

Pengertian Layout

Menurut Developer Android, Layout menentukan struktur untuk antarmuka pengguna di aplikasi Anda, seperti di dalam aktivitas. Semua elemen pada layout  dibuat menggunakan hierarki objek View dan ViewGroup. View biasanya menggambar sesuatu yang pengguna bisa melihat dan berinteraksi dengannya. Sedangkan ViewGroup adalah container yang tidak terlihat yang menentukan struktur layout untuk View dan objek ViewGroup lainnya.

Layout Android Studio
Layout Android Studio

Jadi layout adalah tampilan berupa tata letak di Android untuk mengatur penempatan teks, gambar, ataupun komponen lainnya sehingga tampilan pada aplikasi yang dibuat terlihat interaktif, rapi, nyaman dan tentunya user friendly untuk pengguna. Pada layout ini lah kita dapat mengatur seperti apa tema dan warna dari aplikasi yang akan kita bangun. Hal ini akan menjadi sangat penting karena desain aplikasi akan mempengaruhi nilai jual dan nilai guna aplikasi itu sendiri. Berikut adalah contoh macam-macam layout yang umum digunakan di Android Studio.

LinearLayout

LinearLayout adalah sekelompok tampilan yang menyejajarkan semua anak dalam satu arah, secara vertikal atau horizontal. Anda bisa menetapkan arah layout dengan  atribut android:orientation. Semua anak LinearLayout akan ditumpuk satu sama lain, sehingga daftar vertikal hanya akan memiliki satu anak per baris, berapa pun lebarnya, dan daftar horizontal hanya akan setinggi satu baris (tinggi anak yang tertinggi, ditambah pengisi). LinearLayout mematuhi margin antara anak dan gravitasi (sejajar kanan, tengah, atau kiri) setiap anak (https://developer.android.com).

Linear layout termasuk layout yang sangat mudah untuk digunakan hal ini karena peletakkannya cukup sederhana jika kita akan menyusun view atas dan bawah maka kita cukup menggunakan linear layout vertikal dan jika kita akan menyususn view bersebelahan maka gunakan linear layout yang berorientasi horizintal. Namun penggunaan Linear layout pada susunan desain yang complex tidak disarankan karena dapat membuat tumpukan layout yang begitu dalam. Banyaknya tumpukan layout/ hirarki bertingkat yang cukup banyak akan menyebabkan performa aplikasi menurun.

Disini saya akan membuat dua program sederhana bagaimana cara membuat LinearLayout dengan sedikit perbedaan di padding (kanan & kiri) dan komponen nya, untuk lebih jelasnya silahkan teman – teman lihat tutorial dibawah:

Contoh Program LinearLayout

  1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
      2. Pilih → Start Android Studio
      Pilih → Start new Android Studio Project
      Pilih → Empty Activity → Next
      Configure your Project :
    Name: LinearLayout_1
    Package Name: blog.gasdong.com 
    Save Location: D\:2021\Semester6\TI-1\14518511 Ananda Ariwibawa\LinearLayout 
    Language: Java 
    Minimum SDK: API14
  2. Buka activity_main.xml nya dan kemudian ketikan code program seperti di bawah:
     <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:orientation="vertical"  
   tools:context=".MainActivity" >  
   <TextView  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:background="#4CAF50"  
     android:padding="16dp"  
     android:fontFamily="casual"  
     android:textSize="21dp"  
     android:textStyle="bold"  
     android:text="Vertical 1"  
     android:textColor="@android:color/white" />  
   <TextView  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:background="#3F51B5"  
     android:padding="16dp"  
     android:fontFamily="casual"  
     android:textSize="21dp"  
     android:textStyle="bold"  
     android:text="Vertical 2"  
     android:textColor="@android:color/white" />  
   <LinearLayout  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:orientation="horizontal">  
      <TextView  
           android:layout_width="wrap_parent"  
           android:layout_height="wrap_content"  
           android:background="#E91E63"  
           android:padding="16dp"  
           android:fontFamily="casual"  
           android:textStyle="bold"  
           android:text="Horizontal 1"  
           android:textColor="@android:color/white" />  
      <TextView  
           android:layout_width="wrap_parent"  
           android:layout_height="wrap_content"  
           android:background="#673AB7"  
           android:padding="16dp"  
           android:fontFamily="casual"  
           android:textStyle="bold"  
           android:text="Horizontal 2"  
           android:textColor="@android:color/white" />  
      <TextView  
           android:layout_width="wrap_parent"  
           android:layout_height="wrap_content"  
           android:background="#2196F3"  
           android:padding="16dp"  
           android:fontFamily="casual"  
           android:textStyle="bold"  
           android:text="Horizontal 3"  
           android:textColor="@android:color/white" />  
   </LinearLayout>  
 </LinearLayout>   
  3. Bila sudah menambahkan code program seperti diatas , kemudian silahkan untuk run projeknya, maka tampilan hasilnya seperti gambar dibawah.

    LinearLayout 1

RelativeLayout

Relative Layout menurut https://developer.android.com, yaitu grup tampilan yang menampilkan tampilan turunan di posisi relatif. Posisi setiap tampilan dapat ditentukan sebagai posisi relatif terhadap elemen yang setara (seperti di sebelah kiri atau di bawah tampilan lain) atau di posisi relatif terhadap RelativeLayout induk (seperti sejajar dengan bagian bawah, kiri, atau tengah). RelativeLayout sangat efektif untuk mendesain antarmuka pengguna karena dapat menghilangkan grup tampilan bertingkat dan menjaga hierarki tata letak Anda tetap sederhana, sehingga meningkatkan performa. Jika ternyata kita menggunakan beberapa grup LinearLayout bertingkat, kita dapat menggantinya dengan RelativeLayout tunggal. 

Dari pengertian tersebut dapat kita maknai bahwa relative layout dapat menyederhanakan penggunaan linear layout bertingkat demi meningkatkan performa aplikasi. Bagi admin penggunaan relative layout sangat lah mudah, kita dapat menaruh view disebelah kanan atau kiri dengan kunci android:layout_toRightOf (untuk sebelah kanan view lain) dan android:layout_toLeftOf (untuk sebelah kiri view lain). Untuk peletakan view sejajar yang bersebelahan maka menggunkan id dari view yang akan menjadi referensi dari view yang akan kita atur.

Disini saya akan membuat dua program sederhana bagaimana cara membuat RelativLayout dimana setiap projek memiliki perbedaan di  setiap komponen maupun background layoutnya, untuk lebih jelasnya silahkan teman – teman lihat tutorial dibawah:

Contoh Program RelativeLayout

  1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
      2. Pilih → Start Android Studio
      Pilih → Start new Android Studio Project
      Pilih → Empty Activity → Next
      Configure your Project :
    Name: RelativeLayout_1
    Package Name: blog.gasdong.com 
    Save Location: D\:2021\Semester6\TI-1\14518511 Ananda Ariwibawa\RelativeLayout_1 
    Language: Java 
    Minimum SDK: API14
  2. Buka activity_main.xml nya dan kemudian ketikan code program seperti di bawah:
     <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   tools:context=".MainActivity" >  
   <Button  
      android:id="@+id/button1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:text="Tengah"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button2"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentLeft="true"  
     android:layout_centerHorizontal="true"  
     android:text="Kiri Atas"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button3"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerHorizontal="true"  
     android:text="T.Atas"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button4"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentRight="true"  
     android:layout_centerHorizontal="true"  
     android:text="Kanan Atas"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button5"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerVertical="true"  
     android:text="Kiri.T"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button6"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentRight="true"  
     android:layout_centerVertical="true"  
     android:text="Kanan.T"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button7"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentLeft="true"  
     android:layout_alignParentBottom="true"  
     android:text="Kiri Bawah"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button8"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentBottom="true"  
     android:layout_centerHorizontal="true"  
     android:text="T.Bawah"  
     android:textSize="18sp" />  
   <Button  
      android:id="@+id/button9"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentRight="true"  
     android:layout_alignParentBottom="true"  
     android:text="Kanan Bawah"  
     android:textSize="18sp" />  
 </RelativeLayout>
  3. Dan terakhir run program hasil dari code diatas, akan terlihat seperti gambar dibawah ini:

    RelativeLayout
    RelativeLayout

TableLayout

TableLayout merupakan teknik penggambaran user interface aplikasi android berdasarkan baris dan kolom. Baris adalah berurutan kebawah dan kolom berurutan menyamping. Untuk urusan layouting menggunakan TableLayout, developer Android perlu mengetahui beberapa hal, diantaranya :

  • TableLayout di Android secara default tidak menampilkan garis batas untuk masing-masing baris dan kolom.
  • Tiap baris table bisa memiliki satu atau banyak sel.
  • Tiap sel hanya diperbolehkan memiliki satu objek view.
Jika pada Aplikasi Web pembaca pasti mengetahui penggunaan table untuk user interface, Android pun demikian. Pada dasarnya penggunaan TableLayout pada aplikasi Android hanya sebatas untuk keperluan tertentu, dan tidak menyeluruh untuk layouting. Karena penggunaan Relative Layout maupun Linear Layout lebih disukai developer.

Disini saya akan membuat dua program sederhana bagaimana cara membuat TableLayout dengan sedikit perbedaan di padding, stretch coloums dan komponen nya, untuk lebih jelasnya silahkan teman – teman lihat tutorial dibawah:

Contoh Program TableLayout

  1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
      2. Pilih → Start Android Studio
      Pilih → Start new Android Studio Project
      Pilih → Empty Activity → Next
      Configure your Project :
    Name: TableLayout_1
    Package Name: blog.gasdong.com 
    Save Location: D\:2021\Semester6\TI-1\14518511 Ananda Ariwibawa\TableLayout_1 
    Language: Java 
    Minimum SDK: API14
  2. Buka activity_main.xml nya dan kemudian ketikan code program seperti di bawah:
     <?xml version="1.0" encoding="utf-8"?>  
 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:padding="10dp"  
   android:stretchColumns="1, 3"  
   tools:context=".MainActivity" >  
   <TableRow  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:layout_centerInParent="true">  
      <TextView  
           android:id="@+id/textView"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_span="4"  
           android:gravify="center"  
           android:textStyle="bold"  
           android:fontFamily="monospace"  
           android:text="Form Login"  
           andoid:textSize="22sp" />  
   </TableRow>  
   <TableRow  
      android:layout_width="match_parent"  
     android:layout_height="match_parent">  
      <TextView  
           android:id="@+id/textView2"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:paddingRight="10dp"  
           android:textStyle="bold"  
           android:fontFamily="monospace"  
           android:text="Username" />  
      <EditText  
           android:id="@+id/editText"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_span="3"  
           android:ems="10"  
           android:inputType="textPersonName" />  
   </TableRow>  
   <TableRow  
      android:layout_width="match_parent"  
     android:layout_height="match_parent">  
      <TextView  
           android:id="@+id/textView3"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:paddingRight="10dp"  
           android:textStyle="bold"  
           android:fontFamily="monospace"  
           android:text="Password" />  
      <EditText  
           android:id="@+id/editText2"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_span="3"  
           android:ems="10"  
           android:inputType="textPassword" />  
   </TableRow>  
   <TableRow  
      android:layout_width="match_parent"  
     android:layout_height="match_parent">  
      <Button  
           android:id="@+id/button5"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_column="1"  
           android:layout_gravity="right"  
           android:textStyle="bold"  
           android:fontFamily="monospace"  
           android:text="Login" />  
      <Button  
           android:id="@+id/button6"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:textStyle="bold"  
           android:fontFamily="monospace"  
           android:inputType="Cancel" />  
      <Button  
           android:id="@+id/button7"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_gravity="left"  
           android:textStyle="bold"  
           android:fontFamily="monospace"  
           android:text="Forget Pswd?" />  
   </TableRow>  
 </TableLayout>
  3. Jika sudah menambahkan code program seperti diatas, kemudian silahkan untuk run projeknya, maka tampilan hasilnya seperti gambar dibawah.

    TableLayout
    TableLayout

AbsoluteLayout

Absolute Layout adalah salah satu komponen user interface. Yang digunakan untuk mengatur tata letak suatu widget seperti Button, TextView, EditText, dsb, dengan menggunakan atribut layout_x dan layout_y pada komponen user interface, seperti Button, yang digunakan untuk mengatur koordinat atau angka di atribut layout_x dan layout_y.

Disini saya akan membuat program sederhana bagaimana cara membuat AbsoluteLayout di android studio, untuk lebih jelasnya silahkan teman – teman lihat tutorial dibawah:

Contoh Program AbsoluteLayout

  1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
      2. Pilih → Start Android Studio
      Pilih → Start new Android Studio Project
      Pilih → Empty Activity → Next
      Configure your Project :
    Name: AbsoluteLayout_1
    Package Name: blog.gasdong.com 
    Save Location: D\:2021\Semester6\TI-1\14518511 Ananda Ariwibawa\AbsoluteLayout_1 
    Language: Java 
    Minimum SDK: API14
  2. Buka activity_main.xml nya dan kemudian ketikan code program seperti di bawah:
     <?xml version="1.0" encoding="utf-8"?>  
 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:layout_margin="8dp"  
   android:background="#FFF5F5F5"  
   tools:context=".MainActivity"  
   tools:ignore="Deprecated" >  
   <TextView  
      android:id="@+id/textView"  
      android:layout_width="match_parent"  
      android:layout_height="wrap_content"  
      android:gravity="center"  
      android:text="Contoh Absolute Layout"  
      android:textSize="21sp"  
      android:fontFamily="monospace"  
      android:textStyle="bold"  
      tools:layout_editor_absoluteX="64dp"  
      tools:layout_editor_absoluteY="72dp" />  
   <EditText  
      android:id="@+id/editText"  
      android:layout_width="match_parent"  
      android:layout_height="wrap_content"  
      android:layout_y="30dp"  
      android:hint="Email"  
      android:fontFamily="monospace"  
      android:inputType="textPersonName"  
      tools:layout_editor_absoluteX="0dp"  
      tools:layout_editor_absoluteY="28dp" />  
   <EditText  
      android:id="@+id/editText2"  
      android:layout_width="match_parent"  
      android:layout_height="wrap_content"  
      android:layout_y="80dp"  
      android:hint="Password"  
      android:fontFamily="monospace"  
      android:inputType="textPassword"  
      tools:layout_editor_absoluteX="0dp"  
      tools:layout_editor_absoluteY="28dp" />  
   <Button  
      android:id="@+id/button"  
      android:layout_width="wrap_content"  
      android:layout_height="wrap_content"  
      android:layout_x="16dp"  
      android:layout_y="141dp"  
      android:fontFamily="monospace"  
      android:text="Masuk"  
      android:textStyle="bold"  
      tools:layout_editor_absoluteX="0dp"  
      tools:layout_editor_absoluteY="126dp" />  
   <Button  
      android:id="@+id/button2"  
      android:layout_width="wrap_content"  
      android:layout_height="wrap_content"  
      android:layout_x="294dp"  
      android:layout_y="139dp"  
      android:fontFamily="monospace"  
      android:text="Daftar"  
      android:textStyle="bold"  
      tools:layout_editor_absoluteX="0dp"  
      tools:layout_editor_absoluteY="126dp" />  
 </AbsoluteLayout>
  3. Kemudian silahkan untuk run projeknya, maka tampilan hasilnya seperti gambar dibawah.

    AbsoluteLayout
    AbsoluteLayout

Simple Person - Sunset Admirer - Coffee Addict - Sejengkal Tuhan - Diatas Tulisanku