How to remove the outline from AutoCompleteTextView?

Question

I have a layout with several TextInputEditText fields nested in TextInputLayouts. I also have one dropdown menu using AutoCompleteTextView, also nested in a TextInputLayout. I use a custom background drawable on the fields to create a rounded field. Unfortunately, I cannot for the life of me figure out how to get rid of the little outline around the AutoCompleteTextView .

With the TextInputEditText fields, I can eliminate the outlines by setting the background on it. Doing this on the AutoCompleteTextView does nothing, and I have to set it on the parent TextInputLayout to see the background. But yet, the outline remains.

I believe this has something to do with material design (and its styles?) because when you press on the field, the outline turns orange, which is the primary color in our app's theme as set in the styles.xml.

Here is a relevant snippet of the XML layout in question. For comparison, the first part is the city field, and the second is the state field:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/input_city"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:visibility="@{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
        app:endIconMode="clear_text"
        app:hintEnabled="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/input_apartment">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/input_city_edit_text"
            style="@style/AppFont500.DarkGrey.EditTextHint"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingStart="25dp"
            android:paddingEnd="25dp"
            android:paddingLeft="25dp"
            android:paddingRight="25dp"
            android:visibility="@{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
            android:imeOptions="actionDone"
            android:inputType="number"
            android:text="@={viewModel.addDevice.city}"
            android:hint="@string/hint_city"
            android:background="@drawable/rounded_edittext_states"
            />

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

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/input_state"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:visibility="@{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
        app:endIconMode="dropdown_menu"
        app:hintEnabled="false"
        app:layout_constraintEnd_toStartOf="@id/input_zip_code"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/input_city"
        android:background="@drawable/rounded_edittext_states"
        >

        <AutoCompleteTextView
            android:id="@+id/input_state_edit_text"
            style="@style/AppFont500.DarkGrey.EditTextHint"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingStart="25dp"
            android:paddingEnd="25dp"
            android:paddingLeft="25dp"
            android:paddingRight="25dp"
            android:layout_marginEnd="4dp"
            android:visibility="@{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
            android:imeOptions="actionDone"
            android:inputType="none"
            android:text="@={viewModel.addDevice.state}"
            android:hint="@string/hint_state"
            />

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

I believe the key here involves styles and themes. Here are the custom styles and theme used within this snippet:

    <style name="AppMaterialTheme" parent="@style/Theme.MaterialComponents.Light.NoActionBar">
        <item name="colorPrimary">@color/primaryOrange</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
    <style name="AppFont500">
        <item name="fontFamily">@font/poppins_medium_500</item>
    </style>    

    <style name="AppFont500.DarkGrey">
        <item name="android:textColor">@color/secondaryDarkGrey</item>
    </style>    

    <style name="AppFont500.DarkGrey.EditTextHint">
        <item name="android:textSize">16sp</item>
    </style>

The background comes from this selector. It previously had more items, but right now just has one:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
        android:state_enabled="true"
        android:drawable="@drawable/rounded_edittext" />
    </selector>

And the drawable:

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">

        <solid android:color="#FFFFFF" />
    <corners
    android:radius="30dp" />
    </shape>

Mainly, what I have seen in questions related to outlines around edit texts is to either edit the stroke or boxStroke. I tried both and set them to an invisible value, but it does not change the stroke at all.

Answer 1

Here is how you remove this outline.

In your TextInputLayout XML code add the following snippet:

app:boxStrokeWidth="0dp"