Adding elevation to TextInputLayout is not working

Question

I'm using the TextInputLayout and MaterialAutoCompleteTextView from Material Design's text fields to create a dropdown menu as follows:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/drop_down_menu"
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginEnd="8dp"
    android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar"
    app:boxBackgroundColor="@android:color/white"
    app:layout_constraintBottom_toBottomOf="@+id/text_view_1"
    app:layout_constraintEnd_toStartOf="@+id/button_1"
    app:layout_constraintTop_toTopOf="@+id/text_view_1">

    <com.google.android.material.textfield.MaterialAutoCompleteTextView
        android:id="@+id/auto_complete_options"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="none"
        android:paddingStart="8dp"
        android:paddingEnd="8dp" />
</com.google.android.material.textfield.TextInputLayout>

The problem is if I add android:elevation="4dp" to TextInputLayout, nothing changes. Why is that? How do I add elevation to my TextInputLayout?

Try adding a solid background drawable in the TextInputLayout — Ankit Verma, Jan 25 '22 at 18:29
IIRC, TIL uses a `MaterialShapeDrawable` for its background with the `FilledBox` style, so you possibly just need to add `android:outlineProvider="background"` to its tag (along with the `elevation`). — Mike M., Jan 25 '22 at 18:38
Seems the background for that style isn't handled as I remembered. I'll have to look further into it to determine exactly why, but using the bounds instead does work, and might be sufficient, depending on your design. That is, `android:outlineProvider="bounds"`. https://i.stack.imgur.com/qGJks.png — Mike M., Jan 26 '22 at 00:34

Jay_Panchal · Answer 1 · 2022-01-26T14:22:22.437

Currently there is no work around for elevation into text layouts. All you can do is put your text input layout in a card view and give elevation in it. That is how you can achieve it.

  <androidx.constraintlayout.widget.ConstraintLayout 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:gravity="center"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:elevation="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/drop_down_menu"
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"

            android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar"
            app:boxBackgroundColor="@android:color/white"
            app:boxStrokeWidth="0dp"
            app:layout_constraintBottom_toBottomOf="@+id/text_view_1"
            app:layout_constraintEnd_toStartOf="@+id/button_1"
            app:layout_constraintTop_toTopOf="@+id/text_view_1">

            <com.google.android.material.textfield.MaterialAutoCompleteTextView
                android:id="@+id/auto_complete_options"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="none"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                android:text="here is the text" />
        </com.google.android.material.textfield.TextInputLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

You can make it work like this using cardview into constraint so that your textinput layout will look like this.

When I put the `XML` code from my post into a `CardView`, all it does is create a white square. — Tom Darious, Jan 26 '22 at 00:04

Adding elevation to TextInputLayout is not working

1 Answers1