give equal space between ImageViews

Question

i am trying to add some social images in my app about me screen but i am facing a problem of giving equal spaces between imageviews.

my images looks like this:

see screenshot

but i want to make them look like this:

see screenshot

my code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/about_screen" >

    <LinearLayout
        android:id="@+id/llSocialMediaContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:paddingBottom="@dimen/bottum_padding" >

        <!-- Facebook -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/facebook" />

        <!-- Twitter -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/twitter" />

        <!-- Google+ -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/google" />

        <!-- Linkedin -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/linkedin" />

        <!-- Blog -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/blog" />

        <!-- Youtube -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/youtube" />

        <!-- Email -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/mail" />
    </LinearLayout>

</RelativeLayout>

set margin left in each of your imageviews – Sarthak Mittal Dec 03 '14 at 09:43 — Sarthak Mittal, Dec 03 '14 at 09:43

score 3 · Accepted Answer · answered Dec 03 '14 at 09:42

There you go, modify the code accordingly, learn about android:layout_weight it is usefull in such situations:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

score 0 · Answer 2 · answered Dec 03 '14 at 09:42

0

set layout_margin property of imageview to give space between thos image view.

answered Dec 03 '14 at 09:42

Prashant Jajal

3,469
5
24
38

score 0 · Answer 3 · answered Dec 03 '14 at 09:47

Use <Space/> element in your Linearlayout between the imageviews to add equal space. You can assign the width using the weight property of LinearLayouts to get equally spaced icons in all different form factors.

Example:

<LinearLayout
        android:id="@+id/llSocialMediaContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:paddingBottom="@dimen/bottum_padding" >

        <!-- Facebook -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/facebook" />

        <Space
            android:layout_width="15dp"
            android:layout_height="match_parent"/>
        <!-- Twitter -->

        <ImageView
            android:layout_width="@dimen/social"
            android:layout_height="@dimen/social"
            android:src="@drawable/twitter" />

</LinearLayout>

score 0 · Answer 4 · answered Dec 03 '14 at 10:20

Try

    <ImageView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="@dimen/social"
        android:src="@drawable/facebook" />

For each of the ImageViews. This should give them equal width of the total linearlayout width. I'm not sure if this will stretch your images or not, if it does you might need to set the scale type.

give equal space between ImageViews

4 Answers4

Linked