[Android] アプリのレイアウトに必須, paddingとmarginで間隔を調整する

アプリのテキストやボタンの間隔を調整したい事があると思います。間隔調整には、padding：Viewのbackgroundの大きさの中での距離、margin: View間の距離
の２つがあります。

Android Studio
2024.1.1

padding and margin

レイアウトで良く出てくるpaddingとmarginですがどのような意味があるか実際の画像にして確認しみましょう。

尚、ここでは LinearLayout でのテストなので注意です

padding

margine

目次
1. padding
2. margin

padding

Viewのbackgroundの中での距離

実際の使いかたとして、例えば TextView での表示は
android:paddingTop=”40dp”
とすると TextView の背景を含めた大きさの中でのTopから文字までの距離となります。
dpとはスクリーン上での抽象的な長さのことです。

<!-- Bottomから20dp -->
android:paddingBottom="20dp"
 
<!-- Leftから40dp -->
android:paddingStart="40dp"
 
<!-- Rightから20dp -->
android:paddingEnd="20dp"
 
<!-- Topから40dp -->
android:paddingTop="40dp"
 
<!-- 上下左右 20dp -->
android:padding="20dp"

android:paddingBottom="20dp"

android:paddingStart="40dp"

android:paddingEnd="20dp"

android:paddingTop="40dp"

android:padding="20dp"

　
activity_main.xmlに以下のように記述してみると

<?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:id="@+id/main"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 0. padding 設定なし -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#008000"
        android:text="@string/textview"
        android:textSize="30sp"
        android:textColor="#ffffff" />

    <!-- 1. padding を上下左右それぞれに設定 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffa080"
        android:paddingBottom="20dp"
        android:paddingStart="40dp"
        android:paddingEnd="20dp"
        android:paddingTop="40dp"
        android:text="@string/pd1"
        android:textSize="30sp" />

    <!-- 2. padding 一括設定 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#a080ff"
        android:padding="20dp"
        android:text="@string/pd2"
        android:textSize="30sp" />

    <!-- 3. button padding 設定 -->
    <Button
        android:text="@string/button"
        android:paddingBottom="40dp"
        android:paddingStart="40dp"
        android:paddingEnd="50dp"
        android:paddingTop="40dp"
        android:textSize="30sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!-- 4. ImageView padding 設定 -->
    <ImageView
        android:src="@drawable/bag"
        android:paddingBottom="30dp"
        android:paddingStart="50dp"
        android:paddingEnd="50dp"
        android:paddingTop="30dp"
        android:background="#a0f0a0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/bag"/>

</LinearLayout>

<?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:id="@+id/main"

android:orientation="vertical"

android:gravity="center"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#008000"

android:text="@string/textview"

android:textSize="30sp"

android:textColor="#ffffff" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#ffa080"

android:paddingBottom="20dp"

android:paddingStart="40dp"

android:paddingEnd="20dp"

android:paddingTop="40dp"

android:text="@string/pd1"

android:textSize="30sp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#a080ff"

android:padding="20dp"

android:text="@string/pd2"

android:textSize="30sp" />

<Button

android:text="@string/button"

android:paddingBottom="40dp"

android:paddingStart="40dp"

android:paddingEnd="50dp"

android:paddingTop="40dp"

android:textSize="30sp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<ImageView

android:src="@drawable/bag"

android:paddingBottom="30dp"

android:paddingStart="50dp"

android:paddingEnd="50dp"

android:paddingTop="30dp"

android:background="#a0f0a0"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:contentDescription="@string/bag"/>

</LinearLayout>

　
リソースです
strings.xml

<resources>
    <string name="app_name">TestPaddingMargin</string>
    <string name="textview">TextView</string>
    <string name="pd1">padding(1)</string>
    <string name="pd2">padding(2)</string>
    <string name="button">Button</string>
    <string name="bag">Bag</string>
 </resources>

<string name="app_name">TestPaddingMargin</string>

