Images height too tall

Question

I am trying to setup a section of a screen with 4 images around each other but there is huge white space between them as per image example:

I would like them all right next to each other. Below is the XML I am using:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
          android:orientation="vertical">

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

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1"
        android:src="@drawable/test1"
        android:layout_weight="1"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:src="@drawable/test"
        android:layout_weight="1"/>

</LinearLayout>

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

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        android:src="@drawable/test1"
        android:layout_weight="1"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/imageView4"
        android:src="@drawable/test"
        android:layout_weight="1"/>
</LinearLayout>

I am also trying to get them to the top of the screen but that white space is preventing that.

The images you see dont have any white space at all, the edge of the colors are the edge of the image?

Thanks

Check out Images they may have transparent background with height and width more than real picture inside of it. — Shvet, Jul 31 '15 at 07:35
Remove default padding and margin and set them to 0 to remove white space. — SJSSoft, Jul 31 '15 at 07:36
android:padding="0dp" android:layout_marginLeft="-5dip" android:layout_marginRight="-5dip" android:layout_marginTop="-5dip" android:layout_marginBottom="-5dip" or replace -5dip with 0 — SJSSoft, Jul 31 '15 at 07:41

score 12 · Accepted Answer · answered Jul 31 '15 at 07:50

You need to set the scaleType to centerInside and the adjustViewBounds to true like this: (adjust view bounds should get rid of the space you don't want.)

   <ImageView
        ...
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:adjustViewBounds="true" />

score 4 · Answer 2 · edited May 23 '17 at 12:19

4

@x10sion:For your information,

Why should i add this

android:scaleType="centerInside" is going to center the image inside the container, rather than making the edges match exactly. Reference

android:adjustViewBounds="true" this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 31 '15 at 09:29

IntelliJ Amiya

74,896
15
165
198

1

Thanks for this! appreciate it – Stillie Jul 31 '15 at 10:08

score 1 · Answer 3 · answered Jul 31 '15 at 07:36

1

This: android:layout_height="wrap_content" should be like this instead: android:layout_height="fill_parent", or android:layout_height="match_parent", on your four ImageViews.

answered Jul 31 '15 at 07:36

Nick D.

47
2

1

Thanks for this but it didnt work. I used @Jens answer which did. – Stillie Jul 31 '15 at 07:52

Images height too tall

3 Answers3

Why should i add this