CardView Corner Radius

Existe uma maneira de fazer o CardView ter apenas o raio de canto na 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"
    >

A menos que você tente estender a CardViewclasse Android , você não pode personalizar esse atributo XML.

No entanto, existe uma maneira de obter esse efeito.

Coloque um CardViewdentro de outro CardViewe aplique um fundo transparente ao seu exterior CardViewe remova o raio do canto ( "cornerRadios = 0dp"). Seu interior CardViewterá um valor cornerRadius de 3dp, por exemplo. Em seguida, aplique um marginTop ao seu interior CardView, de modo que seus limites inferiores sejam cortados pelos externos CardView. Dessa forma, o raio do canto inferior do seu interior CardViewficará oculto.

O código XML é o seguinte:

 <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 o efeito visual é o seguinte:

Sempre coloque seu conteúdo no seu Inner CardView. O CardView externo serve apenas para "ocultar" os cantos arredondados inferiores do interno CardView.

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>

Você pode usar o padrão MaterialCardincluído na biblioteca oficial de componentes de materiais .

Use em seu layout:

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

No seu estilo, use o shapeAppearanceOverlayatributo para personalizar a forma (o raio do canto padrão é 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>

Você também pode usar:

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

É o resultado:

Há um exemplo de como fazer isso, quando o cartão está bem na parte inferior da tela. Se alguém tiver esse tipo de problema, faça algo assim:

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

A visualização do cartão tem uma margem inferior negativa. A visualização dentro de uma Visualização de cartão tem a mesma, mas a margem inferior positiva. Desta forma, partes arredondadas ficam escondidas abaixo da tela, mas tudo parece exatamente igual, pois a vista interna possui uma margem contrária.

Você pode usar este xml drawable e definir como plano de fundo para o 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>

Eu escrevi um drawable lib para customizar a posição do canto arredondado, parecido com este:

Você pode obter esta biblioteca aqui:

https://github.com/mthli/Slice

Você precisa fazer 2 coisas:

1) Ligue setPreventCornerOverlap(false)para o CardView.

2) Coloque o Imageview arredondado dentro do CardView

Sobre o arredondamento de sua visualização de imagem, tive o mesmo problema, então fiz uma biblioteca em que você pode definir diferentes raios em cada canto . Finalmente consegui o resultado que queria abaixo.

https://github.com/pungrue26/SelectableRoundedImageView

você pode usar a biblioteca: OptionRoundCardview

Você pode colocar seu ImageView dentro de um CardView e adicionar essas propriedades ao ImageView:

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

Dessa forma, você se livrará do canto inferior arredondado, mas lembre-se de que isso tem o preço de cortar uma pequena parte da imagem.

A maneira mais fácil de conseguir isso no Android Studio é explicada abaixo:

Etapa 1:
escreva a linha abaixo nas dependências em build.gradle:

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

Etapa 2:
Copie o código abaixo em seu arquivo xml para integrar o CardView.

Para cardCornerRadiusfuncionar, certifique-se de incluir a linha abaixo no layout pai: xmlns:card_view="http://schemas.android.com/apk/res-auto"

E lembre-se de usar card_viewcomo namespace para usar a cardCornerRadiuspropriedade.

Por exemplo : 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>

Uma maneira fácil de conseguir isso seria:

1. Faça um recurso de plano de fundo personalizado (como uma forma de retângulo) com cantos arredondados.

2. definir este fundo personalizado usando o comando -

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

isso funcionou para mim.

O XMLlayout que fiz com raio superior esquerdo e inferior direito.

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

No seu caso, você precisa alterar apenas topLeftRadius e também topRightRadius.

Se você tiver um layout que se sobrepõe aos cantos da visualização do cartão e talvez tenha uma cor diferente, talvez precise de um arquivo de recurso de plano de fundo diferente para o layout e no xml defina esse recurso de plano de fundo para o seu layout.

Eu tentei e testei o método acima. Espero que isso ajude você.

Se você estiver configurando o fundo do cartão de forma programática, use o que você usa cardView.setCardBackgroundColor()e não cardView.setBackgroundColor()use app:cardPreventCornerOverlap="true"no cardView.xml. Isso resolveu para mim.

Btw, o código acima (entre aspas) está em Kotlin e não em Java. Use o equivalente em java se estiver usando Java.