Perbedaan Margin dengan Padding di Android Studio

Dalam artikel kali ini saya akan membahas sedikit mengenai perbedaan margin dengan padding. Margin dan padding merupakan atribut yang sering digunakan untuk membuat sebuah jarak atau spasi putih pada setiap tampilan yang ada. Margin dan padding ini juga sering digunakan di dalam pemrograman web, yaitu CSS. Bagi yang sudah mempelajari CSS dalam pemrograman web, pasti sudah tidak asing lagi dengan istilah Margin dan Padding.

Perbedaan Margin dengan Padding

Sudah saya sebutkan bahwa margin dan padding memiliki kesamaan fungsi yaitu untuk membuat jarak atau ruang di antara beberapa tampilan. Untuk melihat bagaimana perbedaan margin dengan padding bisa anda lihat di gambar di bawah ini.

Ilustrasi margin dan padding
Note: Spasi putih akibat margin di atas tidak akan terlihat di Android Studio, meski background tampilannya berwarna

Margin

Pada gambar Margin diatas, terdapat panah yang mengarah ke luar dari TextView, dengan kata lain Margin ini adalah atribut yang digunakan untuk mengatur jarak luar dan membuat spasi putih pada tampilan yang menggunakannya, sehingga tampilan yang satu dengan tampilan yang lainnya tidak terlihat menyatu. Di Android Studio, Margin ini ditangani oleh ViewGroup atau tampilan induknya. Hal ini bisa dibuktikan dengan penulisan atributnya yang seperti ini; android:layout_margin. Kata layout di dalam atribut tersebut mengacu pada ViewGroup yang di dalamnya terdapat tampilan yang menggunakan margin.

Untuk menggunakan atribut margin ini ada beberapa cara yaitu;

1. android:layout_margin

Atribut ini digunakan untuk memberi jarak, ruang atau spasi putih pada setiap sisi (atas, bawah, kiri, kanan) dari tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:layout_margin="10dp"/>

2. android:layout_marginTop

Atribut ini digunakan untuk memberi jarak, ruang atau spasi putih di sisi atas tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:layout_marginTop="10dp"/>

3. android:layout_marginBottom

Atribut ini digunakan untuk memberi jarak, ruang atau spasi putih di sisi bawah tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:layout_marginBottom="10dp"/>

4.android:layout_marginRight

Atribut ini digunakan untuk memberi jarak, ruang atau spasi putih di sisi kanan tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:layout_marginRight="10dp"/>

5. android:layout_marginLeft

Atribut ini digunakan untuk memberi jarak, ruang atau spasi putih di sisi kiri tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:layout_marginLeft="10dp"/>

Padding

Jika Margin digunakan untuk mengatur jarak luar dari tampilan, maka Padding ini adalah kebalikan dari Margin, yaitu Padding digunakan untuk mengatur jarak dalam dari konten ke latar belakang dari tampilan tersebut (lihat gambar untuk lebih jelasnya). Ketika anda menggunakan padding, maka jarak antara konten/isi tampilan terhadap latar belakangnya menjadi lebih lebar, sehingga ukuran dari latar belakang tampilan tersebut terlihat melebar. Berbeda dengan margin, padding ini ditangani sendiri oleh tampilan yang memakainya. Sehingga dalam penulisan atributnya tidak memakai kata “layout“.

Berikut ini adalah beberapa atribut padding yang sering digunakan di Android Studio.

1. android:padding

Digunakan untuk mengatur jarak antara konten dan latar belakangnya, pada setiap sisi tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:padding="10dp"/>

2. android:paddingTop

Digunakan untuk mengatur jarak antara konten dan latar belakangnya, pada sisi atas dari tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:paddingTop="10dp"/>

3. android:paddingBottom

Digunakan untuk mengatur jarak antara konten dan latar belakangnya, pada sisi bawah dari tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:paddingBottom="10dp"/>

4. android:paddingRight

Digunakan untuk mengatur jarak antara konten dan latar belakangnya, pada sisi kanan dari tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:paddingRight="10dp"/>

5. android:paddingLeft

Digunakan untuk mengatur jarak antara konten dan latar belakangnya, pada sisi kiri dari tampilan yang menggunakannya. Contoh kode dari atribut ini adalah sebagai berikut.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello!"
    android:textSize="24sp"
    android:paddingLeft="10dp"/>

Kesimpulan

Margin digunakan untuk memberi jarak, ruang atau spasi putih pada tampilan, sehingga tampilan yang satu dengan tampilan yang lainnya tidak terlihat menyatu. Sedangkan Padding digunakan untuk memberi jarak atau ruang pada konten dengan latar belakang dari tampilan yang digunakan. Sekilas mungkin margin dengan padding ini terlihat sama. Akan tetapi anda dapat melihat perbedaan dari kedua atribut ini ketika anda menambahkan warna pada latar belakang tampilan yang anda gunakan.

Sebenarnya masih ada beberapa atribut mengenai margin dan padding yang tidak saya sebutkan di dalam artikel ini. Tetapi, untuk pemula anda dapat menggunakan semua atribut yang sudah saya jelaskan di dalam artikel ini. Di lain waktu saya juga akan mengupdate artikel mengenai perbedaan margin dengan padding ini.

Ok saya rasa artikel mengenai perbedaan margin dengan padding ini sudah cukup. Jika anda memiliki pertanyaan seputar artikel ini, silahkan cantumkan di kolom komentar. Anda juga dapat memberi kritik dan sarannya mengenai artikel atau blog saya ini, agar blog saya ini bisa jauh lebih baik ke depannya. Saya harap anda menggunakan nama asli anda atau setidaknya nama panggilan yang sopan ketika berkomentar, dan jangan lupa subscribe.

Terima Kasih.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.