Inicio » Cursos » Curso de Android

Curso Curso de Android

Capitulo 19 ➜ CardView

¿Cómo usar un CardView en Android Studio?

Los CardView son contenedores que podemos usarlos integrándolos en nuestra app para mejorar el diseño XML generalmente de una lista de items

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"

2568 visitas

« Capítulo 18 – GridView

Capítulo 20 – Activity »


{ Curso Curso de Android }


Compartir link con tus amigos

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 Applications

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

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024