Memahami Penggunaan Match Parent dan Wrap Content

Assalamualaikum Warahahmatullahi Wabarakatuh.

Untuk mendesign layout XML, yang digunakan untuk keperluan User Interface/ User Experience pada Aplikasi Android. Terdapat dua atribut yang sangat umum digunakan oleh para developer, yaitu match_parent (fill_parent) dan wrap_content, kedua atribut ini sering kita jumpai saat membuat sebuah komponen untuk design UI. Atribut Match Parent dan Wrap Content digunakan untuk menentukan jenis lebar (width) dan tinggi (height), pada View dan ViewGroup di dalam Aplikasi Android.

Pada tutorial ini, kita akan belajar bagaimana cara menerapkan match parent dan wrap content pada Aplikasi Android, disini kita akan memperaktekannya pada sebuah komponen yang terdapat didalam Android Studio, seperti Button, TextView, Edittext, dsb.

Materi Lainnya Yan Direkomendasikan:

• Cara Membuat FrameLayout di Android Studio
• Tutorial Cara Menggunakan LinearLayout pada Layout.xml
• Penggunaan RelativeLayout pada Aplikasi Android

Perbedaan match_parent dan wrap_content adalah atribut match_parent digunakan agar lebar atau tinggi komponen, dapat mengikuti layar atau screen pada perangkat Android. Sedangkan untuk wrap_content digunakan agar lebar atau tinggi, dapat mengikuti object didalam komponen tersebut. Untuk lebih jelasnya mari kita simak tutorial berikut ini.

Memahami Penggunaan Match Parent dan Wrap Content

Pertama, Buka Aplikasi Android Studio Kalian, Buat Project Baru.

A. Contoh Pertama

Buka file activity_main.xml pada project kalian, sebagai contoh, disini kita akan manambahan sebuah Button pada layout tersebut, pada Button tersebut akan kita gunakan atribut wrap_content untuk lebar dan juga tingginya.

<?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-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:background="#FFF5F5F5"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/contoh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="WILDAN TECHNO ART" />
    
</LinearLayout>

Dengan menggunakan atribut wrap_content pada lebar dan juga tingginya, maka ukuran Button tersebut akan menyesuaikan dengan ukuran objek dialamnya, yaitu Text.

B. Contoh Kedua

Pada contoh yang kedua, disini kita akan menggunakan wrap_content hanya pada tingginya saja, lebar pada Button tersebut akan kita ubah menjadi match_parent.

<Button
        android:id="@+id/contoh"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="WILDAN TECHNO ART" />

Sehingga ukuran lebar pada Button tersebut akan mengikuti ukuran layar, sedangkan tingginya akan tetap mengkuti objek didalamnya.

C. Contoh Ketiga

Selanjutnya kebalikan dari contoh yang kedua, yaitu atribut wrapt_content akan kita gunakan pada lebar Button dan match_parent pada tinggi Button.

<Button
        android:id="@+id/contoh"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="WILDAN TECHNO ART" />

D. Contoh Keempat

Jika kita gunakan match_parent pada lebar dan tingginya, maka ukuran Button tersebut akan memenuhi layar.

<Button
        android:id="@+id/contoh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="WILDAN TECHNO ART" />

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.