Getting the margin for two imageviews in android

Question

I have two imageviews which has to be aligned side by side. So, I used linearlayout with horizontal orientation and having weight same for each imageview width wise. This works fine, but I need the separation between two imageviews to be visible. So, I kept android:padding but it doesn't seem to have any affect still. For the better idea on my problem, please refer the picture I pasted below.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dip"
    android:paddingRight="10dip"
    >

  <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:padding="5dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:background="@drawable/imagebgd"
        android:src="@drawable/icon" />
  <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:padding = "5dp"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/imagebgd"
        android:src="@drawable/icon" />
  </LinearLayout>

enter image description here

As you can see here, there is no separation visible.

However, I do have another problem. I kept nine patch image as background(orange color) for the imageview to have border for the imageview, but the border's padding changes from one image to other i.e., border thickness around the imageview changes, but I want it to have stable thickness irrespective of the images. Can someone please help me on these things?

Note: I know the hacks like surrounding each imageview again by a linearlayout or Keeping an empty view between imageviews. But I just want to achieve it with preferred things. Because it works for other views when I add padding, why not for these?

score 2 · Answer 1 · edited May 23 '17 at 11:56

replace android:padding with android:layout_margin

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dip"
    android:paddingRight="10dip"
    >

  <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:background="@drawable/imagebgd"
        android:src="@drawable/icon" />
  <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:layout_margin = "5dp"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:background="@drawable/imagebgd"
        android:src="@drawable/icon" />
  </LinearLayout>

Padding is the space inside the border, between the border and the actual view's content.

Margins are the spaces outside the border, between the border and the other elements next to this view.

Check this answer on learning the difference between padding and margins

Thanks +1, it worked. Can you please answer my second question regarding the thickness of the background which is 9-patch? — rick, Jan 28 '13 at 05:27
You have given the 2 `imageviews` with `layout_weight`. So the `imageview` will take equal widths of the screen and it will result in different borders on different sides. — Renjith, Jan 28 '13 at 05:32
Then what should I do to have equal thickness for the border even for different images? Just like it has to be like a photo frame in which images can be expanded to get fit in that frame, but the frame should not change. Please suggest. — rick, Jan 28 '13 at 05:36
I think you have to put two `linearlayouts` with `layout_weight` and put the `imageviews` inside them and give proper width and height. — Renjith, Jan 28 '13 at 05:45

RobinHood · Answer 2 · 2013-01-28T05:34:24.300

1

Give margin instead padding to your imageview.

use

android:layout_margin="5dp"

Instead

android:padding="5dp"

Simple difference:

Padding effect inside of your view.
Margin effect outside of your view.

edited Jan 28 '13 at 05:34

answered Jan 28 '13 at 05:26

RobinHood

10,897
4
48
97

Thanks +1, it worked with below answer, but I can see your answer is also same. Can you please answer my second question regarding the thickness of the background which is 9-patch? – rick Jan 28 '13 at 05:30

score 0 · Answer 3 · answered Jan 28 '13 at 05:22

0

Try this,

Add View you will get space between two image

<View  android:layout_width="10dip"
android:layout_height="wrap_content"/>

And also add some background for this View

answered Jan 28 '13 at 05:22

MuraliGanesan

3,233
2
16
22

Getting the margin for two imageviews in android

3 Answers3