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"
    >

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.


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>

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


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.


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>

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


1
Ed è così che trasformi la tua app Android in ios :)
AmeyaB

0

puoi usare la libreria: OptionRoundCardview

inserisci qui la descrizione dell'immagine


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.


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.


-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>

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.


-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.

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.