I am trying something that I didnt think would take hours.
I want a cardview with a transparent background and slightly rounded corners.
In the end it should look like this (the pink item at the top is some other view):
This is how far I have got:
Actually I thought I am done, and I just need to round the corners, and remove the stroke from the cardview. Well, it seems like these 2 things are not possible. When I set app:cardCornerRadius="8dp" this is the output I get:
Removing the stroke didn' work at all. In the end I created a rectangle shape inside drawable (where I set the stroke to 0dp), assigned it to the cardview and the stroke was gone, but I got a white background behind the rounded corners and I wasnt able to remove it.
This is my CardView Layout:
<androidx.cardview.widget.CardView
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_margin="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:elevation="0dp"
app:cardCornerRadius="8dp"
app:cardPreventCornerOverlap="true"
app:cardBackgroundColor="#00123456"
> </CardView>
Is there a possibility to achive what I want (first pic)? Or should I let go of RecyclerView switch to ListView?
Removing the CardView as the parent and putting a Constraintlayout, solved the problem.
<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="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#drawable/rounded_background"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:paddingTop="4dp"></ConstraintLayout>
Related
[![my image][1]][1]
As. you can see from the image i have a rounded corner shape ..but i want to have a shadow just on the top (there is no where else for it anyway since its covered on the other ends). How can i place a shadow just at the top of this cardView ? here is what i have so far and i've tried using two framelayouts earlier.
<?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:id="#+id/viewRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.card.MaterialCardView
android:theme="#style/Theme.MaterialComponents.Light"
android:id="#+id/greenCardView"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:cardCornerRadius="16dp"
app:cardElevation="0dp"
android:clipToOutline="true"
android:clipToPadding="true"
android:clipChildren="true"
app:cardPreventCornerOverlap="true"
app:cardBackgroundColor="#color/green">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/contentContainer"
android:layout_width="match_parent"
android:background="#color/transparent"
android:layout_height="54dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
i also need the shadow to have no background under it ..so it should not be on a white background, i just want the shadow on top alone on a transparent background.
update: after i udated to 70dp elevation the shadow is only appearing on the bottom :
[![enter image description here][2]][2]
notice the shadow is only appearing at the bottom . how can i make shadow just at the top
[1]: https://i.stack.imgur.com/8XC6l.png
[2]: https://i.stack.imgur.com/egRoB.png
Increse the value of
app:cardElevation="0dp"
it was how i was attaching the scrollview to the cardview ..i used a space view to attach it a bit lower and it works great now (since i dont have access to negative margins) ..thanks
what i learned is that when you have a scrollview attached to a cardview then you should attach the scrollview a few pixels away from the top so that it does not look cut off when it scrolls.
I'm using RecycleView, there shouldn't be a border after each item in the recycle view, but I have. How to remove it? I think the problem is in the LayoutManager because there is not border in the last element of RecycleView
<androidx.recyclerview.widget.RecyclerView
android:background="#color/menu_background" //here is non border
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
tools:listitem="#layout/cabin_category_info_layout" />
And it's CardView
<androidx.cardview.widget.CardView 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="wrap_content"
android:layout_marginTop="20dp">
If you use CardView you should know that there's a default corner on this View so if you don't want it you should configure it to don't show it.
Try adding this into your CardView
app:cardCornerRadius="0dp
Also if you want to remove the elevation you may use this too
app:cardElevation="0dp"
The cardview by default has elevation which depicts as a border. You can either remove the card view or you can make the elevation as 0dp.
app:cardElevation="0dp"
This question already has answers here:
Elevation shadow is clipped
(4 answers)
Closed 1 year ago.
I am trying to show drop shadow on CardView. The shadow cannot be shown correctly if I put the CardView into a container (like LinearLayout).
My code:
<?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"
android:background="#FFFFF8"
android:clipToPadding="false"
tools:context=".MainActivity">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:translationZ="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<LinearLayout
android:id="#+id/card1"
android:layout_width="match_parent"
android:layout_height="330dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="#FFFFF8"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:translationZ="16dp"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
It looks like:
I have two CardViews, I put the one below into a LinearLayout, as you can see, it has no shadow at top and left. But the upper one looks well.
Is there any way to fix for the scenario when CardView in a LinearLayout?
P.S.:
I don't want to introduce either extra margins on the CardView or extra paddings to the container LinearLayout
I've tried adding android:clipToPadding="false" to the container LinearLayout, but it doesn't help.
I've read this Elevation shadow is clipped, and tried both android:clipToPadding="false" && android:clipChildren="false", it doesn't work.
More context about why I don't want to have extra margins or paddings, my app is data-driven, and same to the drop shadows on CardViews, CardViews can be laid out vertically or horizontally one by one, with or with no drop shadows on them, if I have to take extra margins into account, for displaying the CardViews with shadow, then the logic would be too complex.
Assume such a scenario, say one shadowed CardView, another one shadowed to the right; but one not shadowed to the bottom etc. I have to set margin left to the 1st but no to the right because the 2nd (at right) also has shadow, and for the 2nd one, I have right margin for shadow; same logic to the one below, but logic gets complex here, that why I am asking for a solution here, if the drop shadow can be visible without depending on the margins/paddings, that'd be wonderful for me.
EDIT: Closed because: https://stackoverflow.com/a/57741227/853191, this comment helped me out.
Thanks!
To show drop shadow you should use
android:translationX="16dp", android:translationY="16dp", android:translationZ="16dp" like below.
<LinearLayout
android:id="#+id/card1"
android:layout_width="match_parent"
android:layout_height="330dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="#FFFFF8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:translationX="16dp"
android:translationY="16dp"
android:translationZ="16dp" />
</LinearLayout>
Output:
Output Image click here!
I have a CardView within a ConstraintLayout.
This view is then inflated and added to a LinearLayout.
I would like the CardView to cast a shadow on the next CardView, but it seems to be clipped by the ConstraintLayout. How can I get the elevation shadow to show on the CardView without providing more padding or margins for it?
i.e. How can I cast the shadow on an adjacent item?
<LinearLayout>
<ConstraintLayout>
<CardView> <-- This view's shadow is cut
...
</CardView>
</ConstraintLayout>
<ConstraintLayout>
<CardView>
...
</CardView>
</ConstraintLayout>
<LinearLayout>
Try adding this comment inside your card view that's enough
card_view:cardUseCompatPadding="true"
How can I get the elevation shadow to show on the CardView without providing more padding or margins for it?
i.e. How can I cast the shadow on an adjacent item?
You can't, for both a practical reason and a conceptual one.
The practical reason comes down to how the Android framework draws CardView shadows. On older API levels, the card is inset within its own bounds and that extra space is used to draw the shadow. So even if you had two cards immediately next to each other, they'd still have "space" between them due to these insets. From the documentation:
Before Lollipop, CardView adds padding to its content and draws shadows to that area.
On Lollipop and higher, shadows are drawn within the parent's bounds, not within the CardView's bounds. Still, the parent will clip the shadow if there isn't enough space between the card's edges and the parent's edges to draw the whole shadow. In your example, each CardView is in a separate parent, so even if you put those parents immediately next to each other, each parent would still clip its card's shadow.
As for the conceptual reason, that's just not how shadows work (in nature). If you have two cards at the same elevation, even if they're right next to each other, the top card wouldn't cast a shadow on the bottom card.
Try to add
app:cardElevation="10dp"
In order to use app:cardElevation you have to add to your LinearLayout:
xmlns:app="http://schemas.android.com/apk/res-auto"
I tried this in a test project and the elevation should work this way. Below is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="ro.helpproject.funcode.help.MainActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="50dp"
app:cardElevation="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST TEST" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="50dp"
app:cardElevation="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST TEST" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
CardView needs padding around it for shadow to appear.
If app:cardUseCompatPadding="true" adds the shadow for you but you don't want the extra padding from 4 directions (LRTB), you need to add margin to the CardView yourself.
Enable Developer options -> Show layout boundaries and if you see that there is no empty space around your CardView. Then that's probably the reason shadow not appearing.
I am using a cardview as the root of a custom view I am writing. I using the v7 support library. My XML looks like this:
<?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:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
My problem is that I am getting a white border around my card view. It looks like it is there to indicate elevation as it is thicker on the right side. I've tried adjusting cardElevation and MaxCardElevation in my XML like so :
card_view:cardElevation="0dp"
and in code in my custom view that extends CardView and uses this layout:
setCardElevation(0);
setMaxCardElevation(0);
But the white border persists. I'm not sure how to get rid of it. If anyone had any input into why this is happening or suggestions on how I can remove the white border it would be appreciated. Thanks much.
I know it's a bit late, but for anyone having a similar problem:
I had the same issue: A white border was shown on pre-lollipop devices.
I solved it setting the cardPreventCornerOverlap to false on your XML.
Like this:
<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:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
Support CardView doesn't support content clipping, because it's expensive on older devices. It's possible to clip content using Canvas.saveLayer/restoreLayer and PorterDuff modes. This is how Carbon implements rounded corners with correct content clipping. See the image:
I might be late in the game, but I had the same issue. Just wanted to share a simple solution!
My custom view extended a CardView and I had a margin applied to the root element (i.e. CardView) in the XML just like in the original question. This ended up giving me the extra white border like this:
Solution was to move the margin from root of the Custom View XML to the declaration of your custom view (check comments in the snippet)
Code snippet:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cvSettings"
style="#style/DefaultCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Remove this -->
app:cardElevation="#dimen/default_card_elevation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
.
.
.
</android.support.v7.widget.CardView>
Ended up just moving over the margin to my custom view declaration which got rid of the extra white border:
<com.example.android.custom.MyCustomView
android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Move it here-->
cv:pt_widgetColor="#color/colorAccent" />
After the change, much cleaner :) :
use cardBackgroundColor="color" in xml card_view
sample code :
<android.support.v7.widget.CardView
android:id="#+id/card_view_khaterat"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
app:cardBackgroundColor="#f56f6c"/>