ScrollView not working within Coordinator and Relative layout

Question

The following code display only 3 of 4 Editext within a ScrollView . The problem is the last Editext which is overlapping the Button

Why ScrollView isn't working properly?

Or How avoid this overlaps?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent">


<android.support.design.widget.CoordinatorLayout
    android:id="@+id/cl"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/bt_next">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_alignParentTop="true">

        <TextView
            android:id="@+id/tv_activity_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="24sp"
            android:text="@string/app_name"/>

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

    </android.support.design.widget.AppBarLayout>


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/mysv">


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

            <EditText
                android:id="@+id/et_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Input 1"/>


            <View android:layout_width="match_parent" android:layout_height="150dp" />

            <EditText
                android:id="@+id/et_2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Input 2"/>

            <View android:layout_width="match_parent" android:layout_height="150dp" />

            <EditText
                android:id="@+id/et_3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Input 3"/>

            <View android:layout_width="match_parent" android:layout_height="150dp" />

            <EditText
                android:id="@+id/et_4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Input 4"/>

        </LinearLayout>

    </ScrollView>

</android.support.design.widget.CoordinatorLayout>

<Button
    android:id="@+id/bt_next"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:text="Next"/>

This is how looks like at the end of the scroll.

Answer 1

Your problem is not the ScrollView, your problem is the fact that you have the Button floating out by itself outside of the CoordinatorLayout. If you're trying to get the content above the button, you could try adding alignToTopOf="@id/bt_next (I forget the exact name of the attribute, but you get the idea). Then the Coordinator should sit on top of the button.

If that's not what you're trying to do, post a screenshot of what you're trying to get to and a screenshot of what's broken now.

Answer 2

I've solved using Nestedlayout and a LinearLayout inside. The key is keep in mind CoordinatorLayout works as a FrameLayout .

The only issue that I find is the toolbar is not hiding when I scroll.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/cl"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bt_next"
        android:layout_alignParentTop="true">

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



        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/mysv">


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways">

            <TextView
                android:id="@+id/tv_activity_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#fff"
                android:textSize="24sp"
                android:text="@string/app_name"/>

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

        </android.support.design.widget.AppBarLayout>


        <android.support.v4.widget.NestedScrollView
            android:id="@+id/mysv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">


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

                <EditText
                    android:id="@+id/et_1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Input 1"/>


                <View android:layout_width="match_parent" android:layout_height="150dp" />

                <EditText
                    android:id="@+id/et_2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Input 2"/>

                <View android:layout_width="match_parent" android:layout_height="150dp" />

                <EditText
                    android:id="@+id/et_3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Input 3"/>

                <View android:layout_width="match_parent" android:layout_height="150dp" />

                <EditText
                    android:id="@+id/et_4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Input 4"/>

            </LinearLayout>

        </android.support.v4.widget.NestedScrollView>
        </LinearLayout>

    </android.support.design.widget.CoordinatorLayout>

    <Button
        android:id="@+id/bt_next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Next"/>


</RelativeLayout>