Radio de esquina de CardView

95

¿Hay alguna manera de hacer que CardView solo tenga un radio de esquina en la parte superior?

<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 
— exprimir
fuente

Respuestas:

119

A menos que intente extender la CardViewclase de Android , no puede personalizar ese atributo de XML.

No obstante, existe una forma de lograr ese efecto.

Coloque un CardViewdentro de otro CardViewy aplique un fondo transparente a su exterior CardViewy elimine su radio de esquina ( "cornerRadios = 0dp"). Su interior CardViewtendrá un valor cornerRadius de 3dp, por ejemplo. Luego aplique un marginTop a su interior CardView, por lo que sus límites inferiores serán cortados por el exterior CardView. De esta manera, se ocultará el radio de la esquina inferior de su interior CardView.

El código XML es el siguiente:

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

Y el efecto visual es el siguiente:

CardView con esquinas redondeadas solo en la parte superior

Pon siempre tu contenido en tu interior CardView. Su CardView exterior tiene el único propósito de "ocultar" las esquinas redondeadas inferiores del interior CardView.

— joao2fast4u
fuente
8
Tenga en cuenta que la sombra es incorrecta (las sombras de la esquina inferior todavía están redondeadas) y el selector de primer plano sería más notablemente incorrecto.
— ataulm
Creo que la forma fácil que describió @shreedhar bhat es mejor
— Matei Suica
Digamos, ¿alguna idea de cuál es el valor predeterminado para cardCornerRadius? es 4dp?
— desarrollador de Android
No estoy seguro de por qué todos marcaron esto como la respuesta. Ésta no es la respuesta correcta. Intenté esto, pero no funciona como debería.
— 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
fuente
8
¿Podría explicar qué hace este bloque de código? Me parece que no puede encontrar recursos que explican acerca de la propiedad XML innerRadius, shapeythicknessRatio
— atjua
2
Solo app:cardCornerRadius="40dp"funcionará también.
— Rumit Patel
28

Puedes usar el estándar MaterialCard incluido en la biblioteca oficial de Componentes de materiales .

Use en su diseño:

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

En su estilo, use el shapeAppearanceOverlayatributo para personalizar la forma (el radio de esquina predeterminado es4dp )

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

También puedes usar:

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

Es el resultado:

ingrese la descripción de la imagen aquí

— Gabriele Mariotti
fuente
esto no funciona con TabLayout. Mis pestañas de las esquinas no están redondeadas. Mi requisito es que solo las esquinas superiores de las pestañas deben redondearse donde la parte inferior debe permanecer cuadrada. ¿puedes ayudarme en esto?
— Tara
2
Si solo está aplicando esto a un solo componente, puede aplicar la superposición de apariencia de forma directamente en XML sin necesidad de un estilo personalizado. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— Affian
8

Hay un ejemplo de cómo lograrlo, cuando la tarjeta está en la parte inferior de la pantalla. Si alguien tiene este tipo de problema, simplemente haga algo como eso:

<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 vista de tarjeta tiene un margen inferior negativo. La vista dentro de una vista de tarjeta tiene el mismo margen inferior, pero positivo. De esta manera, las partes redondeadas quedan ocultas debajo de la pantalla, pero todo se ve exactamente igual, porque la vista interior tiene un margen de contador.

— koras
fuente
6

Puede usar este xml dibujable y establecerlo como fondo para 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
fuente
Esto no funcionará con cardView, necesita tomar un diseño, es decir. Lineal o Relativo y establezca el fondo. entonces funcionará.
— Surender Kumar
1
pero entonces ¿qué pasa con el efecto de sombra?
— Ravi Rajput
Para eso puedes usar la lista de capas. Consulta este enlace .
— Surender Kumar
@SurenderKumar aree bhaii bhaii bhaaiii: D: D
— Abhishek
2

Necesitas hacer 2 cosas:

1) Llame setPreventCornerOverlap(false)a su CardView.

2) Coloque Imageview redondeado dentro de CardView

