Raggio dell'angolo di CardView

95

C'è un modo per fare in modo che CardView abbia solo il raggio dell'angolo in alto?

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    >
android  android-appcompat  android-cardview 
— squeeish
fonte

Risposte:

119

A meno che tu non provi a estendere la CardViewclasse Android , non puoi personalizzare quell'attributo da XML.

Tuttavia, c'è un modo per ottenere quell'effetto.

Posizionane uno CardViewdentro l'altro CardViewe applica uno sfondo trasparente al tuo esterno CardViewe rimuovi il suo raggio d'angolo ( "cornerRadios = 0dp"). Il tuo interno CardViewavrà un valore cornerRadius di 3dp, ad esempio. Quindi applica un marginTop al tuo interno CardView, così i suoi limiti inferiori saranno tagliati dall'esterno CardView. In questo modo, il raggio dell'angolo inferiore del tuo interno CardViewsarà nascosto.

Il codice XML è il seguente:

 <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>

E l'effetto visivo è il seguente:

CardView con angoli arrotondati solo in alto

Metti sempre i tuoi contenuti nel tuo interiore CardView. Il tuo CardView esterno ha solo lo scopo di "nascondere" gli angoli arrotondati inferiori dell'interno CardView.

— joao2fast4u
fonte
8
Notare che l'ombra non è corretta (le ombre nell'angolo inferiore sono ancora arrotondate) e il selettore in primo piano sarebbe più evidentemente errato.
— ataulm
Penso che il modo semplice descritto da @shreedhar bhat sia migliore
— Matei Suica
Di ', qualche idea su quale sia il valore predefinito per cardCornerRadius? è 4dp?
— sviluppatore Android
Non sono sicuro del motivo per cui tutti lo abbiano contrassegnato come risposta. Questa non è la risposta giusta. Ho provato questo, ma non funziona come dovrebbe essere.
— Visal Varghese
42 
dependencies: compile 'com.android.support:cardview-v7:23.1.1'

<android.support.v7.widget.CardView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:elevation="12dp"
    android:id="@+id/view2"
    app:cardCornerRadius="40dp"
    android:layout_centerHorizontal="true"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9">
    <ImageView
        android:layout_height="80dp"
        android:layout_width="match_parent"
        android:id="@+id/imageView1"
        android:src="@drawable/Your_image"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">
    </ImageView>
</android.support.v7.widget.CardView>
— shreedhar bhat
fonte
8
Potresti spiegare cosa fa questo blocco di codice? Non riesco a trovare le risorse che spiegano sulla proprietà XML innerRadius, shapeethicknessRatio
— atjua
2
Solo app:cardCornerRadius="40dp"funzionerà anche.
— Rumit Patel
28

È possibile utilizzare lo standard MaterialCardincluso nella libreria ufficiale dei componenti dei materiali .

Usa nel tuo layout:

<com.google.android.material.card.MaterialCardView
        style="@style/MyCardView"
        ...>

Nel tuo stile usa l' shapeAppearanceOverlayattributo per personalizzare la forma (il raggio dell'angolo predefinito è 4dp)

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
  </style>


  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

Puoi anche usare:

<com.google.android.material.card.MaterialCardView
     app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
     ...>

È il risultato:

inserisci qui la descrizione dell'immagine

— Gabriele Mariotti
fonte
questo non funziona con TabLayout. Le mie linguette d'angolo non sono arrotondate. Il mio requisito è che solo gli angoli superiori delle schede dovrebbero essere arrotondati dove la parte inferiore dovrebbe rimanere quadrata. puoi aiutarmi in questo?
— Tara
2
Se lo stai applicando solo a un singolo componente, puoi applicare la sovrapposizione dell'aspetto della forma direttamente in XML senza bisogno di uno stile personalizzato. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— Affian
8

C'è un esempio su come ottenerlo, quando la carta si trova nella parte inferiore dello schermo. Se qualcuno ha questo tipo di problema, fai qualcosa del genere:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-5dp"
    card_view:cardCornerRadius="4dp">

    <SomeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp">

    </SomeView>

</android.support.v7.widget.CardView>

La visualizzazione scheda ha un margine inferiore negativo. La visualizzazione all'interno di una visualizzazione scheda ha lo stesso, ma positivo margine inferiore. In questo modo le parti arrotondate sono nascoste sotto lo schermo, ma tutto sembra esattamente lo stesso, perché la vista interna ha un margine di contrasto.

— koras
fonte
6

Puoi usare questo xml disegnabile e impostare come sfondo per cardview: 

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffffff"/>

    <stroke android:width="1dp"
        android:color="#ff000000"
        />

    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        />

    <corners 
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>
— Surender Kumar
fonte
Questo non funzionerà con il cardView di cui hai bisogno per prendere un layout ie Linear o Relative e impostare lo sfondo su di esso. allora funzionerà.
— Surender Kumar
1
ma allora per quanto riguarda l'effetto ombra?
— Ravi Rajput
Per questo puoi usare l'elenco dei livelli. Controlla questo collegamento .
— Surender Kumar
@SurenderKumar aree bhaii bhaii bhaaiii: D: D
— Abhishek
2

Devi fare 2 cose:

1) Chiama setPreventCornerOverlap(false)sul tuo CardView.

2) Metti Imageview arrotondato all'interno di CardView

