0

I have RelativeLayout parent, which has 2 children horizontally positioned next to each other. First children is LinearLayout has custom background shape and some content in it and second one is ImageView which is representing custom shaped end of background. As they are next to each other, they are forming one single uninterrupted background.

Problem is that if I set android:elevation="8dp" to RelativeLayout parent, Its not visible at all. I tried clipToPadding false, but nothing has changed.

LinearLayout has dynamic height (wrap_content) and ImageView is stretching based on first layout height(android:layout_alignTop, android:layout_alignBottom)

Here is quick sketch of that layout (I cant share actual screenshot - im under NDA).

enter image description here

Mockup layout:

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable name="CustomRes" type="com.project.utils.CustomResources"/>
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:elevation="@dimen/padding_small"
        android:layout_margin="@dimen/padding_small">

        <LinearLayout
            android:id="@+id/mainContentLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/endElement"
            android:orientation="horizontal"
            android:background="@drawable/bg_round_left"
            android:backgroundTint="@color/blue">

            <RelativeLayout
                android:id="@+id/infoParent"
                android:padding="@dimen/padding_medium"
                android:paddingEnd="0dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <RelativeLayout
                    android:id="@+id/infoMain"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    tools:ignore="UselessParent">

                    <LinearLayout
                        android:id="@+id/baseInfoLayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_toStartOf="@id/infoTime"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/city"
                            style="@style/item_text_secondary"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="--"
                            android:textColor="@color/white" />

                        <TextView
                            android:id="@+id/station"
                            style="@style/item_text_primary"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="--" />

                        <TextView
                            android:id="@+id/duration"
                            style="@style/item_text_primary"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="--" />

                    </LinearLayout>

                    <TextView
                        android:id="@+id/infoTime"
                        style="@style/item_activated_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:text="--" />

                    <RelativeLayout
                        android:id="@+id/itemTimeLayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/padding_medium"
                        android:layout_below="@id/baseInfoLayout"
                        tools:ignore="UselessParent">

                        <TextView
                            android:id="@+id/timeLabel"
                            style="@style/item_activated_text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentEnd="true"
                            android:text="Activated at: " />

                        <TextView
                            android:id="@+id/activatedAt"
                            style="@style/item_activated_text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@id/timeLabel"
                            android:layout_alignParentEnd="true"
                            android:text="--"
                            android:textStyle="bold" />

                    </RelativeLayout>

                </RelativeLayout>

            </RelativeLayout>

        </LinearLayout>

        <ImageView
            android:id="@+id/endElement"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignTop="@id/mainContentLayout"
            android:layout_alignBottom="@id/mainContentLayout"
            android:backgroundTint="@color/blue"
            android:background="@drawable/item_ending_element" />

    </RelativeLayout>

</layout>
martin1337
  • 2,384
  • 6
  • 38
  • 85
  • Does the RelativeLayout have a background? If not, try applying one to see if the shadow appears. – Cheticamp Jan 31 '22 at 14:04
  • Nope, but Ive added background just to test, nothing appeared. – martin1337 Feb 01 '22 at 06:26
  • OK. I understand that you are under an NDA, but can you mock up a short layout that exhibits the same problem? That would help. – Cheticamp Feb 01 '22 at 11:58
  • Added some mockup – martin1337 Feb 01 '22 at 13:03
  • The XML helped. With a transparent background on the _RelativeLayout_, there is no shadow. If I set the background to "@android:color/white" the shadow appears. If I remove everything in the _RelativeLayout_ and set the width/height to `match_parent`/`150dp`, the result is the same. If you don't get the same result, it could be an issue with the API level or related. – Cheticamp Feb 01 '22 at 14:40
  • White background is then overlaping with transparent part in ImageView. Parent cant have any colored background. I cant draw any color under those "spikes/tears" in ImageView. – martin1337 Feb 01 '22 at 21:03
  • So, if the _RelativeLayout_ has a non-transparent background, you do see a shadow but the layout can't have a background because it interferes with the look of the other views. You need the transparent background _RelativeLayout_ to case a shadow. Is that correct? – Cheticamp Feb 01 '22 at 22:45
  • Thats correct. If I set color to white, shadow is drawn around edges of ImageView (rectangular shadow). But it is not taking into consideration transparent content inside ImageView. Because ImageView src image has parts of it transparent. What I got from it is that Android is not smart enough to work with transparency inside ImageView content. – martin1337 Feb 02 '22 at 08:29
  • I think that you are right; it's one of those Android things. You might consider creating a view whose sole purpose is to be the shadow. Also, [this post](https://stackoverflow.com/q/70227950/6287910) might be helpful or, at least, offer some insight. – Cheticamp Feb 02 '22 at 12:35

0 Answers0