Prevent ImageView from pushing views offscreen

Question

I have a linear layout which contains an imageview and another linear layout which is a bottom bar on the screen. I use the bottom bar elsewhere in my project and I dont think it is the problem.

The problem is that the imageview takes up the entire screen. The image itself doesn't, but the view does. I can't seem to figure this out. As you can see in my xml, I am not using fill_parent for the image view and I have tried every possible scaleType for the image.

Any suggestions? Also if it helps I am building to Android API 8

Edit: I have changed the xml below so that you can use exactly what I have written. (This is the image that I use in the image view: https://i.stack.imgur.com/lkz3l.jpg)

<?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="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:src="@drawable/quote_sample_img" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:orientation="vertical" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="This is text" />
    </LinearLayout>

</LinearLayout>

https://i.stack.imgur.com/qksmJ.png (Sorry not enough reputation to post the actual picture)

Have you tried using the layout_weight property to set a fixed ration between the amount of space between the imageview layout and the second linearlayout? how did it go? — pogo2065, Mar 13 '12 at 02:43
so that kind of worked but not in the way I would expect. I just played around with a whole bunch of parameters and when I gave the image a layout_weight=".8" and the linearlayout and a layout_weight of ".2" then the bottom bar appeared. The weird thing is the more weight I gave the linearlayout, the less it appeared. That makes no sense to me. Any idea why this would occur? — amc6, Mar 13 '12 at 03:08
Im worried about going forward using this, even though it seems to work, because I have to add several more views, and I dont know if it will keep working or whether it will work on multiple screens — amc6, Mar 13 '12 at 03:13
hmmm. is there any way to upload your entire project? i did try to get that main xml code to work in a new eclipse android porject, but i just kept getting errors that i couldnt fix (im new to this stuff too...). if i can see your source and open that, then i might be able to fix it. — pogo2065, Mar 13 '12 at 03:16
Yeah the main thing is something I've created elsewhere in my project. I edited my post just know though to remove any dependencies. You should be able to use that and see the problem. And thanks for the help. — amc6, Mar 13 '12 at 03:33
Ok. i just tested this out using a brand new test project and wrote this code myself. Look and see if it works. How can i post a huge chunk of code without quadruple-spacing all of it... :/ — pogo2065, Mar 13 '12 at 16:43

score 12 · Accepted Answer · answered Mar 13 '12 at 19:06

Things seems to work if android:layout_weight="1.0" is added to the ImageView.

(I am unsure about what exactly is happening and in what order in the layout algorithm so can not explain why.)

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:scaleType="fitStart"
        android:src="@drawable/quote_sample_img" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:orientation="vertical" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="This is text" />
    </LinearLayout>

</LinearLayout>

yeah that fixes it, but it still doesn't make any sense to me. Shouldn't a layout_weight of 1 make the imageview as big as possible, not smaller? — amc6, Mar 15 '12 at 02:40
A layout_weight set to 1.0 is not always the same as saying that view will be as big as possible. It depends on what weight we assign to the other views in the design. Check out this post for more details http://stackoverflow.com/questions/3995825/what-does-androidlayout-weight-mean — HenrikS, Mar 15 '12 at 04:23
That is an hour of my life gone because this does not make sense! — Recycled Steel, Oct 17 '16 at 10:51

score 2 · Answer 2 · answered Apr 03 '12 at 08:39

It's the wrap_content in the image - the source file is probably too tall.

Use this in your ImageView to cause the image area to reset to the image's new size after scaling:

android:adjustViewBounds="true"

I'd also change the height of the ImageView so it fills the screen and forces your bar to always be on the bottom:

android:layout_height="0dip" // faster than match_parent for weight
android:layout_weight="1.0"

score 0 · Answer 3 · answered Mar 13 '12 at 03:58

I think the issue might be that the image you used is larger than the screen, so that ImageView has its height set to the height of the available space to best fit the image, leaving no room for anything else.

Additionally, if you want to always have the bottom bar visible, it's better to use a RelativeLayout instead like so:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Main" 
    android:orientation="vertical" >
    <LinearLayout   
        android:id="@+id/bottom_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" >
        <include layout="@layout/browse_bottom_bar" />
    </LinearLayout>

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/bottom_bar"
        android:src="@drawable/quote_sample_img" />
</RelativeLayout>

I was using the relativelayout earlier, but I initially thought that I was improperly using it and causing the problem I posted about. I switched to a LinearLayout and the problem persisted so I posted that. I'll switch back later. You are right that the source image is bigger than the screen initially until it is resized. But after resizing the imageview still takes up the whole screen http://i.imgur.com/m3msH.png — amc6, Mar 13 '12 at 04:09

score 0 · Answer 4 · edited May 23 '17 at 12:16

0

I have a very similar issue, posted at https://stackoverflow.com/questions/9765401/imageview-with-adjustviewbounds-seems-to-ignore-following-elements

It seems that the ImageView does NOT shrink after scaling the image UNLESS you specify adjustviewbounds="true".

But, as you can see from my own post that's not the full answer: the imageview may still push items below off the display, or intrude into their space if the image is too large, which I'm working on trying to fix.

edited May 23 '17 at 12:16

Community

1
1

answered Mar 19 '12 at 05:39

Ian

1,507
3
21
36

Kai's post below contains what seems to be the missing link... declare the fixed footer first, THEN the top section ending with the imageview. Heaven help you if your layout is more complicated that that... – Ian Mar 19 '12 at 07:01

Prevent ImageView from pushing views offscreen

4 Answers4