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.

Bogor

What is your expectation? And what are you seeing? – Defeasible

Already added in the code. Doesn't help – Bogor

Answer 1

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>

Bogor

How are you able to use Widget.MaterialComponents.AutoCompleteTextView, when it's not present in the public api: github.com/material-components/material-components-android/blob/… ? – Feeding

Answer 2

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

Lobbyism

Thanks. I am not looking for a drop-down icon. Anyway, I solved it. Will post an answer – Bogor

@GaganBatra In this case just add app:endIconMode="none" in your InputTextLayout – Lobbyism

Answer 3

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

Defeasible

This is still not displaying the outlined box. Anyway, I solved it. Will post an answer. Thanks – Bogor

+1 for the point "The problem was with the background color that you were setting to the AutoCompleteTextView". – Bogor

Answer 4

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>

Simony