Cara Membuat FrameLayout di Android Studio


Assalamualaikum Warahmatullahi Wabarakatuh. FrameLayout merupakan jenis layout yang elemen UI didalamnya saling bertumpuk dengan elemen UI lain, urutan elemen UI menentukan urutan tampilan.


FrameLayout

Untuk membuat FrameLayout pada layout.xml tersebut, kalian perlu menambahkan tag <FrameLayout> dan di akhri dengan tag </FrameLayout>, pada contoh berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button pertama, seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="350dp"
        android:layout_height="400dp"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="140dp"
        android:layout_height="200dp"
        android:text="Button 2" />

</FrameLayout>

maka akan terlihat seperti ini:

WildanTechnoArt-Frame Layout Example

Baca Juga:

Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian atur sendiri, kalian dapat menggunakan beberapa atribut berikut ini:
  • android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri elemen UI pada elemen UI lainnya.
  • android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan elemen UI pada elemen UI lainnya.
  • android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI pada elemen UI lainnya.
  • android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah elemen UI pada elemen UI lainnya.
  • android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah, center, center horizontal dan center vertical.

Pada contoh berikutnya,edit kode pada layout.xml kalian menjadi seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="350dp"
        android:layout_height="400dp"
        android:layout_gravity="center"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="140dp"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="18dp"
        android:text="Button 2" />

</FrameLayout>

hasilnya akan terlihat seperti berikut ini:

WildanTechnoArt-Frame Layout Example 2

Cukup sederhana bukan, dengan menggunakan FrameLayout, semua elemen UI yang terpasang didalamnya bisa saling menyisipkan antara elemen UI dengan elemen UI lainnya.

Mungkin hanya itu saja yang bisa saya jelaskan, mohon maaf bila ada kesalahan. Wabillahi Taufik Wal Hidayah Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.