My problem
My card views defined through XML are not showing their proper rounded corners (they are being covered by its subviews) in Android studio preview.
Although it shows up fine after rendering in the simulator, I fear that this "glitch" may be a symptom of me doing something wrong or forgetting some critical attribute. And even if it wasn't a symptom of a deeper problem, could anyone offer any insight on how to fix this aesthetic error?
Could anyone weigh in on this?
<android.support.v7.widget.CardView
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatImageView
android:src="#color/red"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v7.widget.CardView>
Android studio screenshot
Android emulator screenshot
The problem in the generated preview is that the content inside the CardView is not clipped to the bounds of the CardView, so the corner's you see are corners of the ImageView, which is actually clipped when you run on emulator/device.
If you really want to generate the real-like preview, you can try this workaround.
Add a stub drawable with the corner radius you want.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#android:color/holo_green_light" />
</shape>
Then set it as the background of the ImageView under the tools: namespace.
<ImageView android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#android:color/holo_blue_bright"
tools:src="#drawable/test" />
Android Studio supports a variety of XML attributes in the tools: namespace that enable design-time features (such as src of the ImageView to display when in preview mode).
here rounded corners show normally with your code. My test phone is Android 7.1. so I think you should clear the cache of your phone and install this app again. or maybe you should increase the value of
app:cardCornerRadius
then test it again.
Related
I am playing around with the circular positioning provided by ConstraintLayout. In the below sample app I have a TextView centered on the screen and an ImageView circularly constrained to the TextView with a radius of 50dps and an angle of 45 degrees. It should be fully constrained as there are no more XML attributes starting with app:layout_constraintCircle, so I assume I have fully declared its intended position. However, Android Studio gives me the following warning on the ImageView:
This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints
Running the application proves me right as the constrained view is in its correct location and does not jump to the start of the layout.
So my question is: am I missing any additional constraints or is Android Studio somehow bugged not recognizing circular constraining as valid?
Example XML 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">
<TextView
android:id="#+id/hello_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintCircle="#id/hello_text"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="50dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Having tried this myself I could just say this is bug with android studio lint.
Since there is angle and radius defined ImageView's position relative to the TextView is fixed.
For now you could just suppress the lint error by adding
tools:ignore="MissingConstraints"
to the ImageView.
Better to report this in issue tracker, under
Android Public Tracker > App Development > Android Studio > Lint
Actually something similar (lint error) occurred to me when using Parcelize, which is reported here.
I'm struggling with CardView corner radius and background color with AndroidX libraries.
I've defined my layout as below:
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="#dimen/retail_card_width"
card_view:cardCornerRadius="#dimen/card_radius"
card_view:cardBackgroundColor="#color/baseYellow"
android:layout_height="#dimen/retail_card_height">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
tools:src="#drawable/ic_fruit_1"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:scaleType="fitEnd"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/ivRetailBrand"
android:layout_width="#dimen/brand_icon_size"
android:layout_height="#dimen/brand_icon_size"
tools:src="#drawable/esselunga"
android:layout_marginTop="#dimen/retail_brand_margin"
android:background="#drawable/round_outline"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="#dimen/retail_brand_margin"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Unfortunately, neither cardCornerRadius nor cardBackgroundColor seem working on my layout. I can't understand if my issue depends on AndroidX libraries or not.
Here there's my layout preview:
I removed this lines in my Manifest file and after that my cardviews are worked prefectly fine
android:hardwareAccelerated="false"
Try modifying the CardView as:
<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="#dimen/retail_card_width"
app:cardCornerRadius="#dimen/card_radius"
app:cardBackgroundColor="#color/baseYellow"
android:layout_height="#dimen/retail_card_height">
It turned out that the problem was I was mixing cardview androidx library with support recyclerview library. Once I rebuilt the project with:
implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation 'androidx.cardview:cardview:1.0.0'
everything turned out fine.
I might be late for this but let me save someone's time in the future. I had this problem on my Android Studio preview and came to realise that the problem is that the content inside the CardView is not clipped to the bounds of the CardView, so the corners you see are corners of the ImageView, which is actually clipped when you run the app on emulator/device.
I hope this helps!
I had a similar problem. I solved it by wrapping the CardView in FrameLayout.
Addition to an answer:
Or you can try using "app" namespace instead of "card_view":
app:cardBackgroundColor="#color/background_color"
app:cardCornerRadius="#dimen/corner_radius"
I don't think it's related to the CardView setup.
Check Your ImageView they can be the reason for corner's not being rounded.
Comment Out Image View Code(whole ConstraintLayout) and check the UI.As i had the Same Issue in Past.
try to clean and rebuild the project. This worked for me..
You can create a new drawable file round_corner_colored.xml and paste the following code in that file :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#color/light_sky_blue"/>
<corners
android:radius="#dimen/_12sdp"/>
</shape>
Now set this drawable the background of cardview as :
android:background="#drawable/round_corner_colored"
Hope it will help !!
There are brands that force Dark mode when app installed for the first time this will affect the coloration of views and applying color in CardView will get ignored. You may apply this to your main theme to prevent such event.
<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
For me, It wasn't showing properly in Preview. But it was showing properly on the device. There is some rendering issue. I keep encountering such problems in android studio.
Faced issue in Android Studio 4.2.1 (Mac)
For me this worked
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/white"
app:contentPadding="#dimen/_10sdp"
app:cardCornerRadius="20dp"
app:cardUseCompatPadding="true"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_10sdp">
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/low"
android:textColor="#color/text_color_blue"
android:textSize="#dimen/_11ssp"
android:textStyle="normal" />
</androidx.cardview.widget.CardView>
Ok, So I ran into the same issue, and none of these suggestions resolved my issue. I was setting the background color of the card via cardview.setBackgroundColor(color):
, instead of cardview.setCardBackgroundColor()
. The cardview contains an embedded object, of card, the card is where the corner radius is appended to. So setting the color outside of the CardView.Card will not render the corner-radius as intended. Hope this helps.
I upgraded compileSdkVersion from 28 to 29 in app level gradle and the problem solved.
compileSdkVersion 29
I've checked a whole bunch of answers here, and still no dice. Android Studio preview shows the shadow, but not the 5.1.1 Nexus 7.
Here's my 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:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="20sp"
card_view:cardPreventCornerOverlap="true"
android:layout_margin="6dp"
>
So I've used cardUseCompatPadding (also here), checked the documentation, made sure the card has a margin .... no dice.
I posted the total XML file over at https://gist.github.com/tigerhawkvok/0ca3d1f402afa29642d5 .
Help?
On device, shadows are drawn only if the view background is not null and not transparent. However, a bug in the layout preview in Android Studio prevents it from checking the background before drawing the shadow. Hence you see the difference.
But you shouldn't really need to set the elevation on card view, since it creates its own shadow or sets the elevation depending on the platform version.
I am trying to make use of the elevation property in the latest Android Lollipop preview release. I set the targetSdk to 21 and the theme to Material. Next i added a background shape to a TextView and set the elevation to 8dp but the TextView is not showing any signs of a shadow. That is on a Nexus7 running the Lollipop preview. Is there anything else i have to consider?
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rect"
android:text="hallo world"
android:padding="8dp"
android:elevation="8dp" />
</LinearLayout>
This is the background drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#7d0073ff" />
<corners android:radius="16dp" />
</shape>
Here is the TextView:
For some reason if you set a solid color with a transparency, the elevation shadow does not show up.
In your example, I changed #7d0073ff to #0073ff and I got a shadow.
This is probably a bug, as in their documentation it gives a similar example using a translucent background color.
After going through the docs again, I finally found the solution.
Just add card_view:cardUseCompatPadding="true" to your CardView and shadows will appear on Lollipop devices.
What happens is, the content area in a CardView take different sizes on pre-lollipop and lollipop devices. So in lollipop devices the shadow is actually covered by the card so its not visible. By adding this attribute the content area remains the same across all devices and the shadow becomes visible.
My xml code is like :
<android.support.v7.widget.CardView
android:id="#+id/media_card_view"
android:layout_width="match_parent"
android:layout_height="130dp"
card_view:cardBackgroundColor="#android:color/white"
card_view:cardElevation="2sp"
card_view:cardUseCompatPadding="true"
>
...
</android.support.v7.widget.CardView>
ADDING android:elevation shadow to an ImageView:
android:clipToPadding="false"
+
android:outlineProvider="bounds"
+
android:elevation="2dp"
I was also having this problem, and as it turns out, you need to turn hardware acceleration on in the android manifest
<application
...
android:hardwareAccelerated="true">
be aware, if you have the following line in the manifest then shadows wont show:
android:hardwareAccelerated="false"
TL;DR
Check your card: (or whatever word you use) namespace declaration and make sure it matches this: xmlns:card="http://schemas.android.com/apk/res-auto"
I know there are a few answers here already, but I wanted to add mine as it wasn't included in these current suggestions. In order to get the shadows working on both KitKat and Marshmallow, (only emulators I tried, I'm sure it works in between) I added the following xml attributes to my card:
card:cardElevation="25dp"
card:cardUseCompatPadding="true"
After banging my head against my desk for why that wasn't working, trying to set the background color of the card to something completely opaque, enabling hardware acceleration in the manifest, and even praying, I checked the namespace declarations in my file. To my horror, I saw that the card xml namespace had been assigned to the following:
xmlns:card="http://schemas.android.com/tools"
After fixing that namespace declaration, I ran my dummy app again and let out a sigh of relief as shadows were finally being shown as expected.
Here is proof in case you're a doubter like me. And please Google, Android, whoever: Make shadows great again. They shouldn't be this difficult.
Here is the entire file that created the layout pictured below:
<?xml version="1.0" encoding="utf-8"?>
<!--MAKE SURE YOU HAVE THE RIGHT XML NAMESPACE ASSIGNED-->
<!--TO WHATEVER WORD YOU PUT IN FRONT OF THE CARD-->
<!--XML ATTRIBUTES. IN THIS CASE, MINE IS card-->
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card="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="#607D8B"
android:fitsSystemWindows="true"
tools:context="com.mlustig.playground.MainActivity">
<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
app:layout_aspectRatio="66%"
app:layout_heightPercent="75%"
card:cardElevation="25dp"
card:cardUseCompatPadding="true" />
</android.support.percent.PercentRelativeLayout>
Yes, I know. It's annoying that you can't simply copy and paste this layout and run it because it has PercentRelativeLayout in it, but I left it there on purpose. You should definitely check it out. Super powerful, very useful. Nice nice nice. Hope this helped.
As noted earlier, this is an open bug in Android : if the background drawable uses a solid color with transparency, then the shadow won't be shown.
To work around the issue, display the background in its own separate view and set the alpha on that view. Wrap the background view and the TextView in a RelativeLayout to place the background directly under the TextView and use android:layout_alignLeft, android:layout_alignBottom etc to make it the same size. They need to be at the same elevation, and the background must appear before the TextView in the xml so it is drawn under it.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:clipToPadding="false"
android:background="#ffffff">
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/text_view"
android:layout_alignRight="#id/text_view"
android:layout_alignBottom="#id/text_view"
android:layout_alignTop="#id/text_view"
android:background="#drawable/rect"
android:alpha="0.5"
android:elevation="8dp"/>
<TextView
android:id="#id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hallo world"
android:textColor="#ffffff"
android:padding="8dp"
android:elevation="8dp" />
</RelativeLayout>
The drawable is the same as yours but without transparency:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#0073ff" />
<corners android:radius="16dp" />
</shape>
Result:
A few notable points:
You must ensure that the enclosing RelativeLayout is large enough to display the shadow. If you just set its dimensions to wrap_content without padding, the shadow will be clipped to the layout's bounds. As explained in this question, you can use padding and set android:cipToPadding="false" to make it large enough for the shadow. You might not need as much padding in this case, I haven't experimented with that.
In this case we need to use a separate view for the background because if we had set the alpha directly on the TextView then the text would have been affected as well. Depending on your use case you might not need a separate view and enclosing layout and could just just have one view, with alpha set on the view and no transparency in the drawable.
Try using : app:cardElevation="4dp"
Try adding margin to the CardView.
I have custom EditTexts and I noticed their backgrounds draw wrong when they leave their parents. So I used android:clipChildren="false" on their parent. That works fine. They draw correctly when partially out of their parent now.
This gave me a new problem though. On older devices (< Android 2.3? Not confirmed what the max version is for this issue), the background doesn't get clipped to it's padding. The EditText backgrounds are now drawing to the full height/width of the screen. This only happens on the initial layout.
Has anyone experienced this before? It's really weird. I don't get why the background only draws wrong when using android:clipChildren="false" and only on some devices. I need that though since my EditTexts can be dragged around and need to keep drawing outside their parent container.
I just ran across the same problem. It was caused by having ColorDrawables as background (a StateListDrawable (<selector>) containing several #color/... items, to be exact).
It looks like this was fixed in Android 3.2.4-r1 (commit 95930e1).
Before that, the class comment used to say:
Note that a ColorDrawable [...] ignores the Bounds, meaning it will draw everywhere in the current clip even if setBounds(...) was called with a smaller area.
This was removed, and the draw(Canvas) method changed to respect the bounds.
As a workaround, if you need to support older Android versions, you can use a ShapeDrawable with a solid color to get the same behaviour:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/your_background_color"/>
</shape>
We had a 2.3.4 device where this issue was causing an ImageView to cover everything above it in the LinearLayout it was contained in.
The fix was to create the ShapeDrawable mentioned above and use that as the background to the image.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/your_background_color"/>
</shape>
<ImageView
android:id="#+id/this_is"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:background="#drawable/a_rectangle_shape_drawable"
android:contentDescription="#string/an_image_view"
android:scaleType="centerInside"
android:src="#drawable/an_icon" />