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"/>
Related
I'd like to add some padding to my recycler view so the status bar doesn't cover the first item. The problem is when I apply top padding, a solid white shows on top preventing the full screen experience.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/RecentVizzyView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="48dp" />
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_gravity="center"
android:indeterminate="true"
android:indeterminateTint="#color/lightGreen"
android:indeterminateTintMode="src_atop" />
</android.support.design.widget.CoordinatorLayout>
and I'm setting no limits flag to my screen:
getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
Set android:clipToPadding="false" on your RecyclerView.
That will allow the paddingTop (and bottom, if you want), to be part of the scrollable part.
A better description is found here:
Android what does the clipToPadding Attribute do?
I stumbled upon something weird. I am using the same CardView component in more than one place in my app, all with the same elevation (3dp), and they all looks the same. However, for one scenario I need to embed the CardView inside a ScrollView. I didn't change anything in the CardView configuration, but the shadow now looks different.
This is my layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:padding="16dp"
android:scrollbars="none">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
app:cardCornerRadius="8dp"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<!-- some other views-->
</androidx.cardview.widget.CardView>
</ScrollView>
In the picture below you can see on the right the CardView and on the left the two shadows: on the top the shadow generated by the CardView alone, on the bottom the one generated when the CardView is inside a ScrollView. As you can see the second one appears darker and thicker.
NOTE: The background color (#FAFAFA) is the same in both scenario.
For both cases, I would check the following properties as it could contribute to the difference you're seeing:
getTranslationZ()
getElevation()
getOutlineAmbientShadowColor() (this is only valid in API 28+)
getOutlineSpotShadowColor() (this is only valid in API 28+)
Plus, checking Layout inspector to see if there's any view that could affect to the rendering.
Also, this article from Sebastiano Poggi could be of help.
So I'm learning app development for Android, and I'm a bit stuck. I'm trying to make a RecyclerView with CardViews, but there is just too much space between CardViews. This is what it looks like.
I'm going for more of the look that the Google app has with the feed.
This is more like what I'm shooting for.
Anyways, I've searched and searched on this website for a solution to my problem and nothing seems to be working for me. I'm hoping that someone can give me something that will actually work.
Here's the xml for my cardview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:orientation="vertical"
android:paddingBottom="10dp">
<android.support.v7.widget.CardView
android:id="#+id/cv"
android:layout_width="match_parent"
android:layout_height="120dp"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/note_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="false"
android:layout_below="#+id/event_time"
android:textSize="24sp" />
<TextView
android:id="#+id/note_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/note_title" />
</RelativeLayout>
</android.support.v7.widget.CardView>
The top and bottom spaces is caused by your padding
android:paddingBottom="10dp", remove this or reduce it
Decrease the PadingBotom of the root constraintLayout
you could put 3 or 4 dp instead of 10dp.
android:paddingBottom="10dp"
Also I do not know if the copy of your code was not good ... the constraintLayout must close at the end:
after this:
</android.support.v7.widget.CardView>
you must have this:
</android.support.constraint.ConstraintLayout>
From the documentation for CardView:
Before Lollipop, CardView adds padding to its content and draws shadows to that area. ... If you want CardView to add inner padding on platforms Lollipop and after as well, you can call setUseCompatPadding(boolean) and pass true.
In your layout, you have this attribute on your CardView tag:
app:cardUseCompatPadding="true"
This does the same thing as the method in the quote above.
As a result, even if you had zero margin on all sides of your cards, users would still see space in between them because of the inner padding behavior. If you want really tight spacing, you'll have to remove this attribute (though of course you'll still get the larger spacing pre-Lollipop).
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!
I am just beginning with Android. I am making a layout with buttons, but a very strange thing is happening — there is a small gap between them. Setting margin and padding to 0 is also not helping.
Here is my simple layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
It is looking like this:
Make your own flat Button style with ripple effect [lollipop] and without it [pre-lollipop]:
https://gist.github.com/dmytrodanylyk/3513e42839ae4309d2b5
You have to use android:background to change the background of button. For example if you use android:background = "#FFFFFF" your visual problem is fixed. In reality , there is no space between the buttons, their background creates an "illusion"