I am trying to make AutoCompleteTextView look like a material Edittext

Question

I am trying to make AutoCompleteTextView look like this image https://ibb.co/ZJxmgK5 but unable to do the same. The outlined box is not visible in the result

Below is my current code. Earlier I tried adding an EditText in TextInputLayout but now I want to add Autocomplete in this.

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/input_layout_holiday_destination"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/lbl_destination_big">
<AutoCompleteTextView
                        android:id="@+id/edittext_holiday_destination"
                        style="@style/Base.Widget.AppCompat.EditText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="10"
                        android:background="@android:color/transparent"
                        android:hint="@string/lbl_destination"
                        android:layout_marginLeft="@dimen/margin8"
                        android:singleLine="true"
                        android:lines="1"
                        android:textSize="25sp"
                        android:nextFocusDown="@+id/txv_holiday_num_of_nights"
                        android:imeOptions="actionNext"
                        android:textCursorDrawable="@drawable/edittext_cursor_drawable"/>
                    />
</com.google.android.material.textfield.TextInputLayout>

The expected result is the image for which the URL has been given above.

Answer 1

If you would like to have a TextInputLayout in conjuction with an AutoCompleteTextView you should use this style for the TextInputLayout Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu.

In your case:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"

Use something like:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/name_text_input"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="HINT TEXT">

        <AutoCompleteTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"/>

    </com.google.android.material.textfield.TextInputLayout>

Check also the doc:

Note: When using an outlined text field with an EditText child that is not a TextInputEditText, make sure to set the EditText's android:background to @null. This allows TextInputLayout to set an outline background on the EditText.

If you would like to avoid the dropdown icon just use the app:endIconMode attribute.

<com.google.android.material.textfield.TextInputLayout
      app:endIconMode="none"
      ...>

Answer 2

Below code solves the problem:

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/input_layout_holiday_destination"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/lbl_destination_big">

                    <androidx.appcompat.widget.AppCompatAutoCompleteTextView
                        android:id="@+id/edittext_holiday_destination"
                        style="@style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:singleLine="true"
                        android:lines="1"
                        android:nextFocusDown="@+id/txv_holiday_num_of_nights"
                        android:imeOptions="actionNext"
                        android:textCursorDrawable="@drawable/edittext_cursor_drawable"
                        />

                </com.google.android.material.textfield.TextInputLayout>