Concept of Margin in Android

In order to style and positioned user interface elements, we use standard attributes in android known as Margin and Padding. In this article, all the confusion about Margin is explained with examples. Margin specifies an extra space outside that View on which we applied Margin. In simple words, Margin means to push outside. Diagrammatically, the margin is shown below:

Syntax:

android:layout_margin=”size in dp”

The above syntax will specify an extra space in all directions i.e. 

• left,
• right,
• top,
• bottom. 

Its code working is shown below:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#1aff1a">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="100dp"
            android:background="#009933"
            android:text="GeeksforGeeks"
            android:textColor="@color/white"
            android:textSize="30sp" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

This Margin is equal in all directions. Let’s have a look at the following output.

Layout_Margin

But this attribute has one disadvantage i.e. When we want to specify space gap in only one direction suppose left or right then it is not possible with android:layout_margin. For that Margin provide other attributes as:

1. android:layout_marginLeft: It specifies extra space on the left side of the view. Its value must be positive.           

Example:

XML

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#1aff1a">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="100dp"
            android:background="#009933"
            android:text="GeeksforGeeks"
            android:textColor="@color/white"
            android:textSize="30sp" />

</LinearLayout>

Output:

2. android:layout_marginRight: It specifies extra space on the right side of the view.

Example:

XML

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#1aff1a">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="190dp"
            android:background="#009933"
            android:text="GeeksforGeeks"
            android:textColor="@color/white"
            android:textSize="30sp" />

</LinearLayout>

Output:

3. android:layout_marginTop: It specifies the extra space on the top side of the view.

Example:

XML

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#1aff1a">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="150dp"
            android:background="#009933"
            android:text="GeeksforGeeks"
            android:textColor="@color/white"
            android:textSize="30sp" />

</LinearLayout>

Output:

4. android:layout_marginBottom: It specifies the extra space on the bottom side of the view.

Example:

XML

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#1aff1a">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="150dp"
            android:background="#009933"
            android:text="GeeksforGeeks"
            android:textColor="@color/white"
            android:textSize="30sp" />

</LinearLayout>

Output: