Place TextView on top of an image view that has an elevation

Question

I have researched this extensively on stack overflow but found no answer that works for me. What I have is an ImageView that has an elevation (for a shadow effect) on top of that I want a TextView. I am going to repeat this for a number of elements in a GridLayout, hence bringToFront() does not look like a good option. Additionally, I don't want the TextView to have a shadow, hence the translationZ property of xml doesn't work either. Finally, I have tried using a FrameLayout for these two elements but I think because of the elevation property on the Imageview, the TextView still remains in the back. Following is my code

<android.support.v7.widget.CardView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_columnWeight="1"
    android:layout_rowWeight="2"
    android:layout_column="0"
    android:layout_row="0"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    app:cardElevation="8dp"
    app:cardCornerRadius="8dp">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_gravity="center">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:gravity="center">
            <TextView
                android:id="@+id/bids_number"
                android:background="@drawable/circulerimageblue"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="10"
                android:layout_marginBottom="-7dp"
                android:paddingLeft="4dp"
                android:paddingRight="4dp"
                android:paddingTop="1dp"
                android:paddingBottom="1dp"
                android:textStyle="normal|bold"
                android:textColor="@color/colorSecondary"
                android:layout_gravity="top|right" />
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:elevation="6dp"
                android:id="@+id/bids_icon"
                android:background="@drawable/circulerimageunselected"
                android:layout_marginBottom="6dp"
                android:src="@drawable/icon_profile"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Get Bids"
                android:textAppearance="@style/TextAppearance.AppCompat"
                android:textStyle="normal|bold"
                android:fontFamily="sans-serif" />
        </LinearLayout>

    </RelativeLayout>

</android.support.v7.widget.CardView>

This is a picture of what I am trying to achieve

Answer 1

Try This Code

Change your name and icon and color

<android.support.v7.widget.CardView android:layout_width="match_parent"
    xmlns`enter code here`:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:padding="@dimen/dp_10"
    app:cardCornerRadius="@dimen/dp_10"
    android:layout_margin="@dimen/dp_10"
    app:cardElevation="@dimen/dp_10"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="#fff"
        android:layout_margin="@dimen/dp_1"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:gravity="center"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">


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

                <ImageView
                    android:layout_width="@dimen/dp_65"
                    android:layout_marginTop="@dimen/dp_10"
                    android:gravity="center"
                    android:background="@drawable/circulerimageunselected"
                    android:elevation="@dimen/dp_2"
                    app:srcCompat="@drawable/ic_close"
                    android:padding="@dimen/dp_10"
                    android:layout_gravity="center"
                    android:layout_height="@dimen/dp_65" />

            </RelativeLayout>

            <TextView
                android:textStyle="bold"
                android:textColor="@color/white"
                android:layout_marginLeft="@dimen/dp_40"
                android:text="10"
                android:textSize="@dimen/sp_15"
                android:gravity="center"
                android:background="@drawable/tile_bg"
                android:layout_width="30dp"
                android:layout_height="30dp" />

        </RelativeLayout>

        <TextView
            android:textSize="@dimen/dp_20"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_marginBottom="@dimen/dp_20"
            android:text="Get Birds"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


    </LinearLayout>
</android.support.v7.widget.CardView>

Answer 2

NOTE : Please don't use negative margin

Try this USE CoordinatorLayout

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_columnWeight="1"
    android:layout_marginBottom="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:layout_row="0"
    android:layout_rowWeight="2"
    app:cardCornerRadius="8dp"
    app:cardElevation="8dp">


    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <LinearLayout
            android:id="@+id/topPanel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:orientation="vertical">


            <ImageView
                android:id="@+id/bids_icon"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="6dp"
                android:adjustViewBounds="true"
                android:elevation="6dp"
                android:scaleType="fitXY"
                android:src="@drawable/kid" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Get Bids"
                android:textAppearance="@style/TextAppearance.AppCompat"
                android:textStyle="normal|bold" />

        </LinearLayout>

        <TextView
            android:layout_width="20dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPink"
            android:text="10"
            android:textStyle="normal|bold"
            app:layout_anchor="@+id/bids_icon"
            app:layout_anchorGravity="right" />


    </android.support.design.widget.CoordinatorLayout>

</android.support.v7.widget.CardView>

OUTPUT

Answer 3

Try using a constraint layout or just the relative layout inside the card view, you don't need the linear layout, the relative layout should easily be able to handle what your're doing. As for the shadow trying this

Create a file shadow_rect.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="0dp"/>
        </shape>
    </item>
    <item android:right="1dp"  android:bottom="2dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="1dp"/>
        </shape>
    </item>

</layer-list>

Then apply it to the image background, you can ofcourse tinker with the above drawable to get the required shadow type.

That should handle the illusion of elevation by giving it a shadow so you don't need elevation anymore as that's an API 21+ property.