Forum Xamarin.Android
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Shadow effect not working for cardview on above lollypop devices while it works with pre-lollypop

ShahanaHabeebShahanaHabeeb USMember
edited December 2016 in Xamarin.Android

Please find the below code that uses a cardview. This layout serves as an item for my recycler view. The problem is that the elevation doesn't bring any shadow effect in above lollypop devices. I have tried running the same layout in Android Studio and it works well. I have applied and tested all the additional attributes that may bring the shadow effect like **cardview:cardUseCompatPadding="true" cardview:cardPreventCornerOverlap="true" cardview:contentPadding="5dp"
**but nothing has worked. Kindly help if anyone faced this and was able to solve it.

    `<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:cardview="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" 
        android:padding="@dimen/item_padding"
        android:id="@+id/thumbnail_cell">
        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            cardview:cardUseCompatPadding="true"
            cardview:cardPreventCornerOverlap="true" 
            cardview:cardElevation="10dp"
            cardview:contentPadding="5dp"
            android:id="@+id/cardview">
            <ImageView
                android:src="@android:drawable/ic_menu_gallery"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="5dp"
                android:id="@+id/thumbnail_grid_image"
                android:adjustViewBounds="true"/>
        </android.support.v7.widget.CardView>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/thumbnail_checkbox"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="15dp"
            android:layout_alignBottom="@+id/cardview"
            android:theme="@style/checkBoxStyle"
            android:layout_alignLeft="@+id/cardview"
            android:layout_alignStart="@+id/cardview" />
    </RelativeLayout>`

Best Answer

«1

