CardView Угловой радиус

95

Есть ли способ сделать так, чтобы у CardView был только радиус угла вверху?

<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"
    >
сжимать
источник

Ответы:

119

Если вы не попытаетесь расширить CardViewкласс Android , вы не сможете настроить этот атрибут из XML.

Тем не менее, есть способ добиться такого эффекта.

Поместите CardViewвнутри другого CardViewи примените прозрачный фон к внешнему CardViewи удалите его угловой радиус ( "cornerRadios = 0dp"). CardViewНапример, ваша внутренняя часть будет иметь значение cornerRadius, равное 3dp. Затем примените marginTop к своему внутреннему CardView, чтобы его нижние границы были обрезаны внешним CardView. Таким образом, радиус нижнего угла внутренней части CardViewбудет скрыт.

Код 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>

А визуальный эффект такой:

CardView со скругленными углами только сверху

Всегда помещайте свой контент в свой Inner CardView. Ваш внешний CardView служит только для «сокрытия» нижних закругленных углов внутреннего CardView.

joao2fast4u
источник
8
Обратите внимание, что тень неправильная (тени в нижнем углу все еще закруглены), а селектор переднего плана был бы более заметно неправильным.
ataulm
Я думаю, что простой способ, описанный @shreedhar bhat, лучше
Matei Suica
Скажите, есть идеи, какое значение по умолчанию для cardCornerRadius? это 4дп?
разработчик Android
Не знаю, почему все отметили это как ответ. Это неправильный ответ. Я пробовал это, но это не работает так, как должно быть.
Визал Варгезе,
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
Не могли бы вы объяснить, что делает этот блок кода? Я не могу найти какие - либо ресурсы , объясняющие о недвижимости , XML innerRadius, shapeиthicknessRatio
atjua
2
Только app:cardCornerRadius="40dp" тоже работать будет.
Румит Патель
28

Вы можете использовать стандарт, MaterialCardвключенный в официальную библиотеку компонентов материалов .

Используйте в своем макете:

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

В вашем стиле используйте shapeAppearanceOverlayатрибут для настройки формы (радиус угла по умолчанию равен 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>

Вы также можете использовать:

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

Это результат:

введите описание изображения здесь

Габриэле Мариотти
источник
это не работает с TabLayout. Мои угловые выступы не закруглены. Мое требование - закруглять только верхние углы вкладок, а нижние должны оставаться квадратными. вы можете мне в этом помочь?
Тара
2
Если вы применяете это только к одному компоненту, вы можете применить наложение внешнего вида формы непосредственно в XML без необходимости настраивать стиль. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
Аффиан
8

Вот пример, как этого добиться, когда карточка находится в самом низу экрана. Если у кого-то есть такая проблема, просто сделайте что-нибудь вроде этого:

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

Карточка имеет отрицательное нижнее поле. Вид внутри Карточки имеет такое же, но положительное нижнее поле. Таким образом закругленные части скрываются под экраном, но все выглядит точно так же, потому что внутренний вид имеет поле счетчика.

Корас
источник
6

Вы можете использовать этот вытягиваемый xml и установить в качестве фона для 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>
Сурендер Кумар
источник
Это не будет работать с cardView, вам нужно взять Layout, т.е. Линейный или Относительный и установите для него фон. тогда это будет работать.
Surender Kumar
1
а как же тогда эффект тени?
Рави Раджпут
Для этого вы можете использовать список слоев. Проверьте эту ссылку .
Surender Kumar
@SurenderKumar aree bhaii bhaii bhaaiii: D: D
Abhishek
6

Я написал настраиваемую библиотеку для настраиваемой позиции закругленного угла, она выглядит так:

example.png

Вы можете получить эту библиотеку здесь:

https://github.com/mthli/Slice

mthli
источник
2

Вам нужно сделать 2 вещи:

1) Вызовите setPreventCornerOverlap(false)свой CardView.

2) Поместите округленное изображение внутри CardView

Что касается округления вашего изображения, у меня была та же проблема, поэтому я сделал библиотеку, в которой вы можете установить разные радиусы для каждого угла . Наконец я получил результат, который я хотел, как показано ниже.

