Search code examples
androidandroid-layoutandroid-linearlayoutandroid-imageviewandroid-xml

How to prevent shrinking ImageViews in LinearLayout?


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

enter image description here

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:

enter image description here

...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:

enter image description here


Solution

  • 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.