How to add a ScrollView to an Android Layout

Question

I have the following layout but I would like to make it scroll vertically if the content is too much for the display. The ImageView, 'imagePhoto' is an image taken with the device camera. If the picture is taken Portrait then then layout needs to be able to scroll. I tried adding a ScrollView before the LinearLayout as follows:

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

But it did not seem to work.

Any suggestions??

Here is the layout xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widgetUploadPhoto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffffff"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/topLevelMenuBackground"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/tvHeaderText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text=""
            android:textColor="#ffffffff"
            android:textSize="20sp"
            android:shadowColor="#7F000000"
            android:shadowDx="1"
            android:shadowDy="1"
            android:shadowRadius="2"
            android:layout_centerVertical="true" />
    </RelativeLayout>
    <TextView
        android:id="@+id/tvYourCurrentPhoto"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:text="Your current photo:"
        android:background="#ffffffff"
        android:textColor="#ff626262"
        android:paddingTop="10dp" 
        android:paddingLeft="10dp"
        android:paddingBottom="10dp"
        android:textSize="@dimen/text_size_medium"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
        android:visibility="gone" />
    <ImageView
        android:id="@+id/imagePhoto"
        android:src="@drawable/OrangeAccessoryButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center_horizontal"
        android:background="#ffffffff"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginBottom="0dp"
        android:paddingTop="15dp"
        android:paddingRight="15dp"
        android:paddingBottom="15dp"
        android:paddingLeft="15dp"
        android:visibility="gone" />
    <TextView
        android:id="@+id/empty"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:text="Select an option below to change your photo."
        android:background="#ffffffff"
        android:textColor="#ff626262"
        android:paddingTop="15dp"
        android:paddingRight="15dp"
        android:paddingBottom="15dp"
        android:paddingLeft="15dp"
        android:textSize="@dimen/text_size_medium" />
    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:focusable="false"
        android:layout_weight="1" />
</LinearLayout>

Thanks for any help/suggestions.

UPDATED XML:

NOTE: This works, but it is not the expected results. I only want the stuff in the RelativeView to scroll. The first TexView is a header, which I want to remain stationary and the views under it to scroll. Basicaly, everything should scroll, but the relative vie section.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/widgetUploadPhoto"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffffff"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/topLevelMenuBackground"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/tvHeaderText"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:text=""
                android:textColor="#ffffffff"
                android:textSize="20sp"
                android:shadowColor="#7F000000"
                android:shadowDx="1"
                android:shadowDy="1"
                android:shadowRadius="2"
                android:layout_centerVertical="true" />
        </RelativeLayout>
        <TextView
            android:id="@+id/tvYourCurrentPhoto"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Your current photo:"
            android:background="#ffffffff"
            android:textColor="#ff626262"
            android:paddingTop="10dp" 
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:textSize="@dimen/text_size_medium"
            android:layout_marginLeft="0dp"
            android:layout_marginTop="0dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="0dp"
            android:visibility="gone" />
        <ImageView
            android:id="@+id/imagePhoto"
            android:src="@drawable/OrangeAccessoryButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_gravity="center_horizontal"
            android:background="#ffffffff"
            android:layout_marginLeft="0dp"
            android:layout_marginRight="0dp"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"
            android:paddingTop="15dp"
            android:paddingRight="15dp"
            android:paddingBottom="15dp"
            android:paddingLeft="15dp"
            android:visibility="gone" />
        <TextView
            android:id="@+id/empty"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Select an option below to change your photo."
            android:background="#ffffffff"
            android:textColor="#ff626262"
            android:paddingTop="15dp"
            android:paddingRight="15dp"
            android:paddingBottom="15dp"
            android:paddingLeft="15dp"
            android:textSize="@dimen/text_size_medium" />
        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:focusable="false"
            android:layout_weight="1" />
    </LinearLayout>
</ScrollView>

Khantahr · Answer 1 · 2013-02-01T21:18:44.393

This will have a header TextView that doesn't scroll at the top, followed by whatever you want below that scrolling vertically. Take note in particular of the ScrollView's attributes, the combination of android:height="0dp" and android:weight="1" will cause it to expand to fill all leftover space after the top TextView is drawn.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical>
    <TextView android:id="@+id/tvHeaderText"
        android:background="@drawable/topLevelMenuBackground"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textColor="#ffffffff"
        android:textSize="20sp"
        android:shadowColor="#7F000000"
        android:shadowDx="1"
        android:shadowDy="1"
        android:shadowRadius="2" />
    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            <!-- Everything you want to scroll goes here -->
        </LinearLayout>
    </ScrollView>
</LinearLayout>

Ok, yes, that worked, BUT did not product the reuslts I was looking for. The first TextView in the RelativeLayout section is a header for the view. I do not want that to scroll. I have edited my post and added the updated XML, which works, but the whole layout scrolls. How can I make just the stuff after the RelativeLayout scroll? — LilMoke, Feb 01 '13 at 19:50
I edited my answer to do what you want. Your `RelativeLayout` was unnecessary, so I removed it. I did notice that you have a `ListView` in there, is that really all you want to scroll? — Khantahr, Feb 01 '13 at 20:12
No, I want to scroll everything below the RelativeLayout. So, starting at the TextView-@+id/tvYourCurrentPhoto. Now I did move the ScrollView, but then I have two items in the ListView and the second item is cut off. I think that has to do with the layout height in the list view. — LilMoke, Feb 01 '13 at 20:20
That's what I did, put everything you want to scroll where the comment is in the code I posted. The `RelativeLayout` is not necessary, just set the `TextView` that you have in it to the same background and remove the `ReleativeLayout`. — Khantahr, Feb 01 '13 at 21:18

score 0 · Answer 2 · answered Feb 01 '13 at 19:43

