EditText grows and pushes other View off screen

Question

I have a layout with two views that should behave like this:

• On top is an EditText that should grow (and shrink) dynamically. Right underneath is another view. The EditText grows until the other View reaches the bottom of the parent layout, then it stops growing and becomes scrollable instead.

An image that illustrates the desired behaviour can be found here (cannot upload it) :

The problem, it seems, is to limit the EditText to a certain height so it won't push the other View off the bottom of the screen. Or to give the other View an attribute that it always stays on screen, I don't know.

I tried several different approaches to solve it via xml. The one I attach simply works by limiting the number of lines in the EditText - which I would later have to change programmatically depending on device's resolution. So that's not really desirable.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"   
    android:orientation="vertical">

    <include
        android:id="@+id/tripNotes_toolbar_layout"
        layout="@layout/toolbar_details" />

    <android.support.constraint.ConstraintLayout
        android:id="@+id/tripNotes_constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        style="@style/CardStyle"

        android:layout_gravity="top"
        android:layout_marginLeft="@dimen/card_outer_margin_left"
        android:layout_marginRight="@dimen/card_outer_margin_left">

        <EditText
            android:id="@+id/tripNotes_editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:layout_margin="8dp"
            android:background="@null"
            android:hint="Put your notes here"
            android:inputType="textMultiLine|textCapWords"
            android:lines="12"
            android:maxLength="1000"
            android:maxLines="12"
            android:minLines="1"
            android:textColor="@color/grey_12"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/tripNotes_pictureGrid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tripNotes_editText"
            app:layout_constraintVertical_bias="0"
            app:layout_constraintVertical_weight="1"/>

    </android.support.constraint.ConstraintLayout>

</LinearLayout>

The actual result is that other View is pushed off screen if number of lines in EditText is not limited, but I would prefer a solution with alyout attributes.

Answer 1

You can wrap the edit text into a scroll view

Your layout would look like this :

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"   
    android:orientation="vertical">

    <include
        android:id="@+id/tripNotes_toolbar_layout"
        layout="@layout/toolbar_details" />

    <android.support.constraint.ConstraintLayout
        android:id="@+id/tripNotes_constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/CardStyle"

        android:layout_gravity="top"
        android:layout_marginLeft="@dimen/card_outer_margin_left"
        android:layout_marginRight="@dimen/card_outer_margin_left">

        <ScrollView
            android:id="@+id/tripNotes_editTextContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/tripNotes_pictureGrid">
            <EditText
                android:id="@+id/tripNotes_editText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:layout_margin="8dp"
                android:background="@null"
                android:hint="Put your notes here"
                android:inputType="textMultiLine|textCapWords"
                android:textColor="@color/grey_12" />
        </ScrollView>
        <View
            android:id="@+id/tripNotes_pictureGrid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/tripNotes_editTextContainer"
            app:layout_constraintTop_toBottomOf="@id/tripNotes_editTextContainer"
            app:layout_constraintVertical_bias="0"
            app:layout_constraintVertical_weight="1"/>

    </android.support.constraint.ConstraintLayout>

</LinearLayout>

Changes made :

• Constraint layout height changed from match_parent to wrap_content
• Edit text
  • removed app:layout_constraintTop_toTopOf="parent" (no longer needed since it is wrapped in scrollview)
  • removed maxLines, lines, minLines and maxLength attributes
• Added ScrollView
• Bottom View :
  • changed app:layout_constraintStart_toStartOf="parent" to app:layout_constraintStart_toEndOf="@id/tripNotes_editTextContainer"
  • changed app:layout_constraintTop_toBottomOf="@id/tripNotes_editText" to app:layout_constraintTop_toBottomOf="@id/tripNotes_editTextContainer"

The bottom view will be just under the Edittext and will go down until the bottom of the screen and the EditText will become scrollable