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?

You could use a FrameLayout for that. Take a look at https://stackoverflow.com/questions/4182486/placing-overlappingz-index-a-view-above-another-view-in-android — Josip Domazet, Aug 21 '19 at 00:48
I figure it out. The problem was the imageview had en elevation and imagebutton didn't. I simple hadd to add to imagebutton an elevation higher than the imageview — ALEXANDRE CHAGAS VIEIRA JUNIOR, Aug 21 '19 at 01:59
@ALEXANDRECHAGASVIEIRAJUNIOR if you have figured it out, you can post your answer so that your question doesn't stay unanswered. — musooff, Aug 21 '19 at 02:37

score 0 · Answer 1 · answered Aug 21 '19 at 02:40

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>

How to place a button over an imageview in android?

1 Answers1