How to place a button over an imageview in android?

Question

I have an imageview and I want to place a button for closing/deleting the image from the imageView just like it's done on Tinder profile pics. The problem is that it's always placed behind it not matter what I do.

I have a RelativeLayout as container for the imageview and imagebutton

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

        <ImageButton
            android:id="@+id/close1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_close"
            android:background="@color/white"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true" />

        <ImageView
            android:id="@+id/photo1"
            android:layout_width="match_parent"
            android:layout_height="115dp"
            android:layout_marginHorizontal="5dp"
            android:background="@drawable/rounded_rect_primary"
            android:elevation="5dp"
            android:scaleType="fitXY"
            android:src="@drawable/icon_upload" />
    </RelativeLayout>

I've tried something like this too:

  close1.bringToFront();
    close2.bringToFront();
    close3.bringToFront();

I'd like to understand how it works, what exactly defines what comes in front and behind?

Answer 1

Your button always shown behind the image because Android render the XML code from top to bottom. So your button get rendered first, then it get overlay by image.

You should try to put ImageButton after ImageView. And i recommend you to use ConstraintLayout

It should be like this.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/photo1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/rounded_rect_primary"
        android:scaleType="fitXY"
        android:src="@drawable/icon_upload"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <ImageButton
        android:id="@+id/close1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_close"
        android:background="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>