CODEWITHSUNDEEP
androidandroid-layoutandroid-xml
question
question

Reputation: 223

give equal space between ImageViews

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>

Upvotes: 0

Views: 2210

Answers (4)

dyancat
dyancat

Reputation: 1675

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.

Upvotes: 0

balachandarkm
balachandarkm

Reputation: 855

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>

Upvotes: 0

M-Wajeeh
M-Wajeeh

Reputation: 17284

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>

Upvotes: 3

Prashant Jajal
Prashant Jajal

Reputation: 3627

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

Upvotes: 0

Related Questions