0

I am using a MaterialCardView to display the following expected layout.

IOS screen shot, expected UI

But on Android side it looks like this. Android screenshot, shadow does not appear on all sides, mainly on the top

This is my code for this.

<com.google.android.material.card.MaterialCardView 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="wrap_content"
    app:strokeWidth="@dimen/cds_dimen_1dp"
    app:strokeColor="#D9D9D9"
    android:layout_margin="@dimen/cds_dimen_4dp"
    app:cardCornerRadius="@dimen/cds_dimen_8dp"
    app:cardElevation="@dimen/cds_dimen_6dp">
[...]

</com.google.android.material.card.MaterialCardView>

What is that I need to do to achieve this?

this is an item_layout_row for a recyclerview

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview_reason"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        app:layout_constraintTop_toBottomOf="@id/textView"
        android:layout_marginTop="@dimen/cds_dimen_20dp"
        android:paddingBottom="@dimen/cds_dimen_20dp"/>
James Z
  • 12,209
  • 10
  • 24
  • 44
akash89
  • 881
  • 3
  • 12
  • 31
  • It's hard to tell what you mean from those images, but if I'm understanding you correctly, Android's shadows are not even on all sides. They are rendered from two light sources – ambient light, and an overhead spotlight – so a shadow's bottom side will be darker than its top, and the difference will become more noticeable as the `View` gets closer to the bottom of the screen. If that is what you mean, you could disable the uneven spotlight effect by setting the theme attribute `0.0`, but that will apply to all `View`s in the `Activity`/`Dialog`. – Mike M. Jan 16 '23 at 15:19
  • You might also need to increase the ambient's alpha, 'cause it's _really_ light by default: `0.039`. That value has a range of `0.0`-`1.0`. – Mike M. Jan 16 '23 at 15:27
  • For completeness' sake, I should also mention that you could disable the spotlight by setting the `android:outlineSpotShadowColor` attribute to transparent on a `` or in a style, but that's not available until API level 28, Pie. (After James' edit, I see that I did understand you correctly.) – Mike M. Jan 16 '23 at 15:49
  • @MikeM. yes the issue is -- on ios, see a shadow uniformly distributed on all sides. but on android primarily on the top side, there is no shadow. I am not understanding how can i achieve this – akash89 Jan 16 '23 at 16:16
  • You would set those alpha attributes in your `Activity`'s theme: https://drive.google.com/file/d/1EEIOM41HncFBrYOIQNUexLFOdRgRenRZ/view?usp=share_link. Those values, and increasing the elevation a bit, gives results like: https://i.stack.imgur.com/tafHn.png. (Probably don't need to worry about the `outlineSpotShadowColor` for now, especially since it would only work on Pie and above.) – Mike M. Jan 16 '23 at 16:48
  • Oh...i don't have flexibility to add in the activity theme...i can however try to add on the fragment theme and see. But 1 question, was wondering if by some means adding some properties in the material card in the xml would hve been ideal actually. – akash89 Jan 16 '23 at 17:29
  • No, I would've suggested that first. Also, the alpha values are actually settings for the `Window`'s renderer, so they will only have effect if set in the `Activity`'s initial theme, unfortunately, and they will apply to all of the `View`s it contains. Btw, if the native shadows aren't going to work for your design, you might be able to find a library that draws its own shadows which might be suitable. Just thought I'd mention it. – Mike M. Jan 16 '23 at 17:42
  • I just realized: if your `Fragment` is a `DialogFragment`, that is a separate `Window`, so you would be able to apply those alpha attributes with its own theme. (Sorry if I'm confusing things, here.) – Mike M. Jan 16 '23 at 17:59
  • Hi @MikeM.- I tried adding the style to the BottomSheetDialogFragment. This is what did and get. https://docs.google.com/document/d/1E16y7BS8fOVglT5H4QUZ-76M7Li0-kOpWRZMHbJQMYI/edit – akash89 Jan 17 '23 at 09:51
  • My example increased the elevation, too; at least double, IIRC. – Mike M. Jan 17 '23 at 10:26
  • @MikeM.- can you please post the code? I mean are you doing any additional codes for this – akash89 Jan 17 '23 at 11:41
  • 1
    I would assume that since you can't change the `Activity`'s theme, you didn't set `bottomSheetDialogTheme` there, so it's not being applied. You'll need to do it in code, if you haven't already. I put together a minimal example of what your setup seems to be: https://drive.google.com/file/d/1EFDVVvCkp95acBH-GzeYYEl8ZkShAVT4/view?usp=share_link. Looks like: https://i.stack.imgur.com/EZjXE.png. – Mike M. Jan 17 '23 at 12:27
  • 1
    Hi @MikeM. - Thanks a ton for your help man ! You saved me ! After applying the code, this is what I see https://docs.google.com/document/d/1UJ6wn7vjBTWLrVCZc1qkrL4SPeywd2QtVOgc1si0qFg/edit I will let it be like this as of now until the UX guy chases me ! But thanks a ton man ! – akash89 Jan 18 '23 at 14:32

0 Answers0