iuq
iuq

Reputation: 1529

ScrollView doesn't show top part

Problem : ScrollView hides top part of its child view when it grows beyond certain height.

I have following layout defined in XML

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

    <LinearLayout
        android:id="@+id/commandPanel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingLeft="5dip"
        android:paddingRight="5dip" >

        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="OK" />

        <Button
            android:id="@+id/button2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Back" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/mainContentPanel"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/commandPanel"
        android:background="@android:color/white" >

        <ScrollView
            android:id="@+id/formScrollView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_marginTop="5dip"
            android:layout_weight="1"
            android:background="@android:color/darker_gray"
            android:fillViewport="false"
            android:paddingBottom="5dip"
            android:scrollbarStyle="insideOverlay" >

            <LinearLayout
                android:id="@+id/formContentLayout"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:layout_marginTop="20dip"
                android:background="@android:color/black"
                android:gravity="center_horizontal|top"
                android:orientation="vertical"
                android:paddingLeft="5dip"
                android:paddingRight="5dip"
                android:paddingTop="20dip" >

                <LinearLayout
                    android:id="@+id/tr"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dip"
                    android:orientation="horizontal" >

                    <TextView
                        android:id="@+id/title"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="sample title" />

                    <TextView
                        android:id="@+id/value"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="sample value ......." />
                </LinearLayout>
            </LinearLayout>
        </ScrollView>
    </RelativeLayout>

</RelativeLayout>

---------- code ------

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.scrollview);
    updateUi();
}

//add few more rows here
void updateUi() {
    LinearLayout sampletr = (LinearLayout) findViewById(R.id.tr);
    LinearLayout contentPane = (LinearLayout) findViewById(R.id.formContentLayout);
    TextView title = (TextView) findViewById(R.id.title);
    TextView value = (TextView) findViewById(R.id.value);
    for (int i = 0; i < 25; i++) {
        LinearLayout tr = new LinearLayout(this);
        TextView t = new TextView(this);
        t.setText("Sample title : " + i);
        TextView v = new TextView(this);
        v.setText("Sample value : " + i);

        tr.addView(t, title.getLayoutParams());
        tr.addView(v, value.getLayoutParams());
        contentPane.addView(tr, sampletr.getLayoutParams());
    }
}

Here top rows in LinearLayout (ScrollView's immediate child) start disappearing from top if no. of rows grows more than 15! Moreover I can not even scroll up manually to view them, Any pointer please, what's wrong with this layout?

Upvotes: 8

Views: 6994

Answers (5)

Abu Saeed
Abu Saeed

Reputation: 1170

Just adding the line android:gravity="center" inside the parent linear layout inside scrollView solved my problem.

Upvotes: 0

iuq
iuq

Reputation: 1529

ok, I've solved it by removing following line from LinearLayout (Immediate child of ScrollView)

android:layout_gravity="center"

ScrollView works perfectly now. Thanks everyone for suggestions.

Upvotes: 30

Chintan Raghwani
Chintan Raghwani

Reputation: 3370

jus write xml with lil change

<LinearLayout
    android:id="@+id/commandPanel"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingLeft="5dip"
    android:paddingRight="5dip" >

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="OK" />

    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Back" />
</LinearLayout>

<RelativeLayout
    android:id="@+id/mainContentPanel"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/commandPanel"
    android:background="@android:color/white" >

    <ScrollView
        android:id="@+id/formScrollView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"

        android:layout_marginTop="0dp"    <--- --- change n remove this margin

        android:layout_weight="1"
        android:background="@android:color/darker_gray"
        android:fillViewport="false"
        android:paddingBottom="5dip"
        android:scrollbarStyle="insideOverlay" >

        <LinearLayout
            android:id="@+id/formContentLayout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_marginTop="20dip"
            android:background="@android:color/black"
            android:gravity="center_horizontal|top"
            android:orientation="vertical"
            android:paddingLeft="5dip"
            android:paddingRight="5dip"
            android:paddingTop="20dip" >

            <LinearLayout
                android:id="@+id/tr"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dip"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/title"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="sample title" />

                <TextView
                    android:id="@+id/value"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="sample value ......." />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

Upvotes: 0

Broak
Broak

Reputation: 4187

it does seem as though your padding-top is a problem, try removing it first.

Upvotes: 0

stuckless
stuckless

Reputation: 6545

I would remove the Second RelativeLayout node, but keep the ScrollView. Then for the ScrollView I would add layout_alignParentTop=true and layout_above="@+id/commandPanel". The second RelativeLayout seems redundant and typically when you add children to a RelativeLayout they should use the layout options of the container, ie, layout_above, below, align, etc.

Upvotes: 0

Related Questions