Capitulo 19 ➜ Componente CardView

Un CardView es un widget de Android que se utiliza para mostrar información en tarjetas con un aspecto consistente en toda la plataforma. Por ejemplo, las tarjetas tienen una elevación predeterminada sobre su grupo de vistas contenedoras, por lo que el sistema dibuja sombras debajo de ellas. Puede proporcionar una elevación personalizada para una tarjeta con el atributo card_view:cardElevation. Una tarjeta con una elevación más alta tiene una sombra más pronunciada y una tarjeta con una elevación más baja tiene una sombra más clara. CardView utiliza la elevación real y las sombras dinámicas en Android 5.0 (API nivel 21) y superior.

Un CardView es un widget de Android que se utiliza para mostrar información en tarjetas con un aspecto consistente en toda la plataforma. Por ejemplo, las tarjetas tienen una elevación predeterminada sobre su grupo de vistas contenedoras, por lo que el sistema dibuja sombras debajo de ellas. Puede proporcionar una elevación personalizada para una tarjeta con el atributo card_view:cardElevation. Una tarjeta con una elevación más alta tiene una sombra más pronunciada y una tarjeta con una elevación más baja tiene una sombra más clara. CardView utiliza la elevación real y las sombras dinámicas en Android 5.0 (API nivel 21) y superior.

Para usar un CardView en Android Studio, siga estos pasos:

1. Agregue la dependencia de CardView a su proyecto.

   Puede agregar la dependencia de CardView a su proyecto agregando la siguiente línea a su archivo build.gradle (Módulo: aplicación):

   implementation 'androidx.cardview:cardview:1.0.0'
   

2. Cree un CardView en su diseño.

   Puede crear un CardView en su diseño utilizando la siguiente etiqueta XML:

   XML

   <androidx.cardview.widget.CardView
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:cardCornerRadius="8dp"
       app:cardElevation="5dp">
   
       </androidx.cardview.widget.CardView>
   

    

   En este ejemplo, el CardView tiene un ancho igual al ancho de su padre, un alto que se ajusta al contenido, esquinas redondeadas con un radio de 8 píxeles y una elevación de 5 píxeles. Puede personalizar estas propiedades según sus necesidades.

3. Agregue contenido a su CardView.

   Puede agregar cualquier vista a su CardView, como TextViews, ImageViews, Buttons, etc. Por ejemplo, puede agregar el siguiente código XML para agregar un TextView y una ImageView a su CardView:

   XML

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Título de la tarjeta"
       android:textSize="18sp"
       android:textStyle="bold"
       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 tarjeta" y una ImageView con la imagen "image.jpg" al CardView.

4. Personalice la apariencia de su CardView.

   Puede personalizar la apariencia de su CardView utilizando los siguientes atributos XML:

   • cardCornerRadius: Establece el radio de las esquinas redondeadas del CardView.
   • cardElevation: Establece la elevación del CardView.
   • cardBackgroundColor: Establece el color de fondo del CardView.
   • cardMaxCardElevation: Establece la elevación máxima del CardView.
   • cardUseCompatPadding: Indica si el CardView debe usar el relleno compatible.

Ejemplo de código completo:

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="8dp"
        app:cardElevation="5dp">

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

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