➜ Diseño XML del Carrito de Compra en Kotlin

En esta lección, aprenderás a crear el diseño visual de un carrito de compras en una aplicación Android utilizando XML. Este diseño permitirá mostrar los productos seleccionados por el usuario en una lista, con opciones para eliminar todos los artículos del carrito o proceder con la compra. Para ello, vamos a utilizar un ListView, una estructura sencilla y efectiva para mostrar datos en forma de lista.

Paso 1: Creación del archivo de diseño XML

Comenzaremos creando el archivo XML que representará la interfaz gráfica de nuestro carrito de compras. Este archivo estará compuesto por un ListView para mostrar los artículos del carrito y dos botones que permitirán eliminar todos los productos o proceder con la compra.

• Abrir el archivo de diseño

En el directorio res/layout, crea un nuevo archivo XML llamado activity_cart.xml.

• Estructura básica del diseño

Usaremos un ConstraintLayout como contenedor principal. Este tipo de layout nos proporciona mayor flexibilidad para organizar los elementos de la interfaz de manera responsiva.

xml

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

    <!-- ListView para mostrar los productos en el carrito -->
    <ListView
        android:id="@+id/lv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/buttonContainer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:padding="16dp"
        tools:listitem="@layout/item_cart_product" />

    <!-- Contenedor de botones -->
    <LinearLayout
        android:id="@+id/buttonContainer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:orientation="horizontal"
        android:padding="16dp">

        <!-- Botón para eliminar todos los productos del carrito -->
        <Button
            android:id="@+id/btnDeleteCart"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Eliminar"
            android:backgroundTint="@color/teal_700"
            android:textColor="@color/white"
            android:layout_marginEnd="8dp" />

        <!-- Botón para proceder con la compra -->
        <Button
            android:id="@+id/btnSend"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Proceder"
            android:backgroundTint="@color/teal_700"
            android:textColor="@color/white"
            android:layout_marginStart="8dp" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Explicación del Diseño

1. ConstraintLayout como contenedor principal.- ConstraintLayout nos permite posicionar los elementos con mucha flexibilidad, asegurándonos de que la interfaz se adapte a diferentes tamaños de pantalla.
2. ListView para mostrar los productos.- El ListView se utiliza para mostrar una lista de productos que el usuario ha añadido al carrito. Más adelante, aprenderás cómo conectar este ListView con un adaptador que proporcionará los datos (productos) que se deben mostrar.
   1. El atributo tools:listitem="@layout/item_cart_product" se usa para previsualizar cómo se verán los ítems de la lista en el editor de diseño de Android Studio. Este archivo item_cart_product.xml será creado posteriormente para definir el diseño de cada producto en la lista.
3. Contenedor de Botones
   1. Utilizamos un LinearLayout horizontal para organizar dos botones:
   2. Botón "Eliminar": Este botón permitirá al usuario eliminar todos los productos del carrito.
   3. Botón "Proceder": Este botón permitirá al usuario proceder con la compra o finalizar el pedido.
   4. Los botones están distribuidos equitativamente usando android:layout_weight="1", lo que asegura que ambos ocupen el mismo espacio horizontal.

Paso 2: Crear el archivo de vista de los ítems del carrito

Para cada producto que se muestre en el ListView, necesitamos definir su diseño. Esto se hace creando un archivo XML separado, cart_item.xml, que contendrá la estructura de cómo se verá cada ítem del carrito.

1. Crear el archivo cart_item.xml en el directorio res/layout.
2. Definir el diseño básico de un ítem del carrito:

xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="16dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="8dp"
    app:cardElevation="8dp"
    app:cardUseCompatPadding="true"
    app:cardBackgroundColor="@color/white">
    <LinearLayout
        android:layout_width="match_parent"
        android:gravity="center_vertical"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/imImagen"
            android:layout_width="90dp"
            android:padding="5dp"
            android:layout_height="90dp" />
        <LinearLayout
            android:id="@+id/layoutInner"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_weight="1"
            android:orientation="vertical">
            <TextView
                android:id="@+id/tvNombre"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Product Name"
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="bottom"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:hint="Precio: $ "
                    android:textColor="@color/black"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/tvPrecio"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="=10"
                    android:textColor="@color/black"
                    android:textSize="14sp" />

            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_gravity="center">
            <LinearLayout
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center">
                <Button
                    android:id="@+id/btnDecremento"
                    android:layout_width="50dp"
                    android:layout_height="30dp"
                    android:text="-"
                    android:background="@color/teal_700"
                    android:textColor="@color/white"
                    android:textSize="25sp"
                    android:textStyle="bold"/>
                <TextView
                    android:id="@+id/tvCantidad"
                    android:layout_width="50dp"
                    android:layout_height="30dp"
                    android:gravity="center"
                    android:text="0"
                    android:textSize="18sp"
                    />
                <Button
                    android:id="@+id/btnIncremento"
                    android:layout_width="50dp"
                    android:layout_height="30dp"
                    android:text="+"
                    android:textSize="18sp"
                    android:background="@color/teal_700"
                    android:textColor="@color/white"
                    />
            </LinearLayout>

        </LinearLayout>
        <TextView
            android:layout_weight="1"
            android:id="@+id/tvImporte"
            android:textSize="16sp"
            android:text="00.00"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</androidx.cardview.widget.CardView>

En este diseño básico, mostramos tres elementos por producto:

Una imagen del producto (ImageView).
El nombre del producto (TextView).
El precio del producto (TextView).

Paso 3: Conectar el ListView con el Adaptador

En la siguiente lección, veremos cómo conectar este diseño con el código Kotlin. Usaremos un adaptador para rellenar el ListView con productos reales, y te enseñaremos cómo manejar la lógica para eliminar productos del carrito o proceder con la compra.