Scroll middle content with ListView in Android Layout

Question

I'm developing android app as per the following design.

test

I want to set the height of the scroll view to the remaining screen size (after occupied by header,footer and other texts) although there are no any contents in the list view. When the items added to the list view (dynamically) I want to scroll it withing the same. But now I'm unable to set initial height when there are no items in the list view.

bellow is my layout file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_color"
tools:context=".HomeActivity"
android:weightSum="1.0" >

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@color/header_color"
    android:paddingBottom="@dimen/header_vertical_margin"
    android:paddingLeft="@dimen/header_horizontal_margin"
    android:paddingRight="@dimen/header_horizontal_margin"
    android:paddingTop="@dimen/header_vertical_margin"  >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:orientation="horizontal"
        android:weightSum="1.0" >

        <ImageButton
            android:id="@+id/ImageButton03"
            android:layout_width="62dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:layout_weight="0.2"
            android:adjustViewBounds="true"
            android:background="@android:color/transparent"
            android:gravity="left"
            android:scaleType="centerInside"
            android:src="@drawable/title_left_img" />


        <ImageView
            android:id="@+id/headerImg"
            android:layout_width="139dp"
            android:layout_height="match_parent"
            android:layout_weight="0.7"
            android:scaleType="centerInside"
            android:src="@drawable/header_img"
            android:layout_margin="5dp" />

        <ImageButton
            android:id="@+id/ImageButton04"
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.1"
            android:adjustViewBounds="true"
            android:background="@android:color/transparent"
            android:scaleType="centerInside"
            android:src="@drawable/title_right_img" />

    </LinearLayout>

</RelativeLayout>

<RelativeLayout
    android:id="@+id/relativeLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/relativeLayout1"
    android:paddingBottom="@dimen/body_vertical_margin"
    android:paddingLeft="@dimen/body_horizontal_margin"
    android:paddingRight="@dimen/body_horizontal_margin"
    android:paddingTop="@dimen/body_vertical_margin" >

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

    <TextView
        android:id="@+id/dayText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="TextView"
        android:textColor="@color/day_color"
        android:textSize="@dimen/day_size"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/dateTimeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="TextView | TextView"
        android:textColor="@color/time_date_color"
        android:textSize="@dimen/date_time_size"
        android:textStyle="normal" />

    <ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="wrap_content"
    android:layout_height="0px"
    android:background="@drawable/rounced_rect"
    android:layout_weight="1"
    android:fillViewport="true" >


        <ListView
            android:id="@+id/list_tracking"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:dividerHeight="1dp"
            android:scrollingCache="true" >

        </ListView>

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

<RelativeLayout
    android:id="@+id/relativeLayout3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="1dp"
    android:paddingBottom="@dimen/footer_vertical_margin"
    android:paddingLeft="@dimen/footer_horizontal_margin"
    android:paddingRight="@dimen/footer_horizontal_margin"
    android:paddingTop="@dimen/footer_vertical_margin" >

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/track_button"
        android:adjustViewBounds="true"
        android:background="@android:color/transparent"
        android:scaleType="centerInside" />

</RelativeLayout>

I'm new to android app and any guidance is really appreciated.

I would not put the ListView inside a ScrollView. The ListView can already scroll. And your relativeLayout2 and relativeLayout3 are unnecessary since they are only wrapping one child each. Since your top level element is a relative layout, you can specify stuff out of order. Specify the bottom image button before the middle linear layout. Then just set the linear layout height to match_parent, and set layout_above and layout_below relative to the relativeLayout1 and your bottom image button, so it simply always fills the remaining space between the two. Set the list view height to match_parent — Tenfour04, Nov 13 '13 at 21:00
Actually, your relativeLayout1 is also unnecessary since it has one child as well. — Tenfour04, Nov 13 '13 at 21:02
@Tenfour04 I followed your instructions carefully and now it is working as expected. Thank you very much and I was able to have clear understanding of RelativeLayout, LinearLayout etc. If you can post your comment as an answer I can accept it. — ons1719133, Nov 13 '13 at 22:03

score 3 · Answer 1 · edited Jan 07 '16 at 15:10

3

You can't use a ListView inside a ScrollView.

You could either use a ScrollView or ListView, but not both together or one inside the other.

edited Jan 07 '16 at 15:10

Erick G. Hagstrom

4,873
1
24
38

answered Nov 17 '13 at 08:42

Prakash

449
2
4
15

score 2 · Accepted Answer · answered Nov 13 '13 at 23:22

To summarize my comment:

Remove the unnecessary relativeLayout1, 2, and 3 and scrollView. Then move the bottom image button above the linear layout, so you can make the linear layout position itself with layout_above the image button and give it a height of match_parent. This makes it fill the space between the top linear layout and the bottom image button. And finally make the scroll view's height match_parent so it will also fill the space remaining below the text views.

Scroll middle content with ListView in Android Layout

2 Answers2