Answers

  • lukasrein97lukasrein97 USMember ✭✭✭

    I find no erros but try to add
    android:layout_margin="10dp"
    to your CardView, because CardViews need to margin in all direction sometimes to show ther elevation shadow.
    I had the same error once and this did it for me. Give it a try.

  • ShahanaHabeebShahanaHabeeb USMember
    edited December 2016

    No It didn't work either... I think the content padding would be also for the same purpose

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    First of all some Questions:
    Why do you set the Checkbox outside of the Cardview? You could set it inside? But its not a importand thing i only want to know.

    And your Layout looks like a Item for a ListView or something? So where is the part you use your Layout? is it an extension for another layout? Or is it a main Layout for any Activitys in your Project?

    Also you havent set backgrounds in your Relative Layout or in your CardView either? Did you tried to set the background to white or transparent?

  • ShahanaHabeebShahanaHabeeb USMember
    edited December 2016

    The item was originally being used without the cardview until a design change proposed a shadow to be seen around the image. So as a test I simply contained the imageview within the cardview.

    It is an item for my RecyclerView as I have mentioned already. This layout will be inflated in the custom adapter class for the RecyclerView based on the image count.

    Yes I have tried setting background in both RelativeLayout and CardView but the effect is the same

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    oh it seems like i found something try to use
    app:cardElevation="10dp"
    instead of
    cardview:cardElevation="10dp"

    You must implement
    xmlns:app="http://schemas.android.com/apk/res-auto"
    to your relative layout or cardview to use "app:"

  • let me try this...

  • Nope... This seems to just stick to the way it was. No Good. I really was hoping it worked...

  • lukasrein97lukasrein97 USMember ✭✭✭

    Mhhh this is some weird sh*t.....
    Ok then we need more information.

    The problem is that the elevation doesn't bring any shadow effect in above lollypop devices.

    so that means that below lollypop devices it works??

    I have tried running the same layout in Android Studio and it works well.

    Ok on whitch android apis did you tried it? And is that layout you posted here that one that worked in Android Studio?

  • Hell Yeah.. Pretty weird sh*t indeed

    As for the informations...

    1)Yes it is working in the below lollypop devices
    2)The same layout itself was working on Android Studio

    Tested with 4.3, 4.4.2, 4.4.4. Not working in 5.1, 6.0, 5.0 - device includes > Samsung, Moto, Nexus 5X

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    The weird thing is that it works below 5.1. Normally all this kind of things dont work well below 5.1....
    Did you tried to debug it on a real phone with 5.1 or above?
    I think its kind of a emulator bug. haha that would be funny.
    So if you dont have a phone above 5.1 you could try using another emulator like

    www.genymotion.com

    Its free and this are the best and fastest Android Emulators you can get out there.

  • ShahanaHabeebShahanaHabeeb USMember
    edited December 2016

    All the tests mentioned above are real devices, not emulators. I don't think this is an emulator bug. I do have devices above 5 and those are the ones which failed to show any shadow :(

  • lukasrein97lukasrein97 USMember ✭✭✭

    Holy ........

    well the shadow could not shown because they are drawn outside of the bounds of the RelativeLayout and the view is cliped to its bound.

    Add android:clipChildren="false" to the parent of your RelativeLayout or add a small amount of padding to your View and set android:clipToPadding="false"

  • Have you also experienced anything similar with Xamarin.Android, just curious...

  • lukasrein97lukasrein97 USMember ✭✭✭

    No never saw something like that before....

  • android:clipChildren="false"
    android:clipToPadding="false"

    Didn't work. I'm doomed!

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    OK well i cant help you more i tried all solutions that i know.
    You need to wait for the resurrection of Jesus. Hopefully he will register himself here and help you out.

  • Amen!

  • AlexDunnAlexDunn USMember ✭✭✭

    Have you tried adding margin to your Image instead of just to your CardView or both? Wondering if the image itself is rendering over the shadow.

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    @AlexDunn said:
    Have you tried adding margin to your Image instead of just to your CardView or both? Wondering if the image itself is rendering over the shadow.

    What? Since when can images rendering over the shadow?
    The shadow is "outside" of the cardview and images in that only render to the end of the cardview.
    Its the same effect as when you have a 300 dp width image in a 200 dp width relative layout. The image wouldnt render outside of the layout??? Or am i totally wrong?

  • AlexDunnAlexDunn USMember ✭✭✭

    The shadow of a card view is not technically outside the layout unless it is on a < 5.0 device where they handle the shadow renderings through drawables rather than through the elevation APIs, the shadow IS actually within the layout in anything > 5.0 so you can definitely render a view over the shadow (I've done it before without realizing)

  • hi would you be able to share a POC or so to illustrate this..

  • lukasrein97lukasrein97 USMember ✭✭✭

    @AlexDunn said:
    unless it is on a < 5.0 device where they handle the shadow renderings through drawables rather than through the elevation APIs

    Ah ok didnt know that :open_mouth:

  • AlexDunnAlexDunn USMember ✭✭✭

    @ShahanaHabeeb all I'm asking to see is if this changes anything for you:

    <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:cardview="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center" 
            android:padding="@dimen/item_padding"
            android:id="@+id/thumbnail_cell">
            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="20dp" <!-- ADDED MARGIN HERE -->
                cardview:cardUseCompatPadding="true"
                cardview:cardPreventCornerOverlap="true" 
                cardview:cardElevation="10dp"
                cardview:contentPadding="5dp"
                android:id="@+id/cardview">
                <ImageView
                    android:src="@android:drawable/ic_menu_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="20dp" <!-- ADDED MARGIN HERE -->
                    android:padding="5dp"
                    android:id="@+id/thumbnail_grid_image"
                    android:adjustViewBounds="true"/>
            </android.support.v7.widget.CardView>
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/thumbnail_checkbox"
                android:layout_marginLeft="10dp"
                android:layout_marginBottom="15dp"
                android:layout_alignBottom="@+id/cardview"
                android:theme="@style/checkBoxStyle"
                android:layout_alignLeft="@+id/cardview"
                android:layout_alignStart="@+id/cardview" />
        </RelativeLayout>
    
  • lukasrein97lukasrein97 USMember ✭✭✭

    Why do you thing it would make a difference between android:layout_margin="20dp" and cardview:contentPadding="5dp" ? Didnt they have the same result in this case?
    CardView layout margin is an option whitch he already tried.

  • ShahanaHabeebShahanaHabeeb USMember
    edited December 2016

    No It didn't work either (headbang)

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    When im home i sent you my cardview layout i used for recyclerview. It worked on all APIs. You only need to replace the dp of my layout like you want it to have.

  • AlexDunnAlexDunn USMember ✭✭✭

    And @lukasrein97 yeah it's pretty dumb if you ask me. Ever had an issue when you layout a FloatingActionButton and notice that it is positioned completely differently on pre-lollipop vs lollipop+ devices? It's because on the older ones it actually has added margins due to the shadows not being part of the View itself. So it moves up and to the left compared to where it is on lollipop+.
    CardViews work the same way. The shadow is actually a drawable underneath the card on pre-lollipop, but on lollipop+ it is part of the view and layout itself. Although the useCompatPadding is supposed to fix it, there are still some strange issues. I'm just curious if adding margin to both happens to fix anything.

  • Sure... I can check and tell...

  • @AlexDunn said:
    And @lukasrein97 yeah it's pretty dumb if you ask me. Ever had an issue when you layout a FloatingActionButton and notice that it is positioned completely differently on pre-lollipop vs lollipop+ devices? It's because on the older ones it actually has added margins due to the shadows not being part of the View itself. So it moves up and to the left compared to where it is on lollipop+.
    CardViews work the same way. The shadow is actually a drawable underneath the card on pre-lollipop, but on lollipop+ it is part of the view and layout itself. Although the useCompatPadding is supposed to fix it, there are still some strange issues. I'm just curious if adding margin to both happens to fix anything.

    Thanks for this info. Although that option also is not working in this case... The weird part being the same layout works well with Android Studio on all api

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    @AlexDunn said:
    And @lukasrein97 yeah it's pretty dumb if you ask me. Ever had an issue when you layout a FloatingActionButton and notice that it is positioned completely differently on pre-lollipop vs lollipop+ devices? It's because on the older ones it actually has added margins due to the shadows not being part of the View itself. So it moves up and to the left compared to where it is on lollipop+.
    CardViews work the same way. The shadow is actually a drawable underneath the card on pre-lollipop, but on lollipop+ it is part of the view and layout itself. Although the useCompatPadding is supposed to fix it, there are still some strange issues. I'm just curious if adding margin to both happens to fix anything.

    Yeah ok im understand that. Then its weird that his layout works on pre-lollipop devices and doesnt work on lollipop+ ?
    It would make more sense to me when it wouldnt work on pre-lollipop.
    His error is really weird :joy:

  • @lukasrein97 said:
    Yeah ok im understand that. Then its weird that his layout works on pre-lollipop devices and doesnt on lollipop+ ?
    It would make more sense to me when it wouldnt work on pre-lollipop.
    His error is really weird :joy:

    Sigh!

    That what was my thoughts when I faced this. It had always been such that issues used to come up on pre-Lolly devices always for any new components and we had to work around for that. But this is one of a kind

  • AlexDunnAlexDunn USMember ✭✭✭

    @ShahanaHabeeb if it is working in those situations, then maybe we are looking at an environment issue. What Android version are you compiling against? And what is your target version?
    Properties > Application > Compile using Android version
    What version of the support libraries are you using? 24.2.1?

  • Compile sdk - 7
    Target - 5.1
    Support lib version - 24.2.1

  • AlexDunnAlexDunn USMember ✭✭✭

    Okay, I'm going to see if I can actually reproduce it. Gimme a few minutes and I'll get back to you

  • lukasrein97lukasrein97 USMember ✭✭✭
    edited December 2016

    @ShahanaHabeeb said:
    Support lib version - 24.2.1

    Oh dear. I hate that version. Still too much errors. Im using the stable version 23.2.X. Never had such strange errors with that.

  • ShahanaHabeebShahanaHabeeb USMember
    edited December 2016

    :( That's part of the requirement...

  • @AlexDunn said:
    Okay, I'm going to see if I can actually reproduce it. Gimme a few minutes and I'll get back to you

    Thanks...

  • AlexDunnAlexDunn USMember ✭✭✭

    I'm seeing shadow here:
    Compiled using 7.0
    Support lib 24.2.1
    Using your exact xml (minus the checkbox style)

  • lukasrein97lukasrein97 USMember ✭✭✭

    @AlexDunn said:
    I'm seeing shadow here:
    Compiled using 7.0
    Support lib 24.2.1
    Using your exact xml (minus the checkbox style)

    guys im done with this :neutral:

  • @AlexDunn said:
    I'm seeing shadow here:
    Compiled using 7.0
    Support lib 24.2.1
    Using your exact xml (minus the checkbox style)

    Hi which is the version of Xamarin update available for you?

Sign In or Register to comment.