<string name="textview">TextView</string>

<string name="pd1">padding(1)</string>

<string name="pd2">padding(2)</string>

<string name="button">Button</string>

</resources>

　
分かりやすいように背景色を入れました。paddingを大きくするとその分背景が大きくなり、その背景を含めたViewの中での位置が決まります。
　

margin

View間の距離

marginの実際の使い方です。
　
android:layout_marginTop=”40dp”
ではViewの間隔となりTopにあるUIとの間隔を40dp取ることになります
　

    <!-- Bottomから40dp -->
    android:layout_marginBottom="40dp"

    <!-- Leftから20dp -->
    android:layout_marginStart="20dp"

    <!-- Rightから50dp -->
    android:layout_marginEnd="50dp"

    <!-- Topから20dp -->
    android:layout_marginTop="20dp"

    <!-- 上下左右 20dp -->
    android:layout_margin="20dp"

android:layout_marginBottom="40dp"

android:layout_marginStart="20dp"

android:layout_marginEnd="50dp"

android:layout_marginTop="20dp"

android:layout_margin="20dp"

実際に使ってみます
　

<?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"
    android:gravity="center"
    tools:context=".MainActivity">

    <!-- 0. margine 設定なし -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#008000"
        android:text="@string/textview"
        android:textSize="20sp"
        android:textColor="#ffffff" />

    <!-- 1. margine を上下左右それぞれに設定 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffa080"
        android:layout_marginBottom="20dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="40dp"
        android:text="@string/mg1"
        android:textSize="20sp"
        android:textColor="#ffffff" />

    <!-- 2. margine 一括設定 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#a080ff"
        android:layout_margin="20dp"
        android:text="@string/mg2"
        android:textSize="20sp"
        android:textColor="#ffffff" />

    <!-- 3. button margine 設定 -->
    <Button
        android:text="@string/button"
        android:layout_marginBottom="40dp"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="50dp"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!-- 4. ImageView margine 設定 -->
    <ImageView
        android:src="@drawable/bag2"
        android:layout_marginBottom="20dp"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="40dp"
        android:background="#a0f0a0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/bag"/>

</LinearLayout>

<?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"

android:gravity="center"

tools:context=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#008000"

android:text="@string/textview"

android:textSize="20sp"

android:textColor="#ffffff" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#ffa080"

android:layout_marginBottom="20dp"

android:layout_marginStart="40dp"

android:layout_marginEnd="20dp"

android:layout_marginTop="40dp"

android:text="@string/mg1"

android:textSize="20sp"

android:textColor="#ffffff" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#a080ff"

android:layout_margin="20dp"

android:text="@string/mg2"

android:textSize="20sp"

android:textColor="#ffffff" />

<Button

android:text="@string/button"

android:layout_marginBottom="40dp"

android:layout_marginStart="20dp"

android:layout_marginEnd="50dp"

android:layout_marginTop="20dp"

android:textSize="20sp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<ImageView

android:src="@drawable/bag2"

android:layout_marginBottom="20dp"

android:layout_marginStart="40dp"

android:layout_marginEnd="20dp"

android:layout_marginTop="40dp"

android:background="#a0f0a0"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:contentDescription="@string/bag"/>

</LinearLayout>

　
リソース
strings.xml

<resources>
    <string name="app_name">TestPaddingMargin</string>
    <string name="textview">TextView</string>
    <string name="button">Button</string>
    <string name="mg1">margin(1)</string>
    <string name="mg2">margin(2)</string>
    <string name="bag">Bag</string>
 </resources>

<string name="app_name">TestPaddingMargin</string>

<string name="textview">TextView</string>

<string name="button">Button</string>

<string name="mg1">margin(1)</string>

<string name="mg2">margin(2)</string>

</resources>

　
結果はこうなります
　

　
margineはそれぞれのViewどうしの間隔となっています
　
　
関連ページ：

Reference:
レイアウト | Android Developers