Diferencia entre LinearLayout y RelativeLayout en Android

diseño lineal

LinearLayout es un tipo de grupo de vista que es responsable de mantener vistas en él, ya sea horizontal o verticalmente. Es un tipo de diseño en el que se pueden organizar grupos de forma horizontal o vertical.

Diagrama de ejemplo:

LinearLayout View

Sintaxis:

XML

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="either vertical or horizontal">
 
<!--ImageView, TextView, ButtonView etc.-->
 
</LinearLayout>

Disposición relativa

RelativeLayout es un diseño en el que podemos organizar vistas/widgets según la posición de otras vistas/widgets. Es independiente de la vista horizontal y vertical y podemos organizarlo según la satisfacción de cada uno.

Diagrama de ejemplo: 

RelativeLayout View

Sintaxis:

XML

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
 
<!--ImageView, TextView, ButtonView
    etc with specified position-->
     
</RelativeLayout>

Diferencia entre LinearLayout y RelativeLayout

diseño lineal   

Disposición relativa   

Podemos ajustar las vistas y los widgets de forma lineal, es decir, horizontal y verticalmente. Podemos ajustar las vistas y los widgets según la satisfacción de cada uno.

El atributo layout_weight en el diseño lineal se usa para especificar el tamaño igual o específico para el widget y la vista en particular usando el siguiente atributo.

android:layout_weight = ‘0’ 

Aquí el peso se especifica como 0 para dar el mismo tamaño o espacio a cada vista o widget.

Varios atributos como: layout_toRightOf, layout_toLeftOf, layout_below, layout_alignParentTop, layout_top, layout_alignParentLeft, layout_alignParentRight se utilizan para especificar la posición de cada vista y widget.
Es útil cuando organizamos las vistas de forma lineal. Es útil cuando organizamos las vistas de forma relativa.

Sintaxis:

<Disposición Lineal>  

<!–Vistas, widgets–>

</LinearLayout>

Sintaxis:

<RelativeLayout>

<!–Vistas, Widgets–>

</RelativeLayout>

Ejemplo: en varias aplicaciones, LinearLayout se aplica principalmente en la pantalla de registro, donde el nombre, el correo electrónico, el número de teléfono, el envío, etc. se organizan de forma lineal. Ejemplo: en Google Play Store, cuando abrimos la aplicación, los juegos, libros, películas y las secciones de la aplicación se organizan en modo de diseño relativo. 
LinearLayout se usa menos en comparación con RelativeLayout. RelativeLayout se usa más en aplicaciones.
Podemos usar LinearLayout dentro de RelativeLayout. También podemos usar RelativeLayout como elemento secundario de LinearLayout.

Programa que explica LinearLayout

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="horizontal">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="35dp"
        android:layout_marginTop="20sp"
        android:layout_marginRight="10sp"
        android:layout_weight="0"
        android:background="#004d00"
        android:text=" Geeks"
        android:textColor="#ffffff"
        android:textSize="40sp"
        android:textStyle="bold" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20sp"
        android:layout_marginRight="10sp"
        android:layout_weight="0"
        android:background="#f2f2f2"
        android:text="For"
        android:textColor="#004d00"
        android:textSize="40sp"
        android:textStyle="bold" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20sp"
        android:layout_marginRight="10sp"
        android:layout_weight="0"
        android:background="#004d00"
        android:text="Geeks"
        android:textColor="@color/white"
        android:textSize="40sp"
        android:textStyle="bold" />
     
</LinearLayout>

Producción: 

OUTPUT

Programa que explica RelativeLayout

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">
 
    <ImageView
        android:id="@+id/image_gfg"
        android:layout_width="100dp"
        android:layout_height="110dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/gfg" />
 
    <TextView
        android:id="@+id/gfg_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/image_gfg"
        android:paddingTop="5dp"
        android:text="Geeks For Geeks"
        android:textColor="#004d00"
        android:textSize="32sp"
        android:textStyle="bold" />
 
    <TextView
        android:id="@+id/gfg_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/gfg_text"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/image_gfg"
        android:text="Noida,UttarPradesh"
        android:textColor="#00b300"
        android:textSize="25sp" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/gfg_location"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/image_gfg"
        android:text="Portal for CS Student"
        android:textColor="#009900"
        android:textSize="24sp" />
     
</RelativeLayout>

Producción: 

OUTPUT

Publicación traducida automáticamente

Artículo escrito por jagroopofficial y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *