Android ScrollView adds extra padding on top and bottom of child imageview

Question

I have a problem with rendering a ScrollView. Essentially, the layout is fixed header and footer with a scrollview in the middle. The idea is that when the screen keyboard is activated for the content EditText the image can be scrolled if the height of the image is longer than the middle view.

In testing the layout, I've found that on my Android phone (Xperia X10 Android 1.6) there is a whole heap of padding added to the top and bottom of the ImageView.

I'd appreciate any suggestions as to how I can prevent this from happening.

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

    <!-- Header -->
    <RelativeLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF">
        <TextView
            android:text="Share your photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"/>
        <Button
            android:id="@+id/btnStack"
            android:text="Stacks"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>
    <!-- End Header -->


    <!-- Body -->
    <ScrollView
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="5px"
        android:background="#CCCCCC">
        <ImageView
            android:id="@+id/imgPreview"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
    </ScrollView>
    <!-- End Body -->


    <!-- Footer -->
    <RelativeLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_alignParentBottom="true">
        <EditText
            android:id="@+id/caption"
            android:text="Type your caption"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/caption"
            android:background="#CCCCCC">
            <Button
                android:id="@+id/btnUpload"
                android:text="Share"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <Button
                android:id="@+id/btnCancel"
                android:text="Cancel"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
        </LinearLayout>

    </RelativeLayout>
    <!-- End Footer -->

</LinearLayout>

score 37 · Accepted Answer · answered Nov 23 '10 at 11:46

37

I found after some experimentation that adding the following syntax to my java code solved the problem:

    imgPreview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    imgPreview.setAdjustViewBounds(true);

answered Nov 23 '10 at 11:46

Bobby Sciacchitano

851
1
10
19

2

Any explanation to why? – Joshua Pinter Jun 03 '14 at 03:53
I'm getting this issue on a RelativeLayout inside a ScrollView. Putting adjustViewBounds on my xml is not solving it. Is there a cause to this? I noticed that the padding added at the top is the height of the status bar and the padding in the bottom is the same height as the navigation bar – John Ernest Guadalupe Nov 09 '15 at 07:43
@JohnErnestGuadalupe - Set the ScrollView's height to 0dp – Alaa M. Jul 30 '20 at 15:05

score 28 · Answer 2 · answered Apr 21 '11 at 15:22

28

Just adding the following attribute to your ImageView XML description do the job:

android:adjustViewBounds="true"

answered Apr 21 '11 at 15:22

ol_v_er

27,094
6
48
61

1

This helped me with a GridLayout whose ImageView children had extra top and bottom padding. – Satisfakshin Apr 12 '21 at 08:05

score 14 · Answer 3 · edited Jun 19 '14 at 09:32

14

android:fillViewport="true"
android:fadingEdge="none"

Use these properties in the scrollview.

edited Jun 19 '14 at 09:32

bluish

26,356
27
122
180

answered Nov 22 '10 at 10:38

fargath

7,844
6
24
36

Hi there, tried it out but neither seemed to make any difference. We're not talking about a few pixels. It's a few hundred. Even if I specify the pixel width and height of the ImageView it still doesn't work correctly. – Bobby Sciacchitano Nov 23 '10 at 10:49
The Best Answer! `fillViewport` does the job and allowing the child layout to take up the requested space. – sud007 Jun 19 '17 at 11:52

score 2 · Answer 4 · answered Feb 14 '16 at 18:24

you can set marginTop and bottom to a negative number for the child like this

<HorizontalScrollView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#ffffff"
        android:overScrollMode="never"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_marginBottom="-10dp"
            android:layout_marginTop="-10dp">


    </LinearLayout>

</HorizontalScrollView>

Android ScrollView adds extra padding on top and bottom of child imageview

4 Answers4

Linked