Jenis & Fungsi Layout di Android Studio

Apa itu Layout pada Android Studio?

Sebelum kita membahas tentang macam-macam layout di android studio dan fungsinya, alangkah baiknya kalau kita membahas terlebih dahulu fungsi android studio.

Android studio merupakan perangkat lunak yang dapat membuat aplikasi android. Fungsinya sudah jelas selain buat aplikasi dari awal, bisa juga untuk mengembangkan aplikasi android.

Cara menggunakan android studio tidak terlalu sulit karena bahasa pemrograman nya mudah dipahami untuk pemula, sistem operasi android studio juga bisa di gunakan untuk windows baru. Jika android studio kalian masih versi lama sebaiknya gunakan versi terbarunya, download software resmi di sini.

Layout adalah sebuah tampilan tata letak di Android yang mengatur posisi penempatan palette Teks, Gambar, Tombol ataupun palette lainnya. 

Layout merupakan tata letak dari elemen elemen desain terhadap suatu bidang dalam media tertentu untuk mendukung konsep atau pesan yang dibuat, inti prinsip dasar nya kurang lebih seperti itu.

Tidak ada batasan juga dalam membuat layout baru di android studio, kita bebas mau buat banyak sekalipun.

Fungsi layout untuk membuat tampilan aplikasi menjadi rapih dan tersusun palette-nya, sehingga pengguna aplikasi bisa merasa nyaman dan betah saat menggunakannya.

Disini gelarlapake tidak membahas cara untuk menjalankan android studio, apalagi untuk pengembang aplikasi android. Artikel ini hanya membahas jenis layout dan penggunaanya.

Jenis Layout di Android Studio

Masih banyak yang bingung dalam penggunaan layout saat membuat aplikasi, padahal perbedaan layout di android studio tidak terlalu jauh dan bisa dikatakan hampir sama. Okey langsung saja, berikut jenis - jenis layout pada android studio beserta fungsi dan penggunaannya.

1. Relative Layout

Relative Layout adalah tampilan tata letak layout yang penempatan palette -nya bisa lebih Relative (Bebas) diletakan dimana saja.

Fungsi relative layout di android studio untuk mempermudah penempatan palette di layout, dalam penempatannya bisa berada di bagian atas atau dibawah palette yang lain.

Jadi bisa dibilang bahwa Relative Layout adalah sebuah desain tampilan pada aplikasi yang penempatan tata letak palette-nya bisa secara bebas dan tidak perlu mengatur orientasi (tampilan layout jadi vertical atau horizontal) seperti pada penerapan di Linear Layout.

Contoh Penggunaan Relative Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    tools:context=".MainActivity">
    <!-- gelarlapake.blogspot.com -->
    <ImageView
        android:id="@+id/gelarlapak"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:srcCompat="@tools:sample/avatars"
        android:layout_alignParentLeft="true"/>
    <TextView
        android:id="@+id/gelar_lapak"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="8"
        android:text="Name: Johnson"
        android:textSize="24sp"
        android:layout_alignParentRight="true"/>
    <TextView
        android:id="@+id/GelarLapak"
        android:layout_marginTop="60dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="8"
        android:text="Country: Indonesia"
        android:textSize="24sp"
        android:layout_alignParentRight="true"/>
    <!-- gelarlapake.blogspot.com -->
</RelativeLayout>

Hasil

2. Linear Layout

Linear Layout android studio adalah sebuah tampilan tata letak layout yang penempatan palette-nya sejajar dalam satu arah secara horizontal atau vertical. 

Fungsi Linear Layout di android studio untuk merapihkan susunan penempatan palette di dalam layout, apakah palette -nya tersusun ke samping atau kebawah, arah Linear Layout bisa dilihat pada atribut android:orientation="vertical" atau "horizontal".

Contoh Penggunaan Linear Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:padding="16dp"
    tools:context=".MainActivity">
    <!-- gelarlapake.blogspot.com -->
    <EditText
        android:id="@+id/Gelar_Lapak"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="10dp"
        android:background="#ededed"
        android:hint="Email"/>
    <EditText
        android:id="@+id/gelarlapak"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="10dp"
        android:background="#ededed"
        android:hint="Password" />
    <!-- gelarlapake.blogspot.com -->
    <Button
        android:id="@+id/gelar_lapak"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dip"
        android:text="LOGIN"/>
</LinearLayout>

Hasil

3. Constraint Layout

