android - How to get an ImageView on top of a LinearLayout in RelativeLayout

Question

I have a LinearLayout that replicates a button, and I'd like to add an ImageView to the top right corner of this button. So, I decided to place this LinearLayout inside a RelativeLayout and add the ImageView below the LinearLayout aligning it with respect to the LinearLayout. It works great, except the ImageView appears to be below the LinearLayout. How do I fix this?

My code:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/timetable"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="10dp"
        android:background="@drawable/button_card"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center_vertical"
        android:onClick="openTimetable"
        android:orientation="vertical"
        android:stateListAnimator="@animator/item_elevation">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:contentDescription="@string/timetable_description"
            app:srcCompat="@drawable/ic_timetable"
            app:tint="@color/colorPrimary" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:clickable="false"
            android:text="@string/timetable"
            android:textAlignment="center"
            android:textColor="@color/colorPrimary"
            android:textStyle="bold" />
    </LinearLayout>

    <!-- This is the view that I want to be paced on top of the LinearLayout -->
    <ImageView
        android:id="@+id/timetable_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/timetable"
        android:layout_alignEnd="@id/timetable"
        android:contentDescription="@string/notification_description"
        android:src="@drawable/ic_notification_dot" />
</RelativeLayout>

The above code gives this:

The red dot on the top right corner is the ImageView. I want it to be placed on top on the LinearLayout.

question from:https://stackoverflow.com/questions/65856011/how-to-get-an-imageview-on-top-of-a-linearlayout-in-relativelayout

Answer 1

The cause for a problem is an elevation given to Linearlayout

android:stateListAnimator="@animator/item_elevation"

This elevation sets Z-order on top of the Imageview and hence You are seeing an Imageview behind the LinearLayout.

So applying the same elevation on Imageview also would resolve an issue