Если вы не попытаетесь расширить 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>
А визуальный эффект такой:
Всегда помещайте свой контент в свой Inner CardView
. Ваш внешний CardView служит только для «сокрытия» нижних закругленных углов внутреннего 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>
источник
innerRadius
,shape
иthicknessRatio
app:cardCornerRadius="40dp"
тоже работать будет.Вы можете использовать стандарт,
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" ...>
Это результат:
источник
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
Вот пример, как этого добиться, когда карточка находится в самом низу экрана. Если у кого-то есть такая проблема, просто сделайте что-нибудь вроде этого:
<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>
Карточка имеет отрицательное нижнее поле. Вид внутри Карточки имеет такое же, но положительное нижнее поле. Таким образом закругленные части скрываются под экраном, но все выглядит точно так же, потому что внутренний вид имеет поле счетчика.
источник
Вы можете использовать этот вытягиваемый 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>
источник
Я написал настраиваемую библиотеку для настраиваемой позиции закругленного угла, она выглядит так:
Вы можете получить эту библиотеку здесь:
https://github.com/mthli/Slice
источник
Вам нужно сделать 2 вещи:
1) Вызовите
setPreventCornerOverlap(false)
свой CardView.2) Поместите округленное изображение внутри CardView
Что касается округления вашего изображения, у меня была та же проблема, поэтому я сделал библиотеку, в которой вы можете установить разные радиусы для каждого угла . Наконец я получил результат, который я хотел, как показано ниже.
https://github.com/pungrue26/SelectableRoundedImageView
источник
вы можете использовать библиотеку: OptionRoundCardview
источник
Вы можете поместить свой ImageView в CardView и добавить эти свойства в ImageView:
android:cropToPadding="true" android:paddingBottom="15dp"
Таким образом вы избавитесь от закругленного нижнего угла, но имейте в виду, что это происходит за счет обрезания небольшой части изображения.
источник
ПРИМЕЧАНИЕ. Это обходной путь, если вы хотите добиться закругленных углов только внизу и правильных углов вверху. Это не сработает, если вы хотите иметь разный радиус для всех четырех углов вида карты. Вам придется использовать для этого материал 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>
Всего есть два карточных просмотра. Второй вид карточек будет иметь закругленные углы (как обычно со всех сторон) и будет содержать все остальные подвиды под ним. Первый вид карты над ним также находится на том же уровне (возвышения) и имеет тот же фон, но составляет только половину высоты второго вида карты и не имеет закругленных углов (только обычные острые углы). Таким образом, я смог добиться частично закругленных углов внизу и нормальных углов вверху. Но для всех четырех сторон вам, возможно, придется использовать материальный вид карты.
Вы можете сделать обратное, чтобы получить закругленные углы вверху и обычные внизу, то есть пусть первое представление карты имеет закругленные углы, а второе представление карты имеет правильные углы.
источник
Самый простой способ добиться этого в 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>
источник
Легкий способ добиться этого:
1. Создайте собственный фоновый ресурс (например, прямоугольник) с закругленными углами.
2. установите этот пользовательский фон с помощью команды -
это сработало для меня.
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 установите этот фоновый ресурс для своего макета.
Я попробовал и протестировал вышеуказанный метод. Надеюсь, это тебе поможет.
источник
Если вы устанавливаете фон карты программно, используйте,
cardView.setCardBackgroundColor()
а не используйте,cardView.setBackgroundColor()
и обязательно используйте usingapp:cardPreventCornerOverlap="true"
в cardView.xml. Это исправило это для меня.Кстати, приведенный выше код (в кавычках) находится на Kotlin, а не на Java. Используйте эквивалент Java, если вы используете Java.
источник