안드로이드[Android] 레이아웃 - magin과 padding의 차이

안드로이드 앱을 개발할 때 UI를 관리하는 과정에서 여백 을 주기위하여 magin 혹은 padding을 사용하였는데, 개념을 확실하게 알고 썼다니 보다 그때 그때 봐꿔가며 썼던 것 같아 정리를 해보았습니다.

magin과 padding을 간단하게 기억해보자.

패딩을 간단하게 기억하기 위해서 우리가 입는 패딩을 생각해볼 수 있습니다!
두꺼운 패딩을 입게된다면 나와 패딩은 하나로 합체가 되고 당연히 패딩의 크기만큼 부피가 커지겠죠?

 

마진은 그냥 여백이라고 생각하면 기억하기 쉬울 것 같습니다. 여백은 빈 공간을 의미합니다.

 

즉, 특정한 뷰에게 패딩을 주었다면 패딩의 크기만큼 뷰의 크기가 커고 마진을 주었다면 마진의 크기만큼 여백이 생기게 됩니다.

패딩 = 뷰의 내부에 여백을 주는 것 

마진 = 뷰의 외부에 여백을 주는 것 

 

아주 간단한 예시로 버튼의 텍스트 사이즈는 그대로 하고 싶고 터치되는 영역을 늘리고 싶다면 패딩을 주어 버튼이 클릭되는 영역을 확장시킬 수 있습니다.

 

코드

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:text="그냥 버튼"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="Margin을 사용한 버튼"
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="Padding을 사용한 버튼"
        android:padding="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

결과

부모 레이아웃은 리니어 레이아웃이고 총 3개의 버튼을 수직으로 배치시켰습니다.

첫 번째 버튼은 별다른 속성이 없고, 두 번째 버튼은 20dp의 마진을 주어서 상,하,좌,우에 20dp씩 여백이 생긴 것을 볼 수 있습니다.
세 번째 버튼은 20dp의 패딩을 주어서 상,하,좌,우에 20dp 패딩이 생긴 것을 볼 수 있습니다!

Margin은 뷰 외부의 여백(뷰의 외부)을, Padding은 패딩을 입은 것처럼 뷰 내부의 여백(뷰의 내부)에 관여합니다.

 

즉, Margin은 해당 속성을 가진 뷰의 외부에 관여하고 Padding은 해당 속성을 가진 뷰의 내부에 관여합니다.

---

Margin과 Padding의 차이를 코드로 알아보기

아래의 코드는 리니어 레이아웃의 하위 뷰로 기본 텍스트뷰, 마진만 있는 텍스트뷰, 패딩만 있는 텍스트뷰, 마진과 텍스트 모두 있는 텍스트뷰를 배치한 코드입니다.

코드

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <TextView
            android:text="그냥 텍스트 뷰"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F6C0C0"/>

        <TextView
            android:text="그냥 텍스트 뷰"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#C5E1B0"/>

        <TextView
            android:text="마진만 있는 텍스트 뷰"
            android:textColor="#000000"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F6C0C0"/>

        <TextView
            android:text="마진만 있는 텍스트 뷰"
            android:textColor="#000000"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#C5E1B0"/>

        <TextView
            android:text="패딩만 있는 텍스트 뷰"
            android:textColor="#000000"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F6C0C0"/>

        <TextView
            android:text="패딩만 있는 텍스트 뷰"
            android:textColor="#000000"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#C5E1B0"/>

        <TextView
            android:text="마진과 패딩이 모두 있는 텍스트 뷰"
            android:textColor="#000000"
            android:layout_margin="10dp"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F6C0C0"/>

        <TextView
            android:text="마진과 패딩이 모두 있는 텍스트 뷰"
            android:textColor="#000000"
            android:layout_margin="10dp"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#C5E1B0"/>

    </LinearLayout>

결과

---

 

참고

https://stackoverflow.com/questions/4619899/difference-between-a-views-padding-and-margin