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?

Answer 1

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.