ScrollView cuts off the top and leaves space at the bottom

Question

When I launch the emulator and enter the screen which uses this code it shows most of the text information but cuts off the top of the screen (cant scroll up) but leaves a bit of space at the bottom.

Here is the code;

    <ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:visibility="visible"
    android:fillViewport="true"
    android:id="@+id/backgroundImage" >

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:padding="10dip" >

     <ImageView
        android:id="@+id/earthSymbolImageView"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:src="@drawable/earthsymbol" />

     <TextView
        android:id="@+id/earth_content1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/earth_title"
        android:gravity="center" 
        android:textColor="#FFFFFF"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/earth_content2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/earth_text" 
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/backButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/back" />

     </LinearLayout>
    </ScrollView>

Does anyone know why would this be happening?

have you tried to remove this android:padding="10dip" and use android:margin="10dip" instead to get the thing done? — QAMAR, Apr 10 '13 at 10:19
Try to remove `android:fillViewport="true"` line in your scrollview and then check. — GrIsHu, Apr 10 '13 at 10:22
http://i46.tinypic.com/2i77nh3.jpg , the picture on the left shows the bottom of the screen and the right one shows the top. — Maynn, Apr 10 '13 at 10:41

DavidR · Answer 1 · 2016-10-28T02:53:21.557

51

This is being caused because of the layout_gravity in your LinearLayout. Since your LinearLayout is inside a ScrollView you are probably just trying to center horizontally (centering vertically inside a ScrollView doesn't make since). Specifying your LinearLayout to center horizontally like this should do the trick:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center_horizontal"
    android:padding="10dip" >

edited Oct 28 '16 at 02:53

answered Sep 27 '13 at 19:59

DavidR

6,622
13
56
70

i had the same problem.. I was using android:layout_gravity="center_vertical" in LinearLayout inside ScrollView. – Vamsi Challa Dec 02 '14 at 11:52
1

Same thing. Linear layout was centered instead of horizontally centered. Thanks! :D This should be the accepted answer. – Jeremy Styers Sep 22 '16 at 01:17
thank you, I thought I would go crazy while trying thousands of attribute combinations – PhilLab Jun 27 '17 at 15:15
2

Why centering vertically in a ScrollView doesn't make sense? When I have my application in portrait mode, everything is fine, everything is visible. My ScrollView consists of a CardView (or FrameLayout, etc.) with the login form. I want that form to be centered vertically when app is in portrait mode and everythink is visible. On the other hand, the CardView doesn't fit on the screen when the app is in the landscape mode, so I want it to scroll. – Maroš Šeleng Oct 07 '18 at 15:18
`android:layout_gravity="center_horizontal"` just worked for me. – M.A.K. Ripon Dec 06 '19 at 15:51

score 26 · Answer 2 · answered Jun 07 '13 at 13:55

I had a the same problem with aHorizontalScrollViewnested inside aScrollView.I had theHorizontalScrollViewgravity set tocenterwhich was causing the problem. Just removing it fixed the issue.

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

<HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <TextView
                android:layout_width="1000dp"
                android:layout_height="1000dp"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="New Text"/>
    </LinearLayout>
</HorizontalScrollView>

This works even if you are not using nested scrollviews. I had a linear layout inside my scrollview and this worked for me. — PFranchise, Oct 01 '13 at 21:18

score 11 · Answer 3 · edited May 23 '17 at 12:10

The best answer I have found and tested that fixes this problem is the one that @hadi gave in this question: no gravity for scrollview. how to make content inside scrollview as center

Resuming the answer:

Put your ScrollView inside a RelativeLayout.
In the ScrollView, set the following:
- android:layout_height="wrap_content"
- android:layout_centerVertical="true"
Put your vertical LinearLayout inside the ScrollView.

The code would be:

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

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true">

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

            ...

        </LinearLayout>
    </ScrollView>
</RelativeLayout>

It seems that this way doesn't take inner view's bottom margin into account. But it is closest to perfect from all I have found since now. — Maroš Šeleng, Oct 07 '18 at 15:24

score 3 · Answer 4 · answered Sep 17 '19 at 06:52

3

Remove layout_gravity from Linear/Relative layout inside Horizontalscroll view, it'll work .

answered Sep 17 '19 at 06:52

Suresh kumar

789
10
13

score 2 · Answer 5 · answered Jul 17 '15 at 10:04

Its quite simple - you just need to move layout_gravity from LinearLayout into your parent container ScrollView:

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:visibility="visible"
    android:fillViewport="true"
    android:id="@+id/backgroundImage" 
    android:layout_gravity="center" >

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dip" >

score 0 · Answer 6 · answered Jan 31 '14 at 11:43

0

In my case the problem was requestFocus of EditText.

In your case their is no EditText so the problem is something other. For those who are having problem of scrollview cuts top edges, Try to remove all requestFocus from all EditText.

answered Jan 31 '14 at 11:43

Vipul Purohit

9,807
6
53
76

score 0 · Answer 7 · answered Dec 04 '18 at 14:28

You must add marginBottom in LinearLayout

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:visibility="visible"
android:fillViewport="true"
android:id="@+id/backgroundImage" >

 <LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:padding="10dip"
android:layout_marginBottom="96dp" >    

 <ImageView
    android:id="@+id/earthSymbolImageView"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:src="@drawable/earthsymbol" />

 <TextView
    android:id="@+id/earth_content1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/earth_title"
    android:gravity="center" 
    android:textColor="#FFFFFF"
    android:textSize="20sp" />

<TextView
    android:id="@+id/earth_content2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/earth_text" 
    android:textColor="#FFFFFF" />

<Button
    android:id="@+id/backButton"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/back" />

 </LinearLayout>
</ScrollView>

score -3 · Answer 8 · answered Apr 10 '13 at 10:26

If you want the TextViews to be scrollable, why don't you put ScrollView around this 2 elements?

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:padding="10dip" >


    <ScrollView>
     <ImageView
        android:id="@+id/earthSymbolImageView"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:src="@drawable/earthsymbol" />

     <TextView
        android:id="@+id/earth_content1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/earth_title"
        android:gravity="center" 
        android:textColor="#FFFFFF"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/earth_content2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/earth_text" 
        android:textColor="#FFFFFF" />

     </ScrollView>

    <Button
        android:id="@+id/backButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/back" />



     </LinearLayout>

I have fixed the problem, the solution was to put ScrollView only around the TextView. — Maynn, Apr 10 '13 at 14:13
You have missed attributes off ScrollView - plus ScrollView cannot have more than on direct decendent — Graeme, Apr 08 '15 at 12:48

ScrollView cuts off the top and leaves space at the bottom

8 Answers8

Linked