Create 4 ImageButtons at bottom of the layout

Question

I am trying to display 4 ImageButtons at the bottom of the layout. I am able to get only 3 ImageButtons. The fourth ImageButton is not visible. and here is my code for that.

I am using Relative Layout for to display the application.

<ImageButton
    android:id="@+id/Button1"
    android:layout_weight="1.0"
    android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
    android:longClickable="true"
    android:layout_width="wrap_content"
    android:layout_height="75sp"
    android:background="@android:color/transparent"
    android:src="@drawable/imagebutton2"/>

 <ImageButton
    android:id="@+id/Button2"
    android:layout_gravity="bottom"
    android:layout_toRightOf="@+id/Button1"
    android:layout_width="wrap_content"
    android:layout_height="75sp"
    android:background="@android:color/transparent"
    android:src="@drawable/imagebutton1"
    android:layout_weight="1.0"
    android:layout_marginLeft="2dp"
    android:longClickable="true"/>

 <ImageButton
     android:id="@+id/Button3"
     android:layout_gravity="bottom" 
     android:layout_toRightOf="@+id/Button2"
     android:layout_height="75sp"
     android:layout_width="wrap_content"
     android:layout_weight="1.0"
     android:background="@android:color/transparent"
     android:src="@drawable/imagebutton1"
     android:layout_marginLeft="2dp"
     android:longClickable="true"/>
 <ImageButton
     android:id="@+id/Button4"
     android:layout_gravity="bottom" 
     android:layout_height="75sp"
     android:layout_width="wrap_content"
     android:layout_weight="1.0"
     android:background="@android:color/transparent"
     android:src="@drawable/imagebutton1"
     android:layout_marginLeft="2dp"
     android:longClickable="true"
     android:layout_alignParentRight="true"/>

And show a screenshot and your `RelativeLayout` code, please. I used your code to display those four `ImageButton`s and all of them are displayed. — Piotr Chojnacki, Sep 11 '13 at 07:27

score 1 · Answer 1 · answered Sep 11 '13 at 07:28

Put it in a LinearLayout with weights and align this LinearLayout tot he bottom of the parent like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true" >

    <ImageButton
        android:id="@+id/ib1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/ib2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/ib3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/ib4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

</LinearLayout>

Note that this method will decrease the performance somewhat.

Thanks, But I want the ImageButtons to be placed at the bottom of the layout. (like Tablayout). when the layout is opened in any screen resolution or density, The Image button should be displayed at the bottom of the layout screen. — user2545522, Sep 11 '13 at 07:51
For this, you can put this `LinearLayout` in a separate xml file and you can include it, see http://stackoverflow.com/a/6306836/954474 — overbet13, Sep 11 '13 at 08:12

score 0 · Answer 2 · answered Sep 11 '13 at 07:40

First you need to remove this from your ImageButton attributes if you want to keep using RelativeLayout as their parent layout:

android:layout_weight="1.0"

It is used in LinearLayout, Lint should be giving you a warning about it (invalid layout param in RelativeLayout).

If you want your 4 buttons to show in the bottom of the screen you need to include

android:layout_alignParentBottom="true"

in all 4 ImageButtons, I tried the xml you provide and only the 1st button is showing in the bottom.

And last but not least, if you want your button to have the same size to have some design consistency, I would suggest putting them in a horizontal LinearLayout with

android:layout_alignParentBottom="true"
android:layout_width="fill_parent"

and configure the ImageButtons with

android:layout_width="0dp"
android:layout_weight="1.0"

then include that LinearLayout in your RelativeLayout.

Another thing : since you're using

android:layout_width="wrap_content"

for your ImageButtons, you need to make sure the image is not too wide, otherwise some of your buttons might not be shown on screen because the first one(s) is taking too much space, leaving the last one(s) to the right of your screen.

On a side note, I hope you're not trying to make a iOS-style lower tab bar, this is frowned upon in Android, more info here ...

Have a good one !

Thanks, it worked by using android:layout_alignParentBottom="true" in all the buttons — user2545522, Sep 11 '13 at 09:33
Cool, glad you got it working ! Can you accept the answer if you think answers your question in a satisfying way ? Thanks ! ;-) — 2Dee, Sep 11 '13 at 12:37

Kevin van Mierlo · Answer 3 · 2015-04-29T08:10:03.807

At the last ImageButton you don't have:

android:layout_toRightOf="@+id/Button3"

You will need this if you want it to be at the bottom.

I would also suggest that you remove some of your code:

android:layout_gravity="bottom" 
android:layout_weight="1.0"

This only works in FrameLayout or LinearLayout.

If you want to know for sure every ImageButton is at the bottom of the screen use what you used for the first button:

android:layout_alignParentBottom="true"

score 0 · Answer 4 · answered Sep 11 '13 at 08:00

Like some people say, in the last button, you don't have android:layout_toRightOf = "@id/Button3" so it's going to be in the top of the layout.

Other way to do this that I usually do is:

android:layout_toRightOf = "@id/Button1"
android:layout_alignbottom = @id/Button1"

It's going to align with the bottom of the button1. I do this because sometimes this button isn't align with the other one, depends of the layout.

Create 4 ImageButtons at bottom of the layout

4 Answers4