Put a button over an ImageView

Question

I'm newbie in Android.

I would like to know if it's possible to put a button or another component over an ImageView. I've tried setting the image as a background image of a LinearLayout, but when I change between landscape and portrait mode, the image porportions are changed.

Thanks a lot.

ConstraintLayout is the answer. It has properties like layout_constraintEnd_toEndOf or layout_constraintBottom_toTopOf that let you set elements inside of another elements with margins. There are answers on this post that teach how to use ConstraintLayout, scroll down for it. — Windgate, Jun 15 '22 at 13:58

score 44 · Accepted Answer · answered Sep 05 '11 at 10:11

44

Don't put the image as a background, you don't have any control on how the image is scaled. Instead, create a RelativeLayout, and put an ImageView as one of the child, and you can place anything (buttons etc) as other RelativeLayout children.

<RelativeLayout ...>
    <ImageView (your image) ...>
    <Button (the button you want) ... />
</RelativeLayout>

answered Sep 05 '11 at 10:11

Randy Sugianto 'Yuku'

71,383
57
178
228

1

Thanks a lot. I hope I could improve my android knowledge and help so many others, – gutiory Sep 05 '11 at 17:50
3

It seems like the order in the resource matters, putting the ImageView after the Button did not work for me, but the above order did. – EtienneSky Mar 16 '12 at 04:52

score 4 · Answer 2 · answered Sep 05 '11 at 10:15

Try this code... it's Help you....

<?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical"   
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent">  

 <ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/imageviewMain"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:src="Path "
/>
<Button android:id="@+id/but2" 
     android:layout_width="wrap_content" 
         android:layout_height="wrap_content" />
</RelativeLayout>

Try this Code .....

In that give paramater in button to set your Button Position....

android:layout_margin or android:layout_alignParent

And also give Path of Image....

score 3 · Answer 3 · answered Sep 05 '11 at 14:22

3

There is another way to do it,http://www.curious-creature.org/2009/03/01/android-layout-tricks-3-optimize-part-1/

Thank you.

answered Sep 05 '11 at 14:22

Sameer Z.

3,265
9
48
72

score 2 · Answer 4 · answered Sep 30 '19 at 11:24

2

This is easy using the ConstraintLayout.

Set the constraints of the Button to the ImageView.
Drag the Button anywhere you want over the ImageView to position it.
XML code will be autogenerated.

answered Sep 30 '19 at 11:24

Yogesh Umesh Vaity

41,009
21
145
105

score 2 · Answer 5 · answered Sep 05 '11 at 10:26

2

The simpliest way to do it is to use a FrameLayout.

answered Sep 05 '11 at 10:26

Cyril Mottier

1,614
1
12
10

score 1 · Answer 6 · answered Apr 28 '22 at 19:31

For those using Constraint Layout: Just use an ImageView and add its constraints from all the four side to Parent and than add the other views as well.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardPreventCornerOverlap="true"
    app:contentPadding="5dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="5dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/food"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageButton
                android:id="@+id/imagebtn_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_share_24"
                app:layout_constraintTop_toTopOf="parent"
                android:padding="15dp"
                app:layout_constraintStart_toStartOf="parent" />

            <ImageButton
                android:id="@+id/imagebtn_call"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_call_24"
                android:padding="15dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

            <TextView
                android:id="@+id/expdate_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/test_date"
                android:background="#E2E3E4"
                android:layout_marginBottom="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toTopOf="@+id/imagebtn_address"
                android:layout_marginEnd="30dp"
                android:padding="5dp"/>

            <TextView
                android:id="@+id/title_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginBottom="5dp"
                android:background="#E2E3E4"
                android:padding="5dp"
                android:textSize="18sp"
                android:text="@string/test_foodname"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/imagebtn_address"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent" />

            <ImageButton
                android:id="@+id/imagebtn_address"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_location_on_24"
                android:padding="15dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Note: Replace the drawables added with your own.

Your solution is the best of this post, I'm sorry there are other answers with more up votes, thanks dude — Windgate, Jun 15 '22 at 13:55

Put a button over an ImageView

6 Answers6

Linked