Reputation: 1135

Put a button over an ImageView

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.

Upvotes: 21

Answers (6)

Prajwal Waingankar

Reputation: 2710

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.

Upvotes: 1

Yogesh Umesh Vaity

Reputation: 48099

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.

Upvotes: 2

Sameer Zinzuwadia

Reputation: 3285

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

Thank you.

Upvotes: 3

Cyril Mottier

Reputation: 1624

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

Upvotes: 2

Mitesh Jain

Reputation: 673

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....

Upvotes: 4

Randy Sugianto 'Yuku'

Reputation: 73365

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>

Upvotes: 44

Put a button over an ImageView

Answers (6)

Related Questions