Acerca de redondear su vista de imagen, tuve el mismo problema, así que hice una biblioteca en la que puede establecer diferentes radios en cada esquina . Finalmente obtuve el resultado que quería a continuación.

https://github.com/pungrue26/SelectableRoundedImageView

ImageView redondeado dentro de CardView

— 김준호
fuente
1
Y así es como conviertes tu aplicación de Android en
— iOS
0

Puede poner su ImageView dentro de un CardView y agregar esas propiedades al ImageView:

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

De esa manera, eliminará la esquina inferior redondeada, pero tenga en cuenta que esto tiene el precio de cortar una pequeña parte de su imagen.

— omzer
fuente
0

NOTA: Esta es una solución alternativa si desea lograr esquinas redondeadas solo en la parte inferior y esquinas regulares en la parte superior. Esto no funcionará si desea tener un radio diferente para las cuatro esquinas de la vista de tarjeta. Tendrá que utilizar material cardview para ello o utilizar alguna biblioteca de terceros.

Esto es lo que pareció funcionar para mí:

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

Hay dos cardview en total. La segunda vista de tarjeta es la que tendrá esquinas redondeadas (en todos los lados como de costumbre) y contendrá todas las demás subvistas debajo. La primera vista de la tarjeta de arriba también está al mismo nivel (de elevación) y tiene el mismo fondo, pero solo tiene aproximadamente la mitad de la altura de la segunda vista de la tarjeta y no tiene esquinas redondeadas (solo las esquinas afiladas habituales). De esta manera pude lograr esquinas parcialmente redondeadas en la parte inferior y esquinas normales en la parte superior. Pero para los cuatro lados, es posible que deba utilizar la vista de tarjeta de material.

Puede hacer lo contrario para obtener esquinas redondeadas en la parte superior y regulares en la parte inferior, es decir, dejar que la primera vista de tarjeta tenga esquinas redondeadas y la segunda vista de tarjeta tenga esquinas regulares.

— Max
fuente
-1

La forma más fácil de lograrlo en Android Studio se explica a continuación:

Paso 1:
escriba la siguiente línea en las dependencias en build.gradle:

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

Paso 2:
Copie el siguiente código en su archivo xml para integrar el CardView.

Para cardCornerRadiusque funcione, asegúrese de incluir la siguiente línea en el diseño principal: xmlns:card_view="http://schemas.android.com/apk/res-auto"

Y recuerde usar card_viewcomo espacio de nombres para usar la cardCornerRadiuspropiedad.

Por ejemplo : card_view:cardCornerRadius="4dp"

Código 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
fuente
4
Solo lo quiere en la cima.
— Heisenberg
2
Sin embargo, esta no es una respuesta a esta pregunta, ¡me ayudó mucho a encontrar un problema alucinante con los espacios de nombres! :)
— Fragmento
1
Esta no es la respuesta a la pregunta específica, pero ha ayudado a muchos usuarios.
— Mito
-1

Una forma sencilla de conseguirlo sería:

1.Haga un recurso de fondo personalizado (como una forma de rectángulo) con esquinas redondeadas.

2.configure este fondo personalizado usando el comando -

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

esto funcionó para mí.

El XMLdiseño que hice con el radio superior izquierdo e inferior derecho.

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

En su caso, debe cambiar solo topLeftRadius y topRightRadius.

Si tiene un diseño que se superpone con las esquinas de la vista de la tarjeta y tal vez tenga un color diferente, entonces es posible que necesite un archivo de recursos de fondo diferente para el diseño y en el xml configure este recurso de fondo para su diseño.

Probé y probé el método anterior. Espero que esto te ayude.

— Ankit Deshmukh
fuente
-2

Si está configurando el fondo de la tarjeta mediante programación, haga uso que use cardView.setCardBackgroundColor()y no cardView.setBackgroundColor()y asegúrese de usar usandoapp:cardPreventCornerOverlap="true" en cardView.xml. Eso me lo arregló.

Por cierto, el código anterior (entre comillas) está en Kotlin y no en Java. Utilice el equivalente de Java si está utilizando Java.

— José Magara
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.