How to prevent shrinking ImageViews in LinearLayout?

Question

I have a layout in an android app that is misbehaving. Right now, it looks like this:

The idea is to have 3 images with their reflections as separate images lined up below them. If I just have the images (only the first nested LinearLayout, shown below) then the images show up just fine, in their native resolution and evenly spaced apart. But with the second linearlayout added in (the reflections), the images are shown much smaller than they should be.

Those reflection images in the pic are showing up the right size, and the images should be just as wide as the reflections, natively. If they were showing up properly, then the top of the images to the bottom of the reflections should fill the height of the screen. But they're not. I've tried lots of combinations of layout_width and layout_height on the imageviews and the linearlayouts (also different scaleTypes), but nothing is preventing the images from shrinking for some reason. Can anyone suggest why?

<?xml version="1.0" encoding="utf-8"?>

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

    <!-- IMAGES -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3">

        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"" />

        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

    </LinearLayout>

    <!-- IMAGE REFLECTIONS -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3">

        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"" />

        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

    </LinearLayout>

</LinearLayout>

Also, I'm not dead set on using LinearLayouts, so alternatives ideas are welcome.

UPDATE:
This is how it looks with a background color added to each ImageView:

...and this is how it should actually look. This is accomplished by setting the layout_width and layout_height of each poster ImageView to 333px and 500px, respectively. But I don't want to do this. It causes horizontal alignment problems between the posters and reflections when there's less than 3 images to show on the screen:

Answer 1

If your ImageView displays a placeholder image (such as in an android:src property) before the movie poster images load, a possible reason for the shrinkage is that your placeholder image does not have the same aspect ratio as your movie poster images.

There seems to be a bug in ImageView where sometimes images are resized to the same aspect ratio as the placeholder image.

Try resizing your placeholder image to the same aspect ratio as your movie poster images.

Answer 2

I couldn't find a way to make this work, so I ended up just explicitly setting the width and height of the posters to their pixel values. I actually also ended up going with a different, simpler layout entirely, one with a RelativeLayout as the root containing the six ImageViews (3 posters and their reflections). The poster shrinking effect still occurred though.

If anyone knows how to get around this problem, please let me know.

Answer 3

I post this as a second answer, because i assume the error on a different part: Your screen height might not be high enough accommodate the normal images + reflections, therefore the first row is squashed and images scaled down to match the aspect ratio. Try to wrap it in a ScrollView, this should fix the issue, but might not be the result you want. Here is the code:

Note that i changed the layout_height of your wrapping LinearLayout to wrap_content

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

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

        <!-- IMAGES -->
        <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:weightSum="3">

            <ImageView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"/>

            <ImageView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"/>

            <ImageView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"/>

        </LinearLayout>

        <!-- IMAGE REFLECTIONS -->
        <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:weightSum="3">

            <ImageView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"/>

            <ImageView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"/>

            <ImageView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"/>

        </LinearLayout>

    </LinearLayout>
</ScrollView>

Answer 4

• change the layout_width of all ImageViews to 0px, such that:

  reason is, android won't be looking into layout_weight if layout_width is something other than 0 (This depends on the android version)

• Besides that, make sure your images are big enough (pixel wise), if you can't guarantee that, you might have to extend ImageView according to your needs:

  1. You have a fixed aspect ratio (easiest to write)

     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(
                 (int) (MeasureSpec.getSize(widthMeasureSpec) * ASPECT_RATIO),
                 MeasureSpec.EXACTLY));
     }
     

  2. You want the image to adjust it's height accoring to your source-image's aspectratio (start looking here)

• set a scaleType according to your decision above (link)

Answer 5

Try this just set the width of your ImageView to 0dp this will work. and also go through this link LinearLayout to build a row of elements. its very useful for further use.

<!-- IMAGES -->
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="3">

    <ImageView 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageView 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"" />

    <ImageView 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

</LinearLayout>

<!-- IMAGE REFLECTIONS -->
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="3">

    <ImageView 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageView 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"" />

    <ImageView 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

</LinearLayout>

Answer 6

Try doing this, I just added weight to the parent linearlayouts also...

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

    <!-- IMAGES -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

    <!-- IMAGE REFLECTIONS -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>