ScrollView scrolls, but doesn't displays its content completely

Question

I have divided my layout in 2 scrollviews by using this code

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

<RelativeLayout

    android:layout_width="match_parent"
    android:layout_height="0px"
    android:background="@drawable/ashokb"
    android:layout_weight="4" >
<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" 
    android:background="@drawable/flagc">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#000000" />

        <Button
            android:id="@+id/button1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="-50dp"
            android:background="@drawable/ic_menu_share" />

    </LinearLayout>

    <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Medium Text"
            android:textColor="#000000" 

            android:gravity="center"
            android:textAppearance="?android:attr/textAppearanceMedium" />

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

<RelativeLayout

    android:layout_width="match_parent"
    android:layout_height="0px"
    android:background="@drawable/ashokb"
    android:layout_weight="1" >

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

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"       
            android:text="Medium Text"
               android:textColor="#000000"      
            android:textAppearance="?android:attr/textAppearanceMedium"
             />

    </ScrollView>

</RelativeLayout>
</LinearLayout>

This displays in GraphicalLayout like this

In device & emulators the view becomes correct in dialog as I want :

Problem: If the text in textview is small then the 1st scrollview behaves normal as expected, but if the text in texview is large then the complete text is not visible even after scrolling compltely, Instead it shows blank at the end of the scroll. As shown in this video

http://youtu.be/fIqzTQ8neGs

See in the last clicked item, The first scrollview is not displaying its contents completely.

I hope you get this problem clear.

Any solution for that ?

Answer 1

I have used your xml code and changed it by eliminating your layout_gravity="center" attributes. Now it works. Apart from the backgrounds you can use xml code given below.

<?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="#ec2345">

<RelativeLayout

android:layout_width="match_parent"
android:layout_height="0px"
android:background="#ec1234"
android:layout_weight="1" >

<ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000">

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" 
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ffffff" />

    <Button
        android:id="@+id/button1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="-50dp"
        android:background="#ffffff" />

</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:layout_gravity="center">
<TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textColor="#ffffff" 

        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 </LinearLayout>
 </LinearLayout>
 </ScrollView>
 </RelativeLayout>

 <RelativeLayout

  android:layout_width="match_parent"
  android:layout_height="0px" 
  android:layout_weight="1" >

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

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"       
        android:text="Medium Text"
           android:textColor="#000000"      
        android:textAppearance="?android:attr/textAppearanceMedium"
         />

</ScrollView>

</RelativeLayout>
</LinearLayout>

Answer 2

I think your issue may be fixed elegantly by using the Parallax effect. Have a look at it - you can check this Github project

You can get the Demo App from here

Answer 3

Basically you have many unnecessary attributes set in your layout file. But your issue is caused by android:layout_gravity attribute set on first LinearLayout in your top ScrollView:

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

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

Removing android:layout_gravity="center" will resolve your issue with cropped content inside this ScrollView.

---

By the way: If the content inside of it is smaller than ScrollView and you want to center it inside you should use different approach. You don't want to center child directly inside ScrollView but you should fill the ScrollView with it's only child and center the content inside this child. Normally you would set android:layout_height="match_parent" on this LinearLayout and android:gravity="center". But in ScrollView you cannot use such approach - the height of ScrollView direct child should always be wrap_content and setting it to match_parent wont work. There is however an attribute in ScrollView to allow such behavior, it's called setFillViewport(boolean fillViewport) and you should set it to true, like this:

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:fillViewport="true">

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

Apart from that following lines in ScrollView dont make any sense. It basically sets a gravity os this ScrollView to center, but since it matches the size of it's parent - it cannot be positioned in a center.

    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"

---

BTW. Second ScrollView shouldn't have a android:layout_height set to wrap_content. Please change it to match_parent.

Also you should really try to simplify your layout and number of attributes (especially all the "gravities":)