ScrollView gets covered by toolbar

Question

i don't why it happens with my scrollview. When no edit text is focusing then the layout seems to be ok as shown in the picture below.

but when user happens to be in one of the edit text boxes, then the toolbar and the keyboard layout take all the space hiding the scrollview behind as shown here

the layout for this is :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/activity_meal_viewer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/light_gray"
    android:orientation="vertical">


    <include
        android:id="@+id/tool_bar"
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            android:background="@android:color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="@dimen/activity_horizontal_margin">


                <EditText
                    android:id="@+id/person_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/activity_horizontal_margin"
                    android:background="@drawable/generic_shape_rect"
                    android:drawableLeft="@drawable/ic_people"
                    android:drawablePadding="@dimen/activity_horizontal_margin"
                    android:drawableStart="@drawable/ic_people"
                    android:gravity="center_vertical"
                    android:hint="@string/full_name"
                    android:inputType="textPersonName"
                    android:maxLines="1"
                    android:typeface="serif" />

                <EditText
                    android:id="@+id/person_address"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/generic_shape_rect"
                    android:drawableLeft="@drawable/ic_pin"
                    android:drawablePadding="@dimen/activity_horizontal_margin"
                    android:drawableStart="@drawable/ic_pin"
                    android:gravity="center_vertical"
                    android:hint="@string/address"
                    android:inputType="text"
                    android:maxLines="1"
                    android:typeface="serif" />

            </LinearLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/activity_horizontal_margin"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginTop="0dp"
            android:background="@android:color/white"
            app:cardCornerRadius="2dp">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="@dimen/activity_horizontal_margin">

                <EditText
                    android:id="@+id/person_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/activity_horizontal_margin"
                    android:background="@drawable/generic_shape_rect"
                    android:drawableLeft="@drawable/ic_email"
                    android:drawablePadding="@dimen/activity_horizontal_margin"
                    android:drawableStart="@drawable/ic_email"
                    android:ems="10"
                    android:hint="@string/email"
                    android:inputType="textEmailAddress"
                    android:maxLines="1"
                    android:typeface="serif" />


                <EditText
                    android:id="@+id/person_phone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/generic_shape_rect"
                    android:drawableLeft="@drawable/ic_telephone"
                    android:drawablePadding="@dimen/activity_horizontal_margin"
                    android:drawableStart="@drawable/ic_telephone"
                    android:ems="10"
                    android:hint="@string/phone"
                    android:inputType="phone"
                    android:typeface="serif" />
            </LinearLayout>


        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/activity_horizontal_margin"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginTop="0dp"
            android:background="@android:color/white"
            app:cardCornerRadius="2dp">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="@dimen/activity_horizontal_margin">


                <EditText
                    android:id="@+id/person_initial_fund"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/generic_shape_rect"
                    android:drawableLeft="@drawable/ic_dollar"
                    android:drawablePadding="@dimen/activity_horizontal_margin"
                    android:drawableStart="@drawable/ic_dollar"
                    android:ems="10"
                    android:hint="@string/initial_fund"
                    android:inputType="numberSigned"
                    android:maxLines="1"
                    android:typeface="serif" />
            </LinearLayout>


        </android.support.v7.widget.CardView>

        <ImageButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:layout_marginBottom="@dimen/activity_horizontal_margin"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginTop="0dp"
            android:background="@drawable/selector_button_accent"
            android:contentDescription="@string/done"
            android:onClick="handlePeople"
            android:src="@drawable/ic_action_done" />
    </LinearLayout>
</LinearLayout>

and the toolbar layout file is :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Note : i also tried NestesScrollView but that didn't work either

Answer 1

By default, when fitsSystemWindows is used on a View, the WindowInsets provided by the system are consumed by the View as padding, that's why your Toolbar has extra space on top, the system add some topPadding to it when it's receiving the WindowInsets because of the transparent status bar.

But, when the keyboard appears, the system throws a new WindowInsets with the height of the keyboard as bottom insets. And, as your Toolbar will react to this new WindowInsets, the Toolbar will add the height of the keyboard as bottom padding, hence, growing like on your screenshot.

You have 2 solutions if you want to work around this issue : First, make the keyboard span the activity's content instead of resizing the Activity. You can do this by setting in your Activity's manifest entry :

<activity
        android:name=".YourActivity"
        android:windowSoftInputMode="adjustPan"/>

This will make the keyboard push all contents to the top ensure that the EditText is still visible when the keyboard is up. But this can push the Toolbar outside of the window when keyboard is up. It's your call to decide if you are ok with it.

If you are NOT ok, you can write some code to manually handle the WindowInset to only apply top padding to the Toolbar and to ignore the bottom inset. You can do something like :

ViewCompat.setOnApplyWindowInsetsListener(toolbar, new OnApplyWindowInsetsListener() {
    @Override
    public WindowInsetsCompat onApplyWindowInsets(
        View v, WindowInsetsCompat insets
    ) {
        v.setPadding(0, insets.getSystemWindowInsetTop(), 0, 0);
        insets.consumeSystemWindowInsets();
        return insets;
    }
});

But be aware that even if this code will compile and run on any API level (it's using stuff from support-v4), this will be effective only on API 21 and after, when they changed the way WindowInsets works. If you are using the transparentStatusBar from API 19, you have to write more code to do the same thing with the deprecated API ... I tend to ignore this and allow the transparentStatusBar only starting from API 21, much less pain to handle it properly to be honest.

Hope's this helps.

Answer 2

Maybe you should use CoordinatorLayout instead LinearLayout from google support design. And add the toolbar inner AppBarLayout. The documentation read this