Радиус угла обзора CardView

Есть ли способ сделать 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"
    >

Ответ 1

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

Тем не менее, есть способ получить этот эффект.

Поместите a 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 with rounded corners only on top

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

Ответ 2

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>

Ответ 3

Вы можете использовать этот гибкий xml и установить в качестве фона для картографирования:

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

Ответ 4

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

example.png

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

https://github.com/mthli/Slice

Ответ 5

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

<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

Вы можете использовать стандарт 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>

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

enter image description here

Ответ 7

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

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

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

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

https://github.com/pungrue26/SelectableRoundedImageView

Rounded ImageView inside CardView

Ответ 8

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

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

Ответ 9

Если вы используете Xamarin CardView renderer для Frame, чтобы получить Rounded Corners, этот код должен работать для вас...

    public class FrameShadowViewRenderer : Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement == null) return;

            Control.Radius = 10;
        }

        protected override void OnDraw(Canvas canvas)
        {
            ................
            ................
        }
    }

Ответ 10

Самый простой способ добиться этого в 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>

Ответ 11

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

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

Ответ 12

Самый простой способ добиться этого:

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

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 установите этот фоновый ресурс для своего макета.

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