Prevent button press state overlaying an imageview

Question

I have the following button state

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

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        android:adjustViewBounds="true"
                        android:src="@drawable/ribbon_popular" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="top|start"
                        android:layout_margin="10dp"
                        android:background="@drawable/roundedcorners_green"
                        android:textAlignment="center"
                        android:textAllCaps="true"
                        android:textColor="@color/white_color"
                        android:textSize="22sp" />
</RelativeLayout>

and in code:

image.bringToFront();
ViewCompat.setElevation(image, 6);

which results in this view:

However when the button is pressed, it overlays the "POPULAR" badge like so:

I have tried adding the following code to try and bring the image forward when the button is in a pressed state, but it doesnt work for a press and hold state and only sometimes for a click event:

button.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            if(motionEvent.getAction() == MotionEvent.ACTION_DOWN ||
                    motionEvent.getAction() == MotionEvent.ACTION_BUTTON_PRESS ||
                    motionEvent.getAction() == MotionEvent.ACTION_HOVER_ENTER) {
               popularBadge.bringToFront();
               ViewCompat.setElevation(popularBadge, 12);
               parentLayout.invalidate();

            }
            return false;
        }
    });

Any idea how i can make the image view always be above the button without having to use a FrameLayout?

Thanks in advance

Answer 1

Try this : Place imageview below button , i guess it will be fixed :

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



                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="top|start"
                        android:layout_margin="10dp"
                         android:stateListAnimator="@null"
                        android:background="@drawable/roundedcorners_green"
                        android:textAlignment="center"
                        android:textAllCaps="true"
                        android:textColor="@color/white_color"
                        android:textSize="22sp" />

                       <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        android:adjustViewBounds="true"
                        android:src="@drawable/ribbon_popular" />
</RelativeLayout>

This answer is upon the property of z-index. If it solves do read about it.