try this

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widgetUploadPhoto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffffff"
android:orientation="vertical">
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/topLevelMenuBackground"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/tvHeaderText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text=""
        android:textColor="#ffffffff"
        android:textSize="20sp"
        android:shadowColor="#7F000000"
        android:shadowDx="1"
        android:shadowDy="1"
        android:shadowRadius="2"
        android:layout_centerVertical="true" />
</RelativeLayout>
<TextView
    android:id="@+id/tvYourCurrentPhoto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="left"
    android:text="Your current photo:"
    android:background="#ffffffff"
    android:textColor="#ff626262"
    android:paddingTop="10dp" 
    android:paddingLeft="10dp"
    android:paddingBottom="10dp"
    android:textSize="@dimen/text_size_medium"
    android:layout_marginLeft="0dp"
    android:layout_marginTop="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginBottom="0dp"
    android:visibility="gone" />
<ImageView
    android:id="@+id/imagePhoto"
    android:src="@drawable/OrangeAccessoryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_gravity="center_horizontal"
    android:background="#ffffffff"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginTop="0dp"
    android:layout_marginBottom="0dp"
    android:paddingTop="15dp"
    android:paddingRight="15dp"
    android:paddingBottom="15dp"
    android:paddingLeft="15dp"
    android:visibility="gone" />
<TextView
    android:id="@+id/empty"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="left"
    android:text="Select an option below to change your photo."
    android:background="#ffffffff"
    android:textColor="#ff626262"
    android:paddingTop="15dp"
    android:paddingRight="15dp"
    android:paddingBottom="15dp"
    android:paddingLeft="15dp"
    android:textSize="@dimen/text_size_medium" />
<ListView
    android:id="@+id/listView"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:focusable="false"
    android:layout_weight="1" />

</ScrollView>

What Ralgha said did work but did not produce the results I was expecting. Please see my comment and updated post. — LilMoke, Feb 01 '13 at 19:51
Please remove the relative layout, and try again. I am not sure but i think it doesnt work with with Relative Layout. I was also having the same problem. — Rakesh Burbure, Feb 01 '13 at 19:54
Rakesh, the solution provided by Ralgha worked fine, but it is not exactly what I want. I only want the stuff under the relative layout to scroll. That is what i am struggling with now. — LilMoke, Feb 01 '13 at 20:00

score 0 · Answer 3 · edited May 23 '17 at 10:34

The structure looks like this:

<LinearLayout>
    <RelativeLayout>
        <TextView android:id="@+id/tvHeaderText" />
    </RelativeLayout>
    <ScrollView>
        <LinearLayout android:id="@+id/widgetUploadPhoto" >
            <TextView android:id="@+id/tvYourCurrentPhoto"/>
            <ImageView android:id="@+id/imagePhoto" />
            <TextView android:id="@+id/empty"/>
            <ListView android:id="@+id/listView"/>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

First, have a LinearLayout as the root. Then move the RelativeLayout under the root LinearLayout which you want it to be always on the top. Next, put a ScrollView after the RelativeLayout and make another LinearLayout as the child to the ScorllView.

Also, I don't think putting a ListView inside a ScrollView is a good idea. See the answer.

score 0 · Answer 4 · answered Oct 02 '16 at 00:45

Which device are you testing on phone or tablet? Mind you what works on phone may not work on tablet so for phone and for sw600dp-land you will have to test and customize.I have implemented Scrollview for a chart and I am sharing my working code here.

 <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/ScrollView01"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp">

        <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/tableLayout1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="@drawable/back"
            android:scrollbars="vertical"
            android:textSize="20sp">
            <!--Month Combo Box-->
            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:padding="20sp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Select Month"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />

                <Spinner
                    android:id="@+id/spinner"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />

                <Spinner
                    android:id="@+id/spinneryr"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />
            </TableRow>
            <!--Field1 Combo Box-->
            <TableRow
                android:id="@+id/tableRow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20sp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/ERY"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />


                <EditText
                    android:id="@+id/ERYS"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/back"
                    android:gravity="center"
                    android:inputType="numberDecimal" />
            </TableRow>

            <!--Field9 Combo Box-->
            <TableRow
                android:id="@+id/tableRow10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20sp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/PCOUNT"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />

                <EditText
                    android:id="@+id/PLS"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/back"
                    android:gravity="center"
                    android:inputType="numberDecimal" />
            </TableRow>
            <!--Field10 Combo Box-->
            <TableRow
                android:id="@+id/tableRow11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20sp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/NES"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />

                <EditText
                    android:id="@+id/NESSS"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/back"
                    android:gravity="center"
                    android:inputType="numberDecimal" />
            </TableRow>
            <!--Field11 Combo Box-->
            <TableRow
                android:id="@+id/tableRow12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20sp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/EOS"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />

                <EditText
                    android:id="@+id/EOSS"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/back"
                    android:gravity="center"
                    android:inputType="numberDecimal" />
            </TableRow>
            <!--Field12 Combo Box-->
            <!--Removed android:layout_gravity="center"-->
            <TableRow
                android:id="@+id/tableRow13"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="20sp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/LYMS"
                    android:textColor="#0c0b0b"
                    android:textSize="20sp" />

                <EditText
                    android:id="@+id/LYMSS"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/back"
                    android:gravity="center"
                    android:inputType="numberDecimal" />
            </TableRow>
            <!-- Button :Start here-->
            <TableRow
                android:id="@+id/tableRow14"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="20sp">

                <Button
                    android:id="@+id/btnAdd"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/add" />
                <Button
                    android:id="@+id/btnViewAll"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/view_all" />

            </TableRow>

            <TextView
                android:id="@+id/tvValues"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textSize="20sp" />
        </TableLayout>
    </ScrollView>

How to add a ScrollView to an Android Layout

4 Answers4