Android LinearLayout: putting some object with equal space

Question

I need to put some ImageButton with equal space in layout(something like the picture I attached). I checked a lot of similar posts like:

Android: How to make all elements inside LinearLayout same size?

give equal space between ImageViews

What is android:weightSum in android, and how does it work?

However they didn't help me. Using margin and padding didn't solve my problem, because I want to have equal space around ImageButton. It is important for me to keep the space equal in any device. Also I want to set size to my ImageButton. It's a rounded image so the height and width of image should be equal . When I use weightsum, I can't set arbitrary width as layout_width for ImageButton.

Thanks for helping me.

P.S. This is not duplicate post. In the first link which i brought, it is not possible to set equal space. It just put objects next to each other.

This is a layout with 2 ImageButton with arbitrary size:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="info.androidhive.materialdesign.activity.HomeFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"    
android:background="@drawable/background_home">

<ImageButton
    android:layout_width="@dimen/log_guid_image_height"
    android:layout_height="@dimen/log_guid_image_height"
    android:onClick="onLastClick"
    android:id="@+id/btn_menu_last"
    android:background="@drawable/menu_last" />

<ImageButton
    android:layout_width="@dimen/log_guid_image_height"
    android:layout_height="@dimen/log_guid_image_height"
    android:onClick="onAddClick"
    android:id="@+id/btn_menu_add_records"
    android:background="@drawable/menu_add_records" />
</LinearLayout>

I added android:layout_weight="1" to each ImageButton, and set android:layout_width="0px" and it gave me this:

The problem is that how I can add equal space around ImageButton and gave arbitrary size to them!!!

possible duplicate of [Android: How to make all elements inside LinearLayout same size?](http://stackoverflow.com/questions/1177020/android-how-to-make-all-elements-inside-linearlayout-same-size); You didn't read this post. [Its accepted answer](http://stackoverflow.com/a/1177076/3501958) isn't about using margin or padding. — hata, Aug 10 '15 at 10:34
NOOO, I checked that post too. Plz first read question carefully then post comment. I said I need to set arbitrary width and height to ImageButton. — Taher, Aug 10 '15 at 10:35
@Taher I can't get your point... Please post your code as Boss said. — hata, Aug 10 '15 at 10:41
@Taher I got your point, perhaps. I posted an answer. If it may help you. — hata, Aug 10 '15 at 11:26
@Taher Did your problem cleared? If you were disgusted with my comment (possible duplicate), please excuse me. — hata, Aug 13 '15 at 15:12

score 0 · Answer 1 · answered Aug 10 '15 at 10:51

You can use TableLayoutas below:

 <TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left|top"
    android:stretchColumns="*">

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

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:id="@+id/imageButton" />

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageButton2" />

    </TableRow>

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

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageButton3" />

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageButton4" />
    </TableRow>

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

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageButton5" />

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageButton6" />
    </TableRow>
</TableLayout>

You can you use a inner LinearLayout at the place of ImageButton to customize your ImageButton position.

No, It does not add enough space between ImageButtons. – Taher Aug 10 '15 at 11:03 — Taher, Aug 10 '15 at 11:03

score 0 · Answer 2 · answered Aug 10 '15 at 11:24

Try this:-

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_home"
    android:weightSum="1" >

    <ImageView
        android:id="@+id/btn_menu_last"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:onClick="onLastClick"
        android:src="@drawable/menu_last" />

    <ImageView
        android:id="@+id/btn_menu_add_records"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:onClick="onAddClick"
        android:src="@drawable/menu_add_records" />

</LinearLayout>

score 0 · Answer 3 · edited May 23 '17 at 12:14

Just nest LinearLayouts like this:

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

Put ImageButtons inside each LinearLayouts.

Using LinearLayout and getting equal space is essentially the same idea as the past Q&A you read.

And inside these equal spaced cells, you can put ImageButtons with layout_gravity="center" (or gravity="center" with LinearLayout as shown abobe).

score 0 · Answer 4 · answered Aug 10 '15 at 12:27

0

I think for this problem you need use a GridView and specify columnWidth option.

answered Aug 10 '15 at 12:27

Sergey Shustikov

15,377
12
67
119

I don't want to use fixed sizes. – Taher Aug 16 '15 at 09:19
@Taher GridView align items dynamicaly related to you specified settings. – Sergey Shustikov Aug 16 '15 at 11:14
I can use two column GridView but, the problem is that the imageButton inside each column doesn't align center, so I have to use padding!!! I checked some questions but they didn't solve my problem too. – Taher Aug 16 '15 at 11:26

Android LinearLayout: putting some object with equal space

4 Answers4