Perbedaan antara Margin dan Padding pada Layout XML

Assalamualaikum Warahmatullahi Wabarakatuh.

Saat mendesain User Interface pada Aplikasi yang kita buat, menggunakan layout.xml, kalian pasti sudah tidak asing lagi dengan yang namanya layout_margin dan juga layout_padding, jika sebelumnya kalian pernah belajar mengenai pemrograman android, pasti keuda atribut itu sering kita jumpai. Jika kalian masih pemula dan baru mendengar istilah dari layout margin dan padding, disini saya akan menjelaskan secara singkat mengenai fungsi dan juga perbedaan dari kedua atribut tersebut.

Layout Margin adalah atribut yang digunakan untuk mengatur jarak antar View, dari satu objek ke objek lainnya, seperti TextView, Button, EditText, dsb. Sedangkan Layout Padding digunakan untuk mempertebal suatu konten didalam View.

Pada tutorial ini, kita akan belajar mengenai fungsi, perbedaan dan juga cara penerapan layout margin dan padding pada layout xml didalam aplikasi android kita, untuk lebih jelasnya mari kita simak tutorial berikut ini.

Materi Lainnya Yang Direkomendasikan:

• Memahami Penggunaan Match Parent dan Wrap Content
• Cara Agar Aplikasi Android Mendukung Beberapa Layar (Multi Screen)
• Penggunaan RelativeLayout pada Aplikasi Android

Perbandingan Layout Margin dan Layout Padding

A. Penggunaan Layout Margin

Pertama buka aplikasi Android Studio kalian, Buat Project Baru.

Sudah saya jelaskan sebelumnya, Atribut Layout Margin digunakan untuk mengatur jarak dengan objek/view lainnya, pada contoh berikut ini secara default kita akan menambahkan Button tanpa megunakan atribut layout_margin.

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

    <Button
        android:id="@+id/testing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Contoh" />
    
</RelativeLayout>

Tampilannya akan terlihat seperti ini:

Pada Button tersebut, kita bisa mengatur jaraknya dengan sisi layar atau sisi dari container yang digunakan (Seperti RelativeLayout, LinearLayout, dsb), misalnya kita akan mengatur pada sisi kiri dan atas Button tersebut, seperi berikut ini:

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

    <Button
        android:id="@+id/testing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:text="Contoh" />

</RelativeLayout>

Disana kita menggunakan aribut marginLeft (Untuk mengatur jarak dari sisi kiri objek) dan marginTop (Untuk mengatur jarak pada bagian atas objek), maka akan terlihat seperti ini:

Contoh berikutnya, kita akan menggunakan 3 buah objek sebagai contoh, seperti berikut ini:

<?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:background="#FFF5F5F5"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/obj1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:layout_marginLeft="8dp"
        android:text="Objek 1" />

    <Button
        android:id="@+id/obj2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:text="Objek 2" />

    <Button
        android:id="@+id/obj3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="70dp"
        android:layout_marginTop="12dp"
        android:text="Objek 3" />
</LinearLayout>

Tampilan pada layout tersebut akan telihat seperti ini:

B. Penggunaan Layout Padding

Layout Padding digunakan untuk mempertebal suatu konten didalam View, misalnya kita mempunyai sebuah Button, didalam button tersebut pada umumnya terdapat sebuah Text.

Misalnya kita atur padding pada sisi kana dan atas button, seperti berikut ini:

<?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:background="#FFF5F5F5"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="32dp"
        android:paddingTop="32dp"
        android:text="Contoh Objek" />

</LinearLayout>

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

Wassalamualaikum Warahmatullahi Wabarakatuh.