Button overlapping EditText when keyboard is open

Question

I have the following ConstraintLayout in my Android application:

<android.support.constraint.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/white">

      <ImageView
          android:id="@+id/image_icon"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@drawable/icon"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          />

        <TextView
          android:id="@+id/instructions"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="@dimen/spacing_large"
          android:text="@string/instruction"
          app:layout_constraintTop_toBottomOf="@id/support_ic"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          />

      <Button
        android:id="@+id/call_button"
        android:layout_marginTop="@dimen/spacing_large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:text="@string/phone"
        android:textSize="18sp"
        android:textColor="@drawable/button"
        app:layout_constraintTop_toBottomOf="@+id/instructions"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        />


      <EditText
          android:id="@+id/message_content"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:lines="8"
          android:hint="@string/support_message_hint"
          android:textColorHint="@color/text_hint"
          android:inputType="textCapSentences|textMultiLine"
          android:background="@color/background_gray"
          android:padding="@dimen/spacing_small"
          android:textColor="@color/black"
          app:layout_constraintBottom_toTopOf="@+id/send_button"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          android:gravity="top|left"
          app:layout_constraintHorizontal_weight="1"
          app:layout_constraintVertical_weight="1"
           />

        <Button
          android:id="@+id/send_button"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:text="@string/support_send"
          android:background="@color/button_blue"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintEnd_toEndOf="parent" />

  </android.support.constraint.ConstraintLayout>

When I open the keyboard, the view adjusts and the bottom two widgets (the button and the editText) move with the keyboard. My problem however, is that whenever this happens, the @id/call_button Button lays on top of the editText. I do not want this. I want the editText to overlay the button when the keyboard is open.

Is there any way to make the editText take precedent when overlapping other widgets in this scenario? I tried adding editText.bringToFront() in my onCreate method, but that didn't do anything.

Also, I am trying to avoid nesting the bottom two widgets (the button and the editText) inside of their own layout. I want them all to remain in the same ConstraintLayout. Thank you for the help ahead of time.

Answer 1

Material Design guidelines specify that Buttons use elevation in both their pressed (8dp elevation) and upressed (2dp elevation) states. https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android

Which view you see when two are stacked on top of each other at the same elevation is dependent on the ordering of those views in your layout (e.g. why you expected the views written later to overlay the views written earlier), but elevation takes precedence over this.

As you've found, you can add elevation to your other views to make them "higher" than your button, but this is a bit ugly and might have some unwanted side-effects. I think a better choice would be to set the manifest attribute android:windowSoftInputMode="adjustPan" on your activity. This will cause your activity's view to slide up when the keyboard opens, rather than resizing.

Answer 2

I added android:elevation="4dp" to the editText's xml and it worked.