Android: Center a scrollview between header and footer

Question

I am trying to center a ScrollView between a header and footer. Specifically I have a ImageView that has to be at the top, a RelativeView at the bottom and a ScrollView centered between the two. When the content of the ScrollView is not larger than the space between the footer and header, I want it centered vertically like in the image below. My current attempt puts the scrollview in the right place but it will not center itself vertically correctly when the content is smaller than the available space.

Layout Pic

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:acg="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/preloginLogo"
    android:layout_width="350dp"
    android:layout_height="130dp"
    android:src="@drawable/logo"
    android:layout_centerHorizontal="true"
    android:layout_alignParentTop="true"/>

<ScrollView
    android:layout_width="@dimen/prelogin_main_content_width"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/preloginLogo"
    android:layout_above="@+id/preloginTertiaryLinks">

    <RelativeLayout
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">           

    </RelativeLayout>
</ScrollView>

<RelativeLayout
    android:id="@+id/preloginTertiaryLinks"
    android:layout_width="match_parent"
    android:layout_height="96dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:paddingTop="5dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dip"
        android:background="@color/lt_gray"
        android:layout_centerVertical="true"
        android:layout_alignParentTop="true"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <Button
            android:id="@+id/prelogin_guestButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Footer"/>
    </LinearLayout>
</RelativeLayout>

score 1 · Accepted Answer · answered Mar 15 '16 at 14:49

You can give the ScrollView a padding at the top, and at the bottom.

<ScrollView
    android:layout_width="@dimen/prelogin_main_content_width"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/preloginLogo"
    android:layout_paddingTop="12dp"
    android:layout_paddingBottom="12dp"
    android:layout_above="@+id/preloginTertiaryLinks">

    <RelativeLayout
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">           
    </RelativeLayout>
</ScrollView>

Awesome, thank you, this is exactly what I was looking for! – Le2e410 Mar 15 '16 at 15:58 — Le2e410, Mar 15 '16 at 15:58

score 1 · Answer 2 · answered Mar 15 '16 at 14:59

How about this:

1: Lose the above and below

2: Set margins so that the header and footer don't get covered.

 <ScrollView
        android:layout_width="match_parent"
        android:layout_marginTop="130dp"
        android:layout_marginBottom="96dp"
        android:background="@color/red_danger"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" 
        >

    <RelativeLayout
            android:id="@+id/mainContent"
            android:layout_width="match_parent"
            android:layout_height="100dp">

    </RelativeLayout>
</ScrollView>

Android: Center a scrollview between header and footer

2 Answers2