Android: Placing imageButton over a Button

Question

I would like to place 2 small icons (with actions) over a big Button that take the 1/3 of the screen. The 2 icons and the button have to support actions when we click on them. I'm pretty sure I have to use imageButton for the icons. However I can't find any way to keep the icons (imageButton) on top of the button.

Here is my code:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp">

    <ImageButton
        android:id="@+id/icon1"
        android:src="@drawable/ic1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:contentDescription="@string/ic1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action1"/>

    <ImageButton
        android:id="@+id/icon2"
        android:src="@drawable/ic2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"           
        android:contentDescription="@string/ic2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action2"/>

    <com.myapp.CustomViews.myButton
        android:id="@+id/big_button1"
        android:text="@string/text_big_button1"
        android:background="@drawable/changing_button1"
        android:textColor="@color/white"
        android:layout_height="match_parent"
        android:textSize="@dimen/font_size_buttons"
        android:layout_width="match_parent"
        android:gravity="center"
        android:textAllCaps="false"
        android:capitalize="none"
        android:onClick="bigAction1"/>
</RelativeLayout>

The "@drawable/changing_button1" on the big Button allows me to put one color for the button and a different one when focused or pressed.

I tried so many different things and I couldn't find a way while I'm sure there is a simple solution. The icons remain hidden behind the big Button.

Thank you for your help!

`I'm pretty sure I have to use imageButton for the icons` You can also use ImageViews or TextViews. It's jut to find the right trick to arrange your views in the RelativeLayout. — Phantômaxx, Sep 17 '15 at 13:11
I could use ImageViews for the icons? And they can still have `android:onClick="action2"` ? And it would work? — J.M., Sep 17 '15 at 13:13
Sure. I often use ImageViews or TextViews as if they were Buttons. Just add the `android:clickable="true"` attribute. — Phantômaxx, Sep 17 '15 at 13:14
But isn't there a problem with the elevation? Or the background attributes in my case? — J.M., Sep 17 '15 at 13:15
Now, there's an EASY trick to do what you want. First place a dummy generic View (0dp in height and 0dp in width, invisible). And set it to the center (horizontal or both). Then place the other Views around it (to left, to right or to bottom) - And you're done! — Phantômaxx, Sep 17 '15 at 13:17
I see. Like suggested here? http://stackoverflow.com/a/28980966/5175297 — J.M., Sep 17 '15 at 13:22
Yes, that's the general concept. Just adapt it to your needs. — Phantômaxx, Sep 17 '15 at 13:25
Thank you very much. I'm going to try this and I will post the answer if it worked :) — J.M., Sep 17 '15 at 13:37

Nguyen Quang Anh · Answer 1 · 2015-09-17T13:43:42.097

0

How about changing order in the layout ? Place your Button widget on top, then declare 2 icons after that ?

You should add android:translationZ="5dip" for the 2 imageButton. It works (you should run and see, it didn't appear so on the IDE)

edited Sep 17 '15 at 13:43

answered Sep 17 '15 at 13:15

Nguyen Quang Anh

315
1
3
12

You should add android:translationZ="5dip" for the 2 imageButton. It works (you should run and see, it didn't appear so on the IDE) – Nguyen Quang Anh Sep 17 '15 at 13:43
Yes but `android:translationZ` only works from API 21, and I need a lower one... :( Thank you very much though. – J.M. Sep 20 '15 at 17:59

score 0 · Answer 2 · answered Sep 17 '15 at 13:24

You could use FrameLayout to overlay views. For example:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp">

    <com.myapp.CustomViews.myButton
        android:layout_gravitiy="center"
        .../>

    <ImageButton
        android:layout_gravitiy="left|center_vertical"
        .../>

    <ImageButton
        android:layout_gravitiy="right|center_vertical"  
        .../>

</FrameLayout>

Ridcully · Answer 3 · 2015-09-17T13:39:43.540

Here is a slightly modified version of your layout, which works fine.

I replaced all your custom stuff with plain android and standard buttons, and moved the big button up in the layout, because if it is at the bottom, it has a higher z-index and overlays the two small buttons.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <Button
        android:id="@+id/big_button1"
        android:text="BIG BUTTON"
        android:background="@android:color/holo_blue_dark"
        android:textColor="@color/white"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:gravity="center"
        android:textAllCaps="false"
        android:capitalize="none"
        android:onClick="bigAction1"/>    

        <Button
            android:id="@+id/icon1"
            android:text="BT1"
            android:background="@android:color/holo_red_dark"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="action1"/>

        <Button
            android:id="@+id/icon2"
            android:text="BT2"
            android:background="@android:color/holo_green_dark"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="action2"/>

</RelativeLayout>

score 0 · Accepted Answer · answered Sep 26 '15 at 18:31

I finally found a way to do it. The solution is to use the RelativeLayout as a button and replace the Button by a simple TextView:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp"
    android:background="@drawable/custom_button_changing_color"
    android:clickable="true"
    android:focusable="true"
    android:id="@+id/button_layout"
    android:onClick="bigAction1">

    <TextView
        android:id="@+id/text_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/text"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:textColor="@color/white"
        android:textSize="@dimen/font_size_buttons"
        android:textAllCaps="false"
        android:background="@color/transparent"/>

    <ImageButton
        android:id="@+id/icon1"
        android:src="@drawable/ic1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"           
        android:contentDescription="@string/ic1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action2"/>

    <ImageButton
        android:id="@+id/icon2"
        android:src="@drawable/ic2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"           
        android:contentDescription="@string/ic2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action3"/>
</RelativeLayout>

I hope this helps! :)

Android: Placing imageButton over a Button

4 Answers4