Curso Curso de Android
¿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:
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'
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.
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.
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
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024