Here my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/catalog_item_card_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageViewPhoto"
android:layout_width="wrap_content"
android:layout_height="160dp"
android:src="#drawable/test_merchant_preview"
card_view:layout_constraintLeft_toLeftOf="parent"
card_view:layout_constraintRight_toRightOf="parent"
card_view:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Here result on Andrdoid 5.0+
As you can see the ImageView success show with radius. OK.
Now I run app on Android 4.3.
And here result:
As you can see the ImageView show without radius.
Why?
ImageView in CardView not show radius on Android 4.3
CardView elevation only work on android 5.0 and above
CardView uses elevation property on Lollipop for shadows and falls back to a custom emulated shadow implementation on older platforms.
Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection
more information read here
Related
When a child of a MaterialCardView fully overlays it, the shadow under it disappears. I have tried setting elevation to the view itself but to no effect.
Example layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- Elevation of this card is large for demonstration purposes -->
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_margin="16dp"
app:cardElevation="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:layout_width="120dp"
android:layout_height="match_parent"
android:background="#color/purple_500"
android:elevation="24dp"
app:elevation="24dp" />
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshot of the problem:
Here shadow is clearly visible under white background of the card, but not under purple view.
The app was tested on API 30 emulator, but I have observed similar behaviour on API 29 physical device.
Ok it turns out that it was just an optical illusion: if you overlay the purple control in Paint the shadow is consistent:
Now its up to me how to prevent the following illusion from impacting the visual experience of my app.
This question already has answers here:
White Space with CardView on pre-lollipop devices
(2 answers)
Closed 3 years ago.
When i run my code on api 28 i do not see this white border along the inner edges of the cardview. but on api 19 i get the following rendered:
My desire is for the color to entirely fill the cardview, and it should clip the corners so i keep the desired rounded effect. here is the simple demo code showing its not working:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="170dp"
android:theme="#style/Theme.MaterialComponents.Light"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:rippleColor="#android:color/transparent"
app:strokeWidth="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_dark" />
</com.google.android.material.card.MaterialCardView>
note: take a look at what it looks like when rendered on api 28, its exactly what i desire:
UPDATE: I ADJUSTED
using app:cardPreventCornerOverlap="false" , but makes it not rounded. when i put a border around it its not contained in the border now.
can someone suggest :
Just set app:cardPreventCornerOverlap="false" in your xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="170dp"
android:theme="#style/Theme.MaterialComponents.Light"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:rippleColor="#android:color/transparent"
app:strokeWidth="0dp"
app:cardPreventCornerOverlap="false" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_dark" />
</com.google.android.material.card.MaterialCardView>
i ended up creating a white border that i use ..so i set the strokeColor to white if its below api 19. that seems to be the best i can do . and i do set app:cardPreventCornerOverlap="true" ...its not perfect but achieving elevation on lolipop is a dream come true with this materialCardView.
I have an issue where the sizes of list items vary depending on if the phone is 21+ or not.
How can it make it so devices that are pre-21 have the same spacing between items?
List:
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:clipToPadding="false"
android:divider="#color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/list_selector_transparent"
android:paddingBottom="1dp"
android:paddingTop="3dp"
android:scrollbarAlwaysDrawVerticalTrack="false"
android:smoothScrollbar="true"
android:visibility="visible" />
Item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="false">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="3.5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="1.5dp"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="1.7dp">
</android.support.v7.widget.CardView>
</LinearLayout>
If you know a solution I would be very grateful. Thanks
Here is a picture of what I mean:
Picture of the issue
This is happening due to how shadows are drawn on different API levels. In 21+, the shadow is drawn outside the view itself, whereas on older levels it has to be drawn inside the view's bounds. The support library adds padding to the CardView on these older API levels in order to have room to draw the shadow.
You can add this attribute to your <android.support.v7.widget.CardView> tag to make them behave the same, regardless of API level:
app:cardUseCompatPadding="true"
From the documentation:
Before Lollipop, CardView adds padding to its content and draws shadows to that area.
and
Alternatively, If you want CardView to add inner padding on platforms Lollipop and after as well, you can call setUseCompatPadding(boolean) and pass true.
I'm using to recyclerview to display a list a images from a web service. I'm trying to display images in ImageView within CardView widget.Everything is working fine. All the images and lists are displaying properly. but when i try to run on Kitkat 4.4.4 its showing extra(Large) padding at top and bottom of image within the Cardview. I'm using ImageView only no text nothing.
Check the attached image.
on 4.4.4
on Lollipop
I've tried almost everything that i've found on SO so far.
any help is appreciated.
Thanks
XML code for Cardview
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_horizontal_margin_half">
<android.support.v7.widget.CardView
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/offwhite"
android:id="#+id/cardlayout_malls"
android:layout_marginLeft="#dimen/activity_horizontal_margin_half"
card_view:cardUseCompatPadding="true"
android:layout_marginRight="#dimen/activity_horizontal_margin_half">-->
<!-- Thumbnail Image -->
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bannerImageView"/>
</android.support.v7.widget.CardView>
</RelativeLayout>
try this way
card_view:cardPreventCornerOverlap="false"
OR
in imageview you can use add this in your imageview
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:id="#+id/bannerImageView"/>
addcard_view:cardPreventCornerOverlap="false"
Extra padding is because of those tiny round corners which, need to be disabled. Basically that is not a flaw rather a Design constraint!
my android version is 4.2 and i'm trying to remove white border and space from that but my solution as card_view:cardPreventCornerOverlap="false" from xmlns:app="http://schemas.android.com/apk/res-auto" namespace doesnt work correctly
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:elevation="0dp"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/market_item_background">
<ImageView
android:id="#+id/market_thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"/>
</RelativeLayout>
this is part of my application which i used CardView
Try setting
setCardElevation(0);
setMaxCardElevation(0);
and
card_view:cardPreventCornerOverlap="false"
Source: Cardview - white border around card
After much research only thing work for me with pre lollipop devices
with using both
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
in CardView,
this is a old question but might help somebody
Replace android:layout_margin="10dp"
for android:layout_padding="10dp"
I think that setting setMaxCardElevation(0) will be enough in that case.
No need in setCardElevation(0) or card_view:cardPreventCornerOverlap="false"
I set card background color to transparent and it makes the white border disappear
app:cardBackgroundColor="#android:color/transparent"