Constraint Layout android studio adalah sebuah tampilan tata letak layout yang memiliki tali (Constraint) untuk menghubungkan antar palette dengan palette yang lainnya menjadi tersusun.

Fungsi Constraint Layout di android studio untuk merapihkan susunan penempatan palette yang tidak teratur di dalam layout.

Dengan adanya tali (Constraint), palette yang berada di paling bawah posisinya bisa kita atur ke posisi atas tanpa harus memindahkan palette yang sudah dibuat.

Jadi tali (Constraint) tersebut wajib di ikatkan atau di hubungkan pada masing-masing palette supaya hasil layoutnya bisa tersusun rapih. 

Atribut app:layout_constraintTop_toBottomOf="@+id/imageView" pada kode palette (Text) dibawah mengartikan posisi palette teks berada di bawah palette view (Gambar).

Contoh Penggunaan Constraint Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    tools:context=".MainActivity">
    <!-- gelarlapake.blogspot.com -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:srcCompat="@tools:sample/avatars"
        android:layout_marginTop="36dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.0"/>
    <!-- gelarlapake.blogspot.com -->
    <EditText
        android:id="@+id/Email"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="50dp"
        android:background="#ededed"
        android:hint="Email"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
    <EditText
        android:id="@+id/Password"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:background="#ededed"
        android:hint="Password"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/Email"/>
    <!-- gelarlapake.blogspot.com -->
    <Button
        android:id="@+id/gelar_lapak"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="LOGIN"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/Password"/>
        <!-- gelarlapake.blogspot.com -->
</androidx.constraintlayout.widget.ConstraintLayout>

Hasil

4. Frame Layout

Frame Layout android studio adalah sebuah tampilan tata letak layout yang digunakan untuk menggabungkan 2 palette jadi 1.

Fungsi Frame Layout di android studio untuk membuat sebuah palette yang saling bertindihan atau menumpuk di dalam layout, contohnya yaitu kita membuat button berada di atas image.

Contoh Penggunaan Frame Layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#1112">
    <!-- gelarlapake.blogspot.com -->
    <ImageView
        android:id="@+id/Gelar_Lapak"
        android:layout_gravity="center"
        android:layout_width="300dp"
        android:layout_height="300dp"
        tools:srcCompat="@tools:sample/avatars"/>
    <Button
        android:id="@+id/gelarlapak"
        android:layout_gravity="center"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="Click Button"
        android:background="#59b2f4"
        android:textColor="#fff"
        android:textSize="19dp" />
    <!-- gelarlapake.blogspot.com -->
</FrameLayout>

Hasil

5. Table Layout

Table Layout android studio adalah sebuah tata letak yang digunakan untuk membangun desain user interface (tampilan antar muka) pada aplikasi android. 

Table Layout di android studio hanya bisa menempatkan 1 palette saja di dalam layout, untuk menempatkan palette lebih dari 1 maka gunakan Table Row.

Table Row digunakan untuk menampung beberapa palette dengan posisi palette kesamping bukan kebawah.

TableLayout : Tag pembuka layout.

TableRow: Tag untuk membuat baris di dalam layout.

Contoh Penggunaan Table Layout dan Table Row

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    tools:context=".MainActivity">
    <!-- gelarlapake.blogspot.com -->
    <TextView
        android:id="@+id/gelar_lapak"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:gravity="center"
        android:textColor="#000"
        android:text="Forgotten password?"
        android:textSize="19dp"
        android:layout_marginLeft="19dp"/>
    <!-- gelarlapake.blogspot.com -->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp" >
        
        <TextView
            android:id="@+id/Gelar_Lapak"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:textColor="#000"
            android:text="Enter your email:"
            android:textSize="19dp"
            android:layout_marginLeft="17dp"/>
        
        <EditText
            android:id="@+id/gelarlapak"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:background="#ededed"
            android:layout_marginLeft="5dp"
            android:layout_weight="2"/>
    </TableRow>
    <!-- gelarlapake.blogspot.com -->
    <Button
        android:id="@+id/Gelarlapak"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="120dp"
        android:layout_marginRight="120dp"
        android:gravity="center"
        android:layout_marginTop="19dp"
        android:text="Search"
        android:clickable="true" />
    <!-- gelarlapake.blogspot.com -->
</TableLayout>

Hasil

Nah itulah jenis - jenis dan fungsi Layout pada Android Studio, kita bebas membuat 2 layout baru ataupun lebih asalkan kita sudah tau kegunaan dari masing-masing layout. Sekian

Bagikan Artikel ini