Riguardo all'arrotondamento della visualizzazione dell'immagine, ho avuto lo stesso problema, quindi ho creato una libreria in cui puoi impostare raggi diversi su ogni angolo . Finalmente ho ottenuto il risultato che volevo come di seguito.

https://github.com/pungrue26/SelectableRoundedImageView

ImageView arrotondato all'interno di CardView

— 김준호
fonte
1
Ed è così che trasformi la tua app Android in ios :)
— AmeyaB
0

puoi usare la libreria: OptionRoundCardview

inserisci qui la descrizione dell'immagine

— qinmiao
fonte
Questo non mostra gli angoli arrotondati ... Sto usando API> 23
— Ravi Rajput
aggiungere abbastanza spazio ai margini?
— qinmiao
No, le visualizzazioni dei bambini corrispondono ai genitori
— Ravi Rajput
Il margine c'è
— Ravi Rajput
questa libreria non funziona con l'app di colore di sfondo: optRoundCardBackgroundColor = "@ color / gray" rimuove gli effetti del raggio degli angoli
— Kishan Donga
0

Puoi mettere il tuo ImageView all'interno di un CardView e aggiungere quelle proprietà a ImageView:

android:cropToPadding="true"
android:paddingBottom="15dp"

In questo modo ti sbarazzerai dell'angolo inferiore arrotondato, ma tieni presente che questo ha il prezzo di tagliare una piccola parte dell'immagine.

— omzer
fonte
0

NOTA: questa è una soluzione alternativa se si desidera ottenere angoli arrotondati solo in basso e angoli regolari in alto. Questo non funzionerà se vuoi avere un raggio diverso per tutti e quattro gli angoli del cardview. Dovrai usare materiale cardview per questo o usare una libreria di terze parti.

Ecco cosa sembrava funzionare per me:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#F9F9F9">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/profile_bg"/>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cvProfileHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="32dp">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:orientation="vertical"
            android:background="@drawable/profile_bg"
            android:id="@+id/llProfileHeader"
            android:gravity="center_horizontal">

            <!--Enter your code here-->

        </LinearLayout>
    
    </androidx.cardview.widget.CardView>

</RelativeLayout>

Ci sono due cardview in tutto. La seconda vista scheda è quella che avrà gli angoli arrotondati (su tutti i lati come al solito) e conterrà tutte le altre sottoview. Anche il primo cardview sopra è allo stesso livello (di elevazione), e ha lo stesso sfondo ma è solo circa la metà dell'altezza del secondo cardview e non ha angoli arrotondati (solo i soliti angoli acuti). In questo modo sono stato in grado di ottenere angoli parzialmente arrotondati in basso e angoli normali in alto. Ma per tutti e quattro i lati, potrebbe essere necessario utilizzare il materiale cardview.

Potresti fare il contrario per ottenere angoli arrotondati in alto e quelli regolari in basso, cioè lasciare che il primo cardview abbia angoli arrotondati e il secondo cardview abbia angoli regolari.

— Max
fonte
-1

Il modo più semplice per ottenerlo in Android Studio è spiegato di seguito:

Passaggio 1:
scrivi sotto la riga nelle dipendenze in build.gradle:

compile 'com.android.support:cardview-v7:+'

Passaggio 2:
copia il codice riportato di seguito nel tuo file xml per integrare il file CardView.

Per cardCornerRadiusfunzionare, assicurati di includere la riga sottostante nel layout principale: xmlns:card_view="http://schemas.android.com/apk/res-auto"

E ricorda di usare card_viewcome spazio dei nomi per usare la cardCornerRadiusproprietà.

Per esempio : card_view:cardCornerRadius="4dp"

Codice XML:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>

</android.support.v7.widget.CardView>
— Mito
fonte
4
Lo vuole solo al top.
— Heisenberg
2
Tuttavia, questa non è una risposta a questa domanda, mi ha aiutato molto a trovare un problema strabiliante con gli spazi dei nomi! :)
— Frammento
1
Questa non è la risposta alla domanda specifica, ma ha aiutato molti utenti.
— Mito
-1

Un modo semplice per ottenere questo risultato sarebbe:

1.Crea una risorsa di sfondo personalizzata (come una forma rettangolare) con angoli arrotondati.

2.impostare questo sfondo personalizzato utilizzando il comando -

cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);

questo ha funzionato per me.

Il XMLlayout che ho realizzato con raggio in alto a sinistra e in basso a destra.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" />
</shape>

Nel tuo caso, devi modificare solo topLeftRadius e topRightRadius.

Se si dispone di un layout che si sovrappone agli angoli della visualizzazione scheda e ha forse un colore diverso, potrebbe essere necessario un file di risorse di sfondo diverso per il layout e nell'xml impostare questa risorsa di sfondo sul layout.

Ho provato e testato il metodo sopra. Spero che questo ti aiuti.

— Ankit Deshmukh
fonte
-2

Se stai impostando lo sfondo della carta in modo programmatico, fai uso che usi cardView.setCardBackgroundColor()e non cardView.setBackgroundColor()e assicurati di usare usingapp:cardPreventCornerOverlap="true" su cardView.xml. Questo ha risolto il problema per me.

A proposito, il codice sopra (tra virgolette) è in Kotlin e non in Java. Usa l'equivalente java se stai usando Java.

— Joseph Magara
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.