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?

Articulation

If possible, Upload the screenshot with the Question. – Mcfadden

have you tried to remove this android:padding="10dip" and use android:margin="10dip" instead to get the thing done? – Bookbinding

Try to remove android:fillViewport="true" line in your scrollview and then check. – Duplessismornay

i46.tinypic.com/2i77nh3.jpg , the picture on the left shows the bottom of the screen and the right one shows the top. – Articulation

Answer 1

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" >

Purpose

i had the same problem.. I was using android:layout_gravity="center_vertical" in LinearLayout inside ScrollView. – Sweetmeat

Same thing. Linear layout was centered instead of horizontally centered. Thanks! :D This should be the accepted answer. – Miserere

thank you, I thought I would go crazy while trying thousands of attribute combinations – Mete

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. – Feints

android:layout_gravity="center_horizontal" just worked for me. – Modernity

Answer 2

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>

Neophyte

This works even if you are not using nested scrollviews. I had a linear layout inside my scrollview and this worked for me. – Knotweed

Answer 3

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>

Clite

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. – Feints

Best Answer :) Saved my day – Retrograde

Answer 4

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

Derive

Answer 5

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" >

Haematic

Answer 6

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.

Sizzler

Answer 7

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>

Shortlived

Answer 8

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

I have fixed the problem, the solution was to put ScrollView only around the TextView. – Articulation

You have missed attributes off ScrollView - plus ScrollView cannot have more than on direct decendent – Lui