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 enter image description here

In device & emulators the view becomes correct in dialog as I want : enter image description here

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 ?

why two scrollviews .put all in single scrollview. it may work — Madhu, Jul 30 '14 at 12:23
No, I dont want that, I want the contents in the scrollview must always be visible at the top, & if its content(i.e text) become larger then it can be viewed by scrolling that particular area(scrollview1) — Vivek Warde, Jul 30 '14 at 12:26
set wrap_content to the value height at the first scrollview and tell me how it works.. — Nemka, Jul 30 '14 at 12:43
Ok,try to put android:paddingTop="20dp" in the first linearLayout after the first scrollview to see.. — Nemka, Jul 30 '14 at 13:39
Assigh `weightSum` to your topmost `LinearLayout` like `android:weightSum="5"`. — Ved, Aug 01 '14 at 13:31
Duplicate? http://stackoverflow.com/questions/3450561/scrollview-issue-in-android-layout-xml, http://stackoverflow.com/questions/3470420/is-it-possible-to-evenly-distribute-buttons-across-the-width-of-an-android-linea — , Aug 13 '14 at 01:21

Maciej Ciemięga · Accepted Answer · 2014-08-01T13:51:04.560

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

Thanks maciej , I had this Issue earlier but I forgotted how do I solved it, & you made me remember! also Thanks for the knowledge you gave, it helped me a lot. — Vivek Warde, Aug 01 '14 at 16:32
Please answer this http://stackoverflow.com/questions/25139656/scrollview-doesnt-display-its-content-properly-in-lower-versions-of-android — Vivek Warde, Aug 05 '14 at 13:13

score 1 · Answer 2 · edited Aug 04 '14 at 13:01

1

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

edited Aug 04 '14 at 13:01

vandus

3,248
3
30
44

answered Aug 01 '14 at 13:57

ColdFire

6,764
6
35
51

Thank you, Parallax is a lil different to what I have implemeted & also its a good library – Vivek Warde Aug 01 '14 at 16:34

score 0 · Answer 3 · answered Aug 04 '14 at 15:12

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>

Please answer this http://stackoverflow.com/questions/25139656/scrollview-doesnt-display-its-content-properly-in-lower-versions-of-android — Vivek Warde, Aug 05 '14 at 13:13

ScrollView scrolls, but doesn't displays its content completely

3 Answers3