Inicio » Cursos » Programación Android desde Cero

Curso Programación Android desde Cero

Capitulo 21 ➜ LinearLayout

LinearLayout

¿Cómo usar un LinearLayout en Android Studio?

LinearLayout es uno de los layouts más utilizados en Android para organizar elementos de la interfaz de usuario de forma lineal, ya sea horizontal o verticalmente. Es un layout flexible y fácil de usar que te permite posicionar elementos uno al lado del otro o uno encima del otro.

LinearLayout es uno de los layouts más utilizados en Android para organizar elementos de la interfaz de usuario de forma lineal, ya sea horizontal o verticalmente. Es un layout flexible y fácil de usar que te permite posicionar elementos uno al lado del otro o uno encima del otro.

Para usar un LinearLayout en Android Studio, sigue estos pasos:

1. Agrega la dependencia de androidx.appcompat:appcompat a tu proyecto:

Asegúrate de tener la dependencia de androidx.appcompat:appcompat en tu archivo build.gradle (Módulo: aplicación). Esta dependencia es necesaria para usar algunas de las propiedades de LinearLayout.

dependencies {
    implementation 'androidx.appcompat:appcompat:1.3.1'
    // ...
}

2. Crea un LinearLayout en tu archivo de diseño XML:

Utiliza la siguiente etiqueta XML para definir un LinearLayout en tu archivo de diseño XML:

XML

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

    </LinearLayout>

 

En este ejemplo, se crea un LinearLayout vertical que ocupa todo el ancho y alto de la pantalla. Puedes cambiar la orientación a horizontal si deseas que los elementos se dispongan de forma horizontal.

3. Agrega elementos a tu LinearLayout:

Puedes agregar cualquier tipo de vista a tu LinearLayout, como TextViews, ImageViews, Buttons, etc. Por ejemplo, puedes agregar el siguiente código XML para agregar un TextView y un ImageView a tu LinearLayout:

XML

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Título de la vista"
    android:textSize="18sp"
    android:layout_margin="16dp" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:src="@drawable/image"
    android:layout_below="@id/textView" />

 

En este ejemplo, se agrega un TextView con el texto "Título de la vista" y un ImageView con la imagen "image.jpg" al LinearLayout.

4. Personaliza la apariencia de tu LinearLayout:

Puedes personalizar la apariencia de tu LinearLayout utilizando los siguientes atributos XML:

  • android:layout_width: Establece el ancho del LinearLayout. Puede ser match_parentwrap_content o un valor de dimensión en píxeles.
  • android:layout_height: Establece la altura del LinearLayout. Puede ser match_parentwrap_content o un valor de dimensión en píxeles.
  • android:orientation: Establece la orientación del LinearLayout. Puede ser vertical o horizontal.
  • android:weightSum: Establece la suma total de pesos para la distribución del espacio entre los elementos del LinearLayout.
  • android:layout_weight: Establece el peso de un elemento individual para la distribución del espacio dentro del LinearLayout.
  • android:padding: Establece el relleno alrededor del contenido del LinearLayout.
  • android:layout_margin: Establece los márgenes alrededor del LinearLayout.

Ejemplo de código completo:

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:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Título de la vista"
        android:textSize="18sp"
        android:layout_margin="16dp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@drawable/image"
        android:layout_below="@id/textView" />

</LinearLayout>

1904 visitas

Sigue con el curso: Capítulo 22 – RelativeLayout

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023