Home » Android » android – Prevent ImageView from pushing views offscreen

android – Prevent ImageView from pushing views offscreen

Posted by: admin June 15, 2020 Leave a comment

Questions:

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: http://i.imgur.com/qN5aT.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>

http://i.imgur.com/m3msH.png
(Sorry not enough reputation to post the actual picture)

How to&Answers:

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>

Answer:

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"

Answer:

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>

Answer:

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.