Search code examples
androidxmlandroid-layoutresponsive-designandroid-navigationview

How to let a middle view fill remain height (if any) inside ScrollView?


For example,I want a 500dp and a 150dp TextView inside a LinearLayout. For responsive layout, at their middle, there would be a red area if there is any remaining height (e.g.:at large screen device):

Large Screen:

enter image description here

and if there is no remain space (e.g.:at small screen device), there would be no red area and the view become scrollable:

Small Screen:

enter image description here

I tried:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:background="#FFFFAA"
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:text="500dp"
                android:gravity="center_vertical"
                android:textAlignment="center" />
            <View
                android:background="#FF0000"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <TextView
                android:background="#AAFF"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:text="150dp"
                android:gravity="center_vertical"
                android:textAlignment="center" />
        </LinearLayout>
    </ScrollView>
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

which set layout_weight="1" for the red area, but the red area does not fill the remaining height at large screen:

Large screen:

enter image description here

How can I do that?


Solution

  • make your scrollview like this

    use android:fillViewport="true" because it Defines whether the scrollview should stretch its content to fill the viewport.

     <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:background="#FFFFAA"
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:text="500dp"
                android:gravity="center_vertical"
                android:textAlignment="center" />
            <View
                android:background="#FF0000"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <TextView
                android:background="#AAFF"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:text="150dp"
                android:gravity="center_vertical"
                android:textAlignment="center" />
        </LinearLayout>
    </ScrollView>