Align multipile images evenly horizontaly

Question

I have 2 image views in a linear layout like so:

<LinearLayout
    style="@style/home_icon_row"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/ibtn_home_bus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ico_bus_selector" />

    <ImageView
        android:id="@+id/ibtn_home_butoday"
        android:layout_width="wrap_content"
             android:layout_height="wrap_content"
        android:src="@drawable/ico_butoday_selector" />
</LinearLayout>

How can i align the two images so that they are evenly placed within the linear layout. Something similar to "justified text" so that it has equal spacing on the left and right of the image from each other and the border of the screen.

Have to admit, I might think about a "RelativeLayout" for this instead. — trumpetlicks, Feb 18 '14 at 20:55
Possible repeat of: http://stackoverflow.com/questions/3470420/is-it-possible-to-evenly-distribute-buttons-across-the-width-of-an-android-linea — trumpetlicks, Feb 18 '14 at 20:57
you can use spacers before, between and after your imageviews, with a weight of 1. — njzk2, Feb 18 '14 at 21:06
@trumpetlicks This is not a repeat. The question is about buttons. Buttons can change their width. ImageViews should not since it will distorts the image it is displaying — Krimson, Feb 18 '14 at 21:12
@Krimson - depends on what you are doing with the button or image. I have image based buttons that I don't want to distort, or an interface where I don't care if the image is distorted so long as it fits within the interface. — trumpetlicks, Feb 18 '14 at 21:14

Mario Lenci · Answer 1 · 2014-04-30T07:41:40.993

it's not the best solution, but it should work:

<LinearLayout
style="@style/home_icon_row"
android:orientation="horizontal">

<View
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="0dp"
    android:enable="false"
    android:focussable="false"
    android:clickable="false"
 />

<ImageView
    android:id="@+id/ibtn_home_bus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ico_bus_selector" />

<View
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="0dp"
    android:enable="false"
    android:focussable="false"
    android:clickable="false" />

<ImageView
    android:id="@+id/ibtn_home_butoday"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ico_butoday_selector" />

<View
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="0dp"
    android:enable="false"
    android:focussable="false"
    android:clickable="false" />
</LinearLayout>

if this is for some kind of landing it's ok but if it's a hard used layout think about implementing it dinamically via javacode to make it faster.

EDIT: i added 3 attributes ( enable, focussable, clickable ) to disable the placehodler view so that they'll be considered only at measures/layout time, but not during events handling.

Awesome it works! And yes this is for a landing page where I display multiple icons in a grid style. — Krimson, Feb 19 '14 at 01:23
i'm not sure it is better Haresh solution than this one. He adds N linearlayouts, those are containers, while this adds N+1 "empty" views, maybe lighter than containers...? — j.c, Apr 29 '14 at 22:51
yeah with this solution you minimazie both java work and the view hearchy height so that the envets don't have to travel across an other ViewGroup layer. To make it even more light you could also disable the placeholder views so that the events won't never be delivered to them... — Mario Lenci, Apr 30 '14 at 07:38

score 1 · Accepted Answer · answered Feb 19 '14 at 03:57

// try this way here is alternative to use two sub linear layout rather three View.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/home_icon_row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center">
        <ImageView
            android:id="@+id/ibtn_home_bus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ico_bus_selector" />
        </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center">
        <ImageView
            android:id="@+id/ibtn_home_butoday"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ico_butoday_selector" />
    </LinearLayout>

</LinearLayout>

Ahh, this seems to be a more elegant solution! – Krimson Feb 19 '14 at 03:58 — Krimson, Feb 19 '14 at 03:58

score 0 · Answer 3 · answered Feb 18 '14 at 21:03

0

You should be able to get similar effect by using layout_width="0dp", layout_weight="1" and scaleType="centerInside" for both ImageViews.

The only difference is that space between the images can be bigger.

answered Feb 18 '14 at 21:03

Mark

5,466
3
23
24

1

the space in the middle will be twice the space from the borders – njzk2 Feb 18 '14 at 21:06

score 0 · Answer 4 · answered Feb 18 '14 at 22:47

<LinearLayout
    style="@style/home_icon_row"
    android:orientation="horizontal"
    android:padding="@dimen/padding">

    <ImageView
        android:id="@+id/ibtn_home_bus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ico_bus_selector"
        android:layout_marginRight="@dimen/padding"/>

    <ImageView
        android:id="@+id/ibtn_home_butoday"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ico_butoday_selector" />
</LinearLayout>

Align multipile images evenly horizontaly

4 Answers4