Belajar Mengenal atribut Margin dan Padding pada Layout XML

di April 22, 2017

Belajar Mengenal atribut Margin dan Padding pada Layout XML

Saat kita membangun User Interface ,dengan menggunakan Layout XML,biasanya kita menggunakan atribut antara margin dan padding ,untuk mendesain suatu konten View ,yang sedang kita kembangkan, Kedua atribut tersebut ,memiliki fungsi atau hasil tampilan yang berbeda ,meskipun sama-sama memiliki nilau atau value yang sama. Jika kita menggunakan atribut margin ,ini digunakan untuk memberi jarak(batasan) antara konten View ,(Seperti :TextView ,Button dll), dengan konten View lain. Sedangkan untuk atribut padding ,digunakan mempertebal atau memperlapis sebuah konten View. Jika kalian masih bingung ,kalian bisa melihat ,Contoh gambaranya dibawah ini:

                                            Contoh Perbandingan Margin dan Padding

Seperti pada gambar diatas,jika kita terapkan atribut padding (yang ditandai area warna merah),pada TextView, maka akan mempertebal jarak dari dalam konten. Sedangkan jika terapkan ,atribut margin (yang ditandai area warna biru), maka akan memberi jarak antara TextView dengan Parent View(RelativeLayout,LinearLayout) ,atau konten atau view lain, seperti pada contoh gambar diatas ,dengan Button.

Nah ,setelah kita melihat Contoh Konsepnya, sekarang kita coba terapkan ,pada layout XML, di Android Studio.

                                                 

Contoh Penerapan Margin dan Padding Android Studio

Contoh Code Layout XML:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.               android:orientation="vertical"
4.               android:layout_width="match_parent"
5.               android:layout_height="match_parent"
6.               android:background="@color/colorPrimary"
8.         >
11.     <TextView
12.             android:text="TextView"
13.             android:layout_width="wrap_content"
14.             android:layout_height="wrap_content"
15.             android:padding="50dp"
16.             android:id="@+id/textView"
17.             android:layout_alignParentTop="true"
18.             android:layout_alignParentLeft="true"
19.             android:layout_alignParentStart="true"
20.             android:layout_marginLeft="103dp"
21.             android:layout_marginTop="236dp"
22.             android:textStyle="bold"
23.             android:textColor="@color/whiteColor"/>
24. </RelativeLayout>

Contoh atribut padding :

android:paddingBottom=""
android:paddingEnd=""
android:paddingStart=""
android:paddingTop=""
android:paddingRight=""
android:paddingLeft=""

Contoh Atribut Padding

Contoh atribut margin :

            android:layout_margin=""
            android:layout_marginEnd=""
            android:layout_marginBottom=""
            android:layout_marginLeft=""
            android:layout_marginRight=""
            android:layout_marginStart=""
            android:layout_marginTop=""

Contoh Atribut Margin