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.

What is your expectation? And what are you seeing? – Kumar Bibek Aug 26 '19 at 08:37 — Kumar Bibek, Aug 26 '19 at 08:37
Already added in the code. Doesn't help – Gagan Batra Aug 26 '19 at 08:37 — Gagan Batra, Aug 26 '19 at 08:37

Gabriele Mariotti · Answer 1 · 2019-08-26T09:47:46.253

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"
      ...>

Thanks. I am not looking for a drop-down icon. Anyway, I solved it. Will post an answer — Gagan Batra, Aug 26 '19 at 09:41
@GaganBatra In this case just add app:endIconMode="none" in your InputTextLayout — Gabriele Mariotti, Aug 26 '19 at 09:46

score 7 · Accepted Answer · answered Aug 26 '19 at 09:45

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>

How are you able to use `Widget.MaterialComponents.AutoCompleteTextView`, when it's not present in the public api: https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res-public/values/public.xml ? — Henry, Mar 13 '21 at 14:07

score 1 · Answer 3 · answered Aug 26 '19 at 08:53

    <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">

    <AutoCompleteTextView
        android:id="@+id/edittext_holiday_destination"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Destination"
        android:layout_weight="10"
        android:singleLine="true"
        android:lines="1"
        android:textSize="25sp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        tools:text="Hello" />
    />
</com.google.android.material.textfield.TextInputLayout>

This works. The problem was with the background color that you were setting to the AutoCompleteTextView.

This is still not displaying the outlined box. Anyway, I solved it. Will post an answer. Thanks — Gagan Batra, Aug 26 '19 at 09:40
+1 for the point "The problem was with the background color that you were setting to the AutoCompleteTextView". — Gagan Batra, Aug 26 '19 at 09:43

score 0 · Answer 4 · answered Mar 25 '22 at 10:32

finally my answer is this
 <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/uomLay"
    android:layout_width="0dp"
    app:layout_constraintTop_toBottomOf="@id/quantity_lay"
    app:layout_constraintStart_toStartOf="@id/start2"
    app:layout_constraintEnd_toEndOf="@id/end2"
    style="@style/OutlineBoxDropDown"
    app:endIconDrawable="@drawable/ic_path_16692"
    app:shapeAppearance="@style/Rounded"
    app:hintTextAppearance="@style/hintTextAppearence"
    android:layout_marginTop="@dimen/_13sdp"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:id="@+id/uom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/graphikregular"
        android:hint="UOM"
        
     
       style="@style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
        android:background="@null"
        android:paddingVertical="@dimen/_7sdp"
        android:textColor="@color/desc_color"
        android:textSize="@dimen/_11ssp"
        tools:text="kg" />
</com.google.android.material.textfield.TextInputLayout>

I am trying to make AutoCompleteTextView look like a material Edittext

4 Answers4