CardView Corner Radius

92

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"
    >
android  android-appcompat  android-cardview 
— apertar
fonte

Respostas:

117

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:

CardView com cantos arredondados apenas na parte superior

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

— joao2fast4u
fonte
8
Observe que a sombra está incorreta (as sombras do canto inferior ainda são arredondadas), e o seletor de primeiro plano estaria mais notavelmente incorreto.
— ataulm
Acho que a maneira mais fácil de @shreedhar bhat descrever é melhor
— Matei Suica
Diga, alguma ideia de qual é o valor padrão para cardCornerRadius? é 4dp?
— desenvolvedor Android de
Não sei por que todos marcaram isso como a resposta. Esta não é a resposta certa. Tentei fazer isso, mas não está funcionando como deveria.
— 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
Você poderia explicar o que esse bloco de código faz? Eu não consigo encontrar quaisquer recursos explicando sobre a propriedade XML innerRadius, shapeethicknessRatio
— atjua
2
Só app:cardCornerRadius="40dp"vai funcionar também.
— Rumit Patel
25

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:

insira a descrição da imagem aqui

— Gabriele Mariotti
fonte
isso não está funcionando com TabLayout. Minhas abas de canto não são arredondadas. Minha exigência é que apenas os cantos superiores das guias devem ser arredondados, onde a parte inferior deve permanecer quadrados. você pode me ajudar nisso?
— Tara
2
Se você estiver aplicando isso apenas a um único componente, poderá aplicar a sobreposição de aparência da forma diretamente em XML sem a necessidade de um estilo personalizado. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— Affian
8

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.

— koras
fonte
6

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>
— Surender Kumar
fonte
Isso não vai funcionar com o cardView, você precisa ter um layout, ou seja. Linear ou Relativo e defina o plano de fundo para ele. então vai funcionar.
— Surender Kumar
1
mas então o que acontece com o efeito de sombra?
— Ravi Rajput
Para isso, você pode usar a lista de camadas. Verifique este link .
— Surender Kumar
@SurenderKumar aree bhaii bhaii bhaaiii: D: D
— Abhishek
2

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

ImageView arredondado dentro do CardView

— 김준호
fonte
1
E é assim que você transforma seu aplicativo Android em ios :)
— AmeyaB
0

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.

— omzer
fonte
-1

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>
— Mito
fonte
4
Ele só quer isso no topo.
— Heisenberg
2
Porém, esta não é uma resposta a esta pergunta, ela me ajudou muito a encontrar um problema alucinante com namespaces! :)
— Fragmento de
1
Esta não é a resposta para a pergunta específica, mas ajudou muitos usuários.
— Mito
-1

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

— Ankit Deshmukh
fonte
-2

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.

— Joseph magara
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.