CardView Scroll behavior when keyboard is up

Question

Our app's main content is a RecylerView of CardView's. For signup we require more than just a username/password to create an account so we decided to make the signup flow out of CardView's to match the user experience once they sign up.

To do that I have a single Activity that animates fragments in from the bottom and existing fragments out the top to emulate scrolling. This fake scrolling occurs when the user enters data and hits next to advance. This works pretty well except for one case. When we have a EditText for input the keyboard comes up and covers the 'next' button on the bottom of the screen.

In our user testing we've noticed a high percentage of users trying to scroll the card up to get to the next button instead of dismissing the keyboard.

I've spent a lot of time unsuccessfully trying to get the CardView to scroll up to reveal the button and I'm out of ideas and looking for new ones.

The signup Activity layout only contains a FrameLayout that I load Fragments into. Each fragment that gets loaded has a CardView for the root layout.

In the manifest I have set the activity's windowsSoftInputMode to adjustResize, adjustPan with little success.

activity_signup.xml

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/signUpContent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

simplified fragment_enter_code.xml

<android.support.v7.widget.CardView
style="@style/CardViewStyle.SignUp"
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="wrap_content"
app:cardCornerRadius="25dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="8dp">

        <EditText
             android:id="@+id/codeEditText"
             style="@style/HintedEditText"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="Code"
             android:inputType="text"/>

        <Button
            style="@style/NextButton"
            android:id="@+id/nextButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:enabled="false"
            android:text="@string/next"/>

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

When I tried putting the CardView in a ScrollView the cardview layout (with fillViewport true), I get a scrollbar but the card doesn't scroll and the cardview layout gets messed up.

Does anyone know the windowSoftInputMode's well enough to point me in the right direction? Or is the CardView just not going to scroll outside of a Container that is design to hold them?

It feels like the solution to this is in manipulating the activity's view not the fragments.

Answer 1

I ended up creating a new app to just play around with this issue and noticed that if I had a layout that didn't contain a CardView whose root layout was a ScrollView it didn't scroll unless the activities windowSoftInputMode is set to adjustResize and then it will scroll.

I then made a layout with a <ScrollView><CardView><content...></CardView></ScrollView> and the size of the CardView was always the default row size for a card and wouldn't match_parent. I solved that with fillViewPort="true" on the ScrollView but when the keyboard came up it wouldn't scroll.

Turns out the secret sauce was to put a FrameLayout (or anyother layout) in between the CardView and the ScrollView.

You still have to account for the resize of the Layout to prevent your view elements not stacking over each other but Once you do that you now get the view above the soft keyboard to scroll and the ability to reach the rest of the UI with a CardView.

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardCornerRadius="35dp"
            app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:contentPadding="8dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:src="@drawable/common_ic_googleplayservices"/>

                <EditText
                    android:id="@+id/input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="50dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_below="@id/image"
                    android:hint="Input"
                    android:inputType="text"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_below="@id/input"
                    android:orientation="vertical"
                    android:gravity="bottom|center_horizontal">

                    <Button
                        android:id="@+id/nextButton"
                        android:layout_width="match_parent"
                        android:layout_height="48dp"
                        android:layout_marginLeft="20dp"
                        android:layout_marginRight="20dp"
                        android:enabled="false"
                        android:text="Next"/>

                </LinearLayout>

            </RelativeLayout>

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

    </FrameLayout>

</ScrollView>