https://github.com/pungrue26/SelectableRoundedImageView

Скругленный ImageView внутри CardView

김준호
источник
1
И вот так вы превращаете свое приложение для Android в ios :)
AmeyaB
0

вы можете использовать библиотеку: OptionRoundCardview

введите описание изображения здесь

qinmiao
источник
Здесь не отображаются закругленные углы ... Я использую API> 23
Рави Раджпут
добавить достаточно места для полей?
qinmiao
Нет, взгляды ребенка совпадают с родительскими
Рави Раджпут
Маржа есть
Рави Раджпут
эта библиотека не работает с приложением background-color: optRoundCardBackgroundColor = "@ color / gray" она удаляет эффекты радиуса угла
Кишан Донга,
0

Вы можете поместить свой ImageView в CardView и добавить эти свойства в ImageView:

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

Таким образом вы избавитесь от закругленного нижнего угла, но имейте в виду, что это происходит за счет обрезания небольшой части изображения.

омзер
источник
0

ПРИМЕЧАНИЕ. Это обходной путь, если вы хотите добиться закругленных углов только внизу и правильных углов вверху. Это не сработает, если вы хотите иметь разный радиус для всех четырех углов вида карты. Вам придется использовать для этого материал cardview или использовать стороннюю библиотеку.

Вот что мне показалось работающим:

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

Всего есть два карточных просмотра. Второй вид карточек будет иметь закругленные углы (как обычно со всех сторон) и будет содержать все остальные подвиды под ним. Первый вид карты над ним также находится на том же уровне (возвышения) и имеет тот же фон, но составляет только половину высоты второго вида карты и не имеет закругленных углов (только обычные острые углы). Таким образом, я смог добиться частично закругленных углов внизу и нормальных углов вверху. Но для всех четырех сторон вам, возможно, придется использовать материальный вид карты.

Вы можете сделать обратное, чтобы получить закругленные углы вверху и обычные внизу, то есть пусть первое представление карты имеет закругленные углы, а второе представление карты имеет правильные углы.

Максимум
источник
-1

Самый простой способ добиться этого в Android Studio объясняется ниже:

Шаг 1:
Напишите строку ниже в зависимостях в build.gradle:

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

Шаг 2:
Скопируйте приведенный ниже код в свой XML-файл для интеграции CardView.

Для cardCornerRadiusработы обязательно включите строку ниже в родительский макет: xmlns:card_view="http://schemas.android.com/apk/res-auto"

И не забудьте использовать card_viewкак пространство имен для использования cardCornerRadiusсвойства.

Например : card_view:cardCornerRadius="4dp"

Код 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
Он хочет только наверху.
Гейзенберг,
2
Хотя это не ответ на этот вопрос, мне очень помогло обнаружение умопомрачительной проблемы с пространствами имен! :)
Фрагмент
1
Это не ответ на конкретный вопрос, но он помог многим пользователям.
Миф
-1

Легкий способ добиться этого:

1. Создайте собственный фоновый ресурс (например, прямоугольник) с закругленными углами.

2. установите этот пользовательский фон с помощью команды -

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

это сработало для меня.

XMLМакета я сделал с верхний левый и нижний правый радиус.

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

В вашем случае вам нужно изменить только topLeftRadius, а также topRightRadius.

Если у вас есть макет, который перекрывается с углами представления карты и, возможно, имеет другой цвет, тогда вам может потребоваться другой файл фоновых ресурсов для макета, и в xml установите этот фоновый ресурс для своего макета.

Я попробовал и протестировал вышеуказанный метод. Надеюсь, это тебе поможет.

Анкит Дешмук
источник
-2

Если вы устанавливаете фон карты программно, используйте, cardView.setCardBackgroundColor()а не используйте, cardView.setBackgroundColor()и обязательно используйте using app:cardPreventCornerOverlap="true"в cardView.xml. Это исправило это для меня.

Кстати, приведенный выше код (в кавычках) находится на Kotlin, а не на Java. Используйте эквивалент Java, если вы используете Java.

Джозеф Магара
источник