CardView es un nuevo widget en Android que se puede usar para mostrar cualquier tipo de datos proporcionando un diseño de esquinas redondeadas junto con una elevación específica. CardView es la vista que puede mostrar vistas una encima de la otra. El uso principal de CardView es que ayuda a dar una sensación y apariencia ricas al diseño de la interfaz de usuario. Este widget se puede ver fácilmente en muchas aplicaciones de Android diferentes. CardView se puede usar para crear elementos en la vista de lista o dentro de Recycler View. La mejor parte de CardView es que amplía Framelayout y se puede mostrar en todas las plataformas de Android. Ahora veremos el ejemplo simple de implementación de CardView.
Implementación: CardView
Paso 1: crea un nuevo proyecto de Android Studio.
Para crear un nuevo proyecto de Android Studio. Haga clic en Archivo>Nuevo>Nuevo proyecto. Asegúrese de mantener su idioma como JAVA y seleccione Actividad vacía.
Paso 2: agregue la dependencia del material en el archivo build.gradle.
Navegue a Gradle Scripts, luego a build.gradle (aplicación) y luego agregue la dependencia a continuación.
implementation 'com.google.android.material:material:1.2.1'
Después de agregar esta dependencia, verá una opción emergente en la esquina superior derecha que muestra sincronizar ahora. Haga clic en esa opción para sincronizar su proyecto.
Paso 3: agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación si no está allí de manera predeterminada
script de compilación {
repositorios {
Google()
mavenCentral()
}
Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle
todos los proyectos {
repositorios {
Google()
mavenCentral()
}
}
Paso 4: Ahora crearemos un CardView simple.
Vaya a app>res>layout>activity_main.xml y luego cree un nuevo widget CardView para él.
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context=".MainActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" app:cardElevation="10dp" app:cardCornerRadius="20dp" android:layout_margin="10dp" app:cardBackgroundColor="@color/white" app:cardMaxElevation="12dp" app:cardPreventCornerOverlap="true" app:cardUseCompatPadding="true" > <!-- In the above cardview widget cardelevation property will give elevation to your card view card corner radius will provide radius to your card view card background color will give background color to your card view card max elevation will give the cardview maximum elevation card prevent corner overlap will add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners. card use compact padding will add padding in API v21+ as well to have the same measurements with previous versions. below are the two widgets imageview and text view we are displaying inside our card view. --> <ImageView android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center" android:src="@drawable/gfgimage" android:layout_margin="10dp" android:id="@+id/img" android:contentDescription="@string/app_name" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_name" android:layout_gravity="bottom|center_horizontal" android:layout_marginTop="20dp" android:layout_marginBottom="20dp" android:textSize="20sp" android:textStyle="bold" /> </androidx.cardview.widget.CardView> </RelativeLayout>
Paso 5: Ahora ejecute su aplicación en su emulador o dispositivo y podrá ver el resultado.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA