ImageView on top of Button

Question

I'm trying to put a small ImageView on top of a button, but somehow it stays under it. I don't understand why as this sort of layout work perfectly with other views.

 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/background_white_clickable"
                android:text="@string/book_now"
                android:id="@+id/but_book_now"
                 />

            <ImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:id="@+id/img_bookmark"
                android:src="@drawable/ic_action_bookmark_full"
                android:layout_marginRight="15dp"
                android:layout_marginEnd="15dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />

        </RelativeLayout>

I've tried with different background for the button, but the image can be seen only when it is transparent. I also tried to replace the ImageView with a colored View, still doesn't work.

Any idea? Thx

EDIT:

There is a confusion in answers I get, I mean to make the ImageView on top of the Button in its Z-order, not y-axis.

EDIT 2 :

I don't want to use an image button, the image is just a "pin" on the button that will appear/disappear. I don't want to use a drawable on the button, I need to place it where I want exactly. Using FrameLayout instead of RelativeLayout doesn't change anything. Using imgView.bringToFront() doesn't work.

EDIT 3 :

The problem doesn't appear on device before Lollipop. On KitKat, the layout works as intended.

Have you tried ImageButton ? http://developer.android.com/reference/android/widget/ImageButton.html — Soham, Mar 26 '15 at 09:59
If you want an image on a button, ImageButton may be a better idea. Anyway, in a relative layout z order is done by order of the views in the file. So if the image is defined second, it should draw on top of the button. We may be having difficulty understanding exactly what you want, pictures of what you have and want would be a good idea. — Gabe Sechan, Mar 26 '15 at 09:59
i also have this issue, button stay on the top of view (z-axis) no matter how deep its on view hierarchy. cant mask it with another view. did you find any solution? issue seem to be only above lollipop(API 21) — Ankit, Jul 03 '15 at 04:49
Found workaround. set the elevation of ImageView to 1dp. check this. http://stackoverflow.com/questions/28105551/wrong-render-order-for-button-when-material-theme-is-applied — Ankit, Jul 03 '15 at 06:12

score 2 · Answer 1 · answered Mar 26 '15 at 10:07

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="80dp" >
<Button
    android:id="@+id/filter"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="7dp"
    android:background="#0000FF"
    android:gravity="center"
    android:paddingBottom="25dp"
    android:paddingTop="25dp"
    android:text="Sort"
    android:textColor="#FFFFFF" />

<ImageView
android:id="@+id/widget_title_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:paddingTop="-10dp"
android:scaleType="fitStart"
android:src="@drawable/ic_launcher" />

    </FrameLayout>

Try it,though I haven't tested it.

score 0 · Answer 2 · answered Mar 26 '15 at 09:58

0

Try

findViewById(R.id.img_bookmark).bringToFront();

answered Mar 26 '15 at 09:58

Karol Żygłowicz

2,442
2
26
35

wird. Try `findViewById(R.id.img_bookmark).invalidate();` after `bringToFront()` if this will not help invalidate the RelativeLayout too. – Karol Żygłowicz Mar 26 '15 at 10:14

score 0 · Answer 3 · answered Mar 26 '15 at 10:03

You need to set the button below the imageview so:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background_white_clickable"
        android:text="@string/book_now                     
        android:id="@+id/but_book_now"
        android:layout_below="@+id/img_bookmark"/>

    <ImageView
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:id="@+id/img_bookmark"
        android:src="@drawable/ic_action_bookmark_full"
        android:layout_marginRight="15dp"
        android:layout_marginEnd="15dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

EDIT

I noticed now that you wanted an image ON TOP of a button not ABOVE so don't care to my code above and use ImageButton:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background_white_clickable"
        android:text="@string/book_now                     
        android:id="@+id/but_book_now"
        android:src="@drawable/ic_action_bookmark_full"/>
</RelativeLayout>

score 0 · Answer 4 · answered Mar 26 '15 at 10:04

Sample code:

<RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/img_bookmark"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/ic_launcher" />

        <Button
            android:id="@+id/but_book_now"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/img_bookmark"
            android:text="Test" />
    </RelativeLayout>

Note :

Edit the text and src, for your needs

score 0 · Answer 5 · answered Mar 26 '15 at 10:09

If you want image view with button :

    <Button
        android:id="@+id/but_book_now"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/ic_launcher"
        android:background="#ff00ff"
        android:text="This is button"
        android:padding="10dp"
        android:textColor="#ffff00" 
        />

</RelativeLayout>

enter image description here

If you want image view without button :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/but_book_now"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:text="This is button"
        android:padding="10dp"
        android:textColor="#ffff00" 
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff00ff"
        android:text="This is button"
        android:padding="10dp"
        android:textColor="#ffff00" 
        />

</LinearLayout>

enter image description here

score 0 · Answer 6 · answered Oct 03 '16 at 21:23

You can define a RelativeLayout as a Button and add ClickEvents on it, add a child View with color or a child ImageView with a PNG, or whatever or both, to put images or color over it.

Example

            <FrameLayout android:id="@+id/buttonTextFillColor"
                android:layout_width="@dimen/mini_icon_width"
                android:layout_height="@dimen/mini_icon_height"
                android:background="@drawable/input_button_background"
                android:clickable="true">
                <View
                    android:id="@+id/colorTextFillColor"
                    android:layout_width="23dp"
                    android:layout_height="23dp"
                    android:background="#FFFFFF"
                    android:layout_gravity="center" />
                <ImageView
                    android:layout_width="23dp"
                    android:layout_height="23dp"
                    android:src="@drawable/button_fill_text"
                    android:layout_gravity="center"/>
            </FrameLayout>

You get a union of elements:

How will you see it?

score -3 · Answer 7 · answered Mar 26 '15 at 09:58

-3

please add the layout_below for Button attribute

answered Mar 26 '15 at 09:58

John Smith

1
1

Could you add more details about the solution you provide? – abarisone Apr 25 '15 at 05:37

ImageView on top of Button

7 Answers7