-->

Jenis & Fungsi Layout di Android Studio

Jenis 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 pengertian layout pada android studio.

Layout adalah sebuah tampilan tata letak di Android yang mengatur posisi penempatan palette Teks, Gambar, Tombol ataupun palette lainnya. 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.

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">
    <!-- www.gelarlapak.xyz -->
    <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"/>
    <!-- www.gelarlapak.xyz -->
</RelativeLayout>


Hasil

Relative Layout Android Studio


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">
    <!-- www.gelarlapak.xyz -->
    <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" />
    <!-- www.gelarlapak.xyz -->
    <Button
        android:id="@+id/gelar_lapak"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dip"
        android:text="LOGIN"/>
</LinearLayout>


Hasil

Linear Layout Android Studio


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">
    <!-- www.gelarlapak.xyz -->
    <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"/>
    <!-- www.gelarlapak.xyz -->
    <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"/>
    <!-- www.gelarlapak.xyz -->
    <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"/>
        <!-- www.gelarlapak.xyz -->
</androidx.constraintlayout.widget.ConstraintLayout>


Hasil

Constraint Layout Android Studio


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">
    <!-- www.gelarlapak.xyz -->
    <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" />
    <!-- www.gelarlapak.xyz -->
</FrameLayout>


Hasil

Frame Layout Android Studio


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">
    <!-- www.gelarlapak.xyz -->
    <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"/>
    <!-- www.gelarlapak.xyz -->
    <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>
    <!-- www.gelarlapak.xyz -->
    <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" />
    <!-- www.gelarlapak.xyz -->
</TableLayout>


Hasil

Table Layout dan Row Layout Android Studio

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

Show comments
Hide comments

0 Response to "Jenis & Fungsi Layout di Android Studio"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel