패딩과 마진 Padding, Margin

Padding과 Margin의 개념과 활용을 어떻게 하는지 알아봅니다.

 

이 두 개념은 웹 프로그래밍의 프론트엔드 부분에서도 많이 등장하는 개념입니다.

안드로이드 UI에서도 해당 개념은 거의 동일한 의미로 사용됩니다.

 

큰 도화지에 네모가 그려져 있고, 네모 안에 글자가 적혀있다고 가정해 봅시다.

Padding은 네모를 기준으로 네모 안의 글자를 조정하는 역할을 합니다.

Margin은 도화지를 기준으로 네모 자체를 조정하는 역할을 합니다.

반응형

코드와 에물레이션 결과를 통해서 자세히 확인합시다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        
        android:layout_marginLeft="50dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="100dp"
        android:layout_marginBottom="200dp"
        
        android:background="#FFEB3B"
        android:text="Margin"
        android:textColor="@color/black"
        android:textSize="30dp"/>

    <TextView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:background="#03A9F4"

        android:paddingBottom="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="20dp"

        android:text="블록1"
        android:textColor="@color/black"
        android:textSize="30dp" />


    <TextView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:background="#9C27B0"
        android:padding="20dp"
        android:text="Padding"
        android:textColor="@color/black"
        android:textSize="30dp" />


    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"

        android:layout_marginLeft="200dp"
        android:layout_marginRight="200dp"
        android:layout_marginBottom="200dp"

        android:background="#FF5722"
        android:text="블록2"
        android:textColor="@color/black"
        android:textSize="30dp"/>


</LinearLayout>

에물레이션 결과

 

Margin 사각형을 보면, android:layout_marginLeft="50dp", android:layout_marginTop="20dp", android:layout_marginRight="100dp", android:layout_marginBottom="200dp" 속성값을 부여했습니다. 부여된 수치만큼 전체 화면에서 사각형을 밀어낸다고 보시면 됩니다.

 

Padding 사각형도 개념이 비슷합니다. 보란색의 사각형 안에서 Padding 글자를 부여된 수치만큼 밀어냅니다.

 

만약 android:margin="200dp" 또는 android:padding="200dp" 이런식으로 정의한다면, Top, Right, Bottom, Left 모두 200dp의 값을 할당받게 됩니다.