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"/>

Answer 1

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.

Answer 2

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 !

Answer 3

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"

Answer 4

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.