I have a drawable which I am using in some scrolling fragment views. This is an image which should be sticky at the bottom of the page, should not scroll with the scroll view and should not stretch.
The drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_emptystate_buildings"
android:gravity="bottom|center_horizontal" />
</layer-list>
Setting this drawable as background like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_buildings_grey"
android:orientation="vertical">
works exactly as I want on newer devices, but when I tried on a Samsung S4 with Android 5.0.1, the drawable background streches all the way to the top. The image ('ic_emptystate_buildings' - an imported vector drawable) is only maybe 100dp tall and should not be stretched and should stick to the bottom.
The reason I did not create an ImageView was because its the background of a ScrollView and the XML got messy when I tried to 'hack' it to work. I also want this behaviour in multiple views, so this solution seemed the best because of no duplicate code and simple, clean XML.
Does anyone know why its not working on older versions, and perfectly on newer? And more importantly; is there any nice way to fix this?
Related
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.
Ok, so I'm working on a very simple Android homescreen widget that fetches the latest Image from an imageboard and displays it in a imageview.
I'd like to have the option to Style this widget, to be in keeping with Googles Material design guidelines, however, I hit the following problem whilst developing and testing on my Nexus 5 running Lollipop 5.1 -
I can't seem to use a cardview in a widget. It gives me a class not found exception however I do not get such exceptions previewing the layout and my gradle has the right dependancies so I suspect it is more to do with widget compatibility?
So I did some further reading and on the Google API page about widgets it has a very specific list of views that widgets support, which did not, to my surprise include cardviews. So I've gone back to my plain old Imageview
I guess my question then sits with, how would I get this imageview to look like a material design card? EG, rounded corners, the subtle 3d effect, drop shadow, ETC. I do not wish to give the imageview a border, the edge of the image should extend to the edges and get clipped by the rounded corners.
I have tried by simply setting the style of the Imageview to be that of a cardview, but that seems to have done absolutely nada :)
Anyone has some ideas? Thank you!
you might want to have a look at the source of the google i/o app : https://github.com/google/iosched/blob/master/android/src/main/res/layout/widget.xml
This is from a long time ago, but it's very doable to make a simple card background in XML.
The way to do this is to create an cardview-esque .xml file in your drawables app resources folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners android:radius="4dp" />
</shape>
and set the background view of your Widget's XML layout as
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/widget_card_background"
android:orientation="vertical">
<.../>
</LinearLayout>
You are correct in that CardView is not an available View type for Android Widgets, but this should create the functionality you were looking for 2 years ago
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 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" />
Ok I have created a background image in Inkscape. Exported that image and it looks correct, when I open it from Eclipse. However, when I build the project and apply that background to the Layout, it shows the complete opposite in the designer and on the device.
Here is what the image is supposed to look like. Correct background
Here is what the image looks like in the Eclipse Designer.Incorrect background.
Here is my Xml on a brand new Xml file.
<?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"
android:background="#drawable/list_view_bg"
android:orientation="vertical" >
</LinearLayout>
I am utterly confused on this one. Any help is greatly appreciated.
You are most likely using a theme where the background in dark. As your background gradient is transparent the black background is showing through.
Switch to a light theme.