Concepto de Margen en Android

Para diseñar y posicionar los elementos de la interfaz de usuario, usamos atributos estándar en Android conocidos como Margin y Padding . En este artículo, toda la confusión sobre Margen se explica con ejemplos. Margen especifica un espacio adicional fuera de esa Vista en la que aplicamos Margen. En palabras simples, Margen significa empujar hacia afuera. Esquemáticamente, el margen se muestra a continuación:

Sintaxis:

android:layout_margin=”tamaño en dp”

La sintaxis anterior especificará un espacio adicional en todas las direcciones, es decir 

• izquierda,
• Correcto,
• parte superior,
• abajo. 

El funcionamiento de su código se muestra a continuación:

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

Producción:

Este margen es igual en todas las direcciones. Echemos un vistazo a la siguiente salida.

Diseño_Margen

Pero este atributo tiene una desventaja, es decir, cuando queremos especificar la brecha de espacio en una sola dirección, supongamos que es izquierda o derecha, entonces no es posible con android:layout_margin. Para ese margen proporcione otros atributos como:

1. android:layout_marginLeft: especifica espacio adicional en el lado izquierdo de la vista. Su valor debe ser positivo.           

Ejemplo:                      

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

Producción:

2. android:layout_marginRight: Especifica espacio adicional en el lado derecho de la vista.

Ejemplo:

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

Producción:

3. android:layout_marginTop: especifica el espacio adicional en la parte superior de la vista.

Ejemplo:

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

Producción:

4. android:layout_marginBottom: especifica el espacio adicional en la parte inferior de la vista.

Ejemplo:

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

Producción: