In questo CardView Android tutorial Java scoprirai come usare al meglio il componente CardView in Android, uno strumento fondamentale per creare card in perfetto stile Material Design, con ombre morbide e bordi arrotondati che rendono immediatamente più professionale qualsiasi interfaccia. Imparerai a cosa serve CardView, in quali scenari conviene utilizzarlo e come integrarlo in layout a liste e griglie. Gli esempi presenti nella guida sono sviluppati in Java e testati con Android Studio, così puoi provarli direttamente nei tuoi progetti. Se vuoi imparare a costruire card pulite, leggibili e facili da gestire, continua a leggere e segui i passaggi illustrati di seguito.
Questa guida pratica su CardView Android ti mostra come creare interfacce moderne e pulite integrando le card all’interno di una RecyclerView. Imparerai passo dopo passo a gestire layout complessi in Java, sfruttando ombre (elevation) e corner radius per ottenere contenitori con bordi arrotondati ed effetti di profondità gradevoli alla vista. Il tutorial è pensato per sviluppatori Android di livello principiante e intermedio che vogliono migliorare l’aspetto delle proprie liste. Continua a leggere e segui la guida per iniziare subito.
Card view è un componente dell’interfaccia utente con contenuto di testo e immagine.Si può personalizzare l’aspetto cambiando il colore di sfondo,utilizzando l’attributo:cardBackgroundColor; oppure aumentare l’elevazione con l’attributo cardElevation.Inoltre, il raggio dell’angolo può essere aumentato per rendere gli angoli della scheda più arrotondati:cardCornerRadius.
Si può anche rendere cliccabile la card:
android:clickable=”true”
android:foreground=”?android:attr/selectableItemBackground”.
Ecco un esempio:
<?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:padding=”10dp”
android:background=”#E0F7AA”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<androidx.cardview.widget.CardView app:cardBackgroundColor="#E0F7DA" app:cardElevation="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardCornerRadius="40dp" app:contentPadding="30dp" android:layout_margin="20dp" android:clickable="true" android:foreground="?android:attr/selectableItemBackground"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text=" Card view è un componente dell'interfaccia utente con contenuto di testo e immagine.Si può personalizzare l'aspetto cambiando il colore di sfondo,utilizzando l'attributo:cardBackgroundColor; oppure aumentare l'elevazione con l'attributo cardElevation.Inoltre, il raggio dell'angolo può essere aumentato per rendere gli angoli della scheda più arrotondati. "/> </LinearLayout> </androidx.cardview.widget.CardView>
Prima di avviare l’attività aggiungi la seguente dipendenza al file build.gradle:
dependencies {
implementation “androidx.cardview:cardview:1.0.0”
}
Attributi principali di CardView Android tutorial Java
Per personalizzare l’aspetto di una CardView è fondamentale comprendere gli attributi XML principali. L’attributo cardCornerRadius controlla il raggio degli angoli arrotondati della card: valori più alti creano angoli più arrotondati, mentre 0dp produce angoli perfettamente quadrati. Questo attributo è essenziale per mantenere coerenza con il Material Design.
L’attributo cardElevation definisce l’ombra della card, creando un effetto di profondità che stacca visivamente l’elemento dal background. Valori tipici vanno da 4dp a 20dp: elevazioni basse (4-8dp) sono ideali per contenuti secondari, mentre elevazioni maggiori (16-20dp) enfatizzano elementi primari e interattivi. L’elevazione contribuisce significativamente all’esperienza visiva della tua app.
L’attributo cardBackgroundColor imposta il colore di sfondo della card. A differenza di altri elementi Android, il background di CardView deve essere impostato tramite questo attributo specifico piuttosto che attraverso il tradizionale android:background. Questo garantisce la corretta resa delle ombre e della forma della card con i colori personalizzati.
Personalizzazione del Layout dell’Item
L’attributo app:contentPadding aggiunge spazio interno tra il bordo della card e il contenuto. Questo padding uniforme facilita la lettura e migliora l’usabilità. Se hai bisogno di padding asimmetrico, puoi impostare padding specifici sul layout figlio (LinearLayout, ConstraintLayout, ecc.) posizionato all’interno della CardView. Questo approccio offre maggiore flessibilità per layout complessi.
Per rendere la card cliccabile, aggiungi gli attributi android:clickable="true" e android:foreground="?android:attr/selectableItemBackground". Il primo abilita la possibilità di click, mentre il secondo aggiunge un feedback visivo (ripple effect) quando l’utente tocca la card. Questo feedback tattile è cruciale per l’usabilità, indicando chiaramente che l’elemento è interattivo.
Come personalizzare CardView Android in Java: cornerRadius, elevation e colori
Per personalizzare una CardView in Android puoi intervenire sia via XML sia via Java/Kotlin. In XML, gli attributi più importanti sono app:cardCornerRadius per il raggio degli angoli, app:cardElevation per l’ombra e app:cardBackgroundColor per il colore di sfondo. Questi attributi rispettano le linee guida Material Design e ti permettono di creare card coerenti con il resto dell’interfaccia.
Ecco un esempio XML di CardView personalizzata dentro un layout:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="12dp"
app:cardElevation="8dp"
app:cardBackgroundColor="@color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp" />
</androidx.cardview.widget.CardView>
Gli stessi valori possono essere modificati anche via codice Java, ad esempio all’interno di un ViewHolder o in un Activity. Questo è utile quando vuoi applicare stili diversi in base allo stato dell’elemento (selezionato, evidenziato, errore, ecc.).
CardView cardView = findViewById(R.id.myCardView);
// Cambiare il raggio degli angoli
cardView.setRadius(16f);
// Cambiare l'elevazione (ombra)
cardView.setCardElevation(12f);
// Cambiare il colore di sfondo via codice
cardView.setCardBackgroundColor(getResources().getColor(R.color.white));
Esempio CardView con immagine e testo in Android
Uno degli usi più comuni di CardView in Android è la creazione di card che combinano immagine e testo, ad esempio per visualizzare prodotti, articoli o profili utente. In questo esempio utilizziamo una ImageView per la miniatura e una TextView per il titolo, il tutto racchiuso dentro una CardView personalizzata.
Layout XML di esempio (item_card_image_text.xml):
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="12dp"
app:cardCornerRadius="10dp"
app:cardElevation="6dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="12dp">
<ImageView
android:id="@+id/imageThumb"
android:layout_width="72dp"
android:layout_height="72dp"
android:scaleType="centerCrop"
android:src="@drawable/ic_sample" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginStart="12dp">
<TextView
android:id="@+id/textTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Titolo card"
android:textStyle="bold"
android:textSize="16sp" />
<TextView
android:id="@+id/textSubtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Descrizione breve della card con immagine e testo."
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Questo layout è ottimale per liste scorrevoli: l’immagine a sinistra rende la card immediatamente riconoscibile, mentre i testi a destra forniscono titolo e descrizione, mantenendo la card compatta e leggibile anche su schermi piccoli.
Effetto click su CardView Android: ripple e onClick
Per ottenere un effetto click professionale su CardView in Android, combina il ripple effect con la gestione del listener di click. In XML puoi impostare l’attributo android:foreground="?attr/selectableItemBackground" (oppure la variante ?android:attr/selectableItemBackground per compatibilità) e android:clickable="true". In questo modo la card mostrerà l’animazione ripple quando viene toccata.
Esempio XML con CardView cliccabile:
<androidx.cardview.widget.CardView
android:id="@+id/cardItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="12dp"
app:cardElevation="4dp">
<!-- Contenuto interno della card -->
</androidx.cardview.widget.CardView>
Per gestire l’azione al click in Java, puoi impostare un OnClickListener direttamente sulla card, ad esempio in un Activity o all’interno del onBindViewHolder di un adapter RecyclerView.
CardView cardView = findViewById(R.id.cardItem);
cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Azione da eseguire al click sulla CardView
Toast.makeText(getApplicationContext(), "Card cliccata", Toast.LENGTH_SHORT).show();
}
});
CardView con RecyclerView a griglia (GridLayoutManager 2 colonne)
Un altro scenario molto usato è la visualizzazione di CardView in una griglia, ad esempio per una galleria immagini o un catalogo prodotti. In questo caso utilizzi RecyclerView con un GridLayoutManager a 2 colonne, mantenendo CardView come layout dell’item.
Impostazione del GridLayoutManager in Java:
RecyclerView recyclerView = findViewById(R.id.recyclerView);
int spanCount = 2; // 2 colonne
RecyclerView.LayoutManager layoutManager =
new GridLayoutManager(this, spanCount);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setHasFixedSize(true);
recyclerView.setAdapter(myAdapter);
Il layout XML dell’item può essere lo stesso mostrato prima (CardView con immagine e testo). Assicurati solo di gestire correttamente i margini orizzontali e verticali, in modo che le card non risultino troppo vicine tra loro. In una griglia a 2 colonne, margini di 8-12dp intorno alla CardView offrono solitamente un buon equilibrio tra densità di contenuto e leggibilità.
CardView e Material Design 3: usare MaterialCardView
Con Material Design 3 è consigliato usare MaterialCardView della libreria Material Components invece della classica androidx.cardview.widget.CardView. MaterialCardView offre funzionalità aggiuntive come il bordo con strokeColor e strokeWidth, lo stato selezionabile (checkable) e l’icona di selezione (checkedIcon), integrandosi meglio con il tema Material You.
Esempio XML con MaterialCardView (assicurati di aver aggiunto la dipendenza com.google.android.material:material):
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/materialCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="16dp"
app:cardElevation="4dp"
app:strokeColor="@color/purple_500"
app:strokeWidth="2dp"
app:checkedIcon="@drawable/ic_check"
app:checkable="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MaterialCardView esempio" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Con MaterialCardView puoi gestire la selezione direttamente via codice usando setChecked(true/false), ideale per liste di opzioni selezionabili o card che rappresentano uno stato attivo/disattivo.
Best Practice per CardView Android Java
Una best practice importante è usare CardView all’interno di una RecyclerView per liste di elementi. Questo approccio offre performance ottimali grazie al riciclo delle celle e consente una scorrimento fluido anche con centinaia di card. Seguendo questo CardView Android tutorial Java, assicurati che ogni card abbia un’altezza fissa o prevedibile per evitare comportamenti imprevisti dello scrolling.
Mantieni la coerenza visiva: tutte le card della stessa lista dovrebbero avere gli stessi valori di cardElevation e cardCornerRadius. Inoltre, il layout_margin attorno alle card crea spazio tra gli elementi, migliorando la leggibilità. Un margine di 8-16dp è generalmente sufficiente. Evita di impostare margini interni troppo grandi, poiché potrebbero far sembrare il contenuto disperso e difficile da leggere.
Per approfondire altri componenti Android, consulta la nostra guida su Toolbar Android e quella sui Layout Android in XML. Per la documentazione ufficiale, fai riferimento alla guida ufficiale CardView di Google.
Infine, considera le dimensioni del layout interno della card: android:layout_width="wrap_content" e android:layout_height="wrap_content" adattano la card al contenuto, mentre match_parent la espande per riempire lo spazio disponibile. Per liste, è consigliato usare match_parent in larghezza per occupare tutto lo spazio del parent container, mantenendo l’altezza flessibile in base al contenuto.
FAQ: CardView Android Tutorial Java — Domande Frequenti
Come cambiare il raggio degli angoli di una CardView?
Per cambiare il raggio degli angoli di una CardView usa l’attributo app:cardCornerRadius in XML, ad esempio app:cardCornerRadius="12dp". In Java puoi ottenere lo stesso risultato chiamando cardView.setRadius(12f). Valori più alti producono angoli più arrotondati; imposta 0dp per avere angoli netti e squadrati.
Come aggiungere un’ombra alla CardView?
L’ombra di una CardView in Android è controllata dall’attributo app:cardElevation. In XML, ad esempio, puoi scrivere app:cardElevation="8dp". Via codice Java puoi usare cardView.setCardElevation(8f). Ricorda che valori troppo alti (oltre 20dp) possono risultare innaturali rispetto alle linee guida Material Design.
Qual è la differenza tra CardView e MaterialCardView?androidx.cardview.widget.CardView è il componente base per creare card con ombra e bordi arrotondati. MaterialCardView, fornito dalla libreria Material Components, estende CardView aggiungendo supporto per strokeColor, strokeWidth, stato selezionabile (checkable), checkedIcon e migliore integrazione con i temi Material Design 3. Se stai sviluppando un’app moderna, è consigliabile preferire MaterialCardView.
Come rendere cliccabile una CardView?
Per rendere cliccabile una CardView aggiungi in XML android:clickable="true" e android:foreground="?attr/selectableItemBackground" per avere anche il ripple effect. In Java imposta un OnClickListener sulla CardView, ad esempio: cardView.setOnClickListener(...). In un adapter RecyclerView è buona pratica delegare il click a un’interfaccia di callback verso l’Activity o il Fragment.
Come usare CardView con RecyclerView?
Per usare CardView con RecyclerView crea un layout di item (XML) in cui il root sia una CardView o una MaterialCardView, poi inflata questo layout nel metodo onCreateViewHolder dell’adapter. In onBindViewHolder popola i dati nei widget interni (TextView, ImageView, ecc.) e, se necessario, gestisci i click chiamando holder.cardView.setOnClickListener(...). Volendo puoi usare anche un GridLayoutManager per mostrare le card in una griglia a 2 o più colonne. Per un esempio completo, segui questo cardview android tutorial java con RecyclerView e adattalo ai tuoi progetti.