androidmaterial-uiandroid-custom-viewandroid-textinputlayoutmultiautocompletetextview

How to make a custom MultiAutoCompleteTextView inside a Material TextInputLayout?


I want to customize a MultiAutoCompleteTextView, which will be placed inside a TextInputLayout in order to use Material, for the sake of reusability and updatability to the underlying code.

I have yet to start and I already have problems with it though.

Graphic demostration of the problem

As you can see, the first TextInputLayout is completely wrong. They both have the exact same structure and attributes, the only different thing is the custom view. It is basically an empty class that extends MultiAutoCompleteTextView.

Below is the xml and the custom view class.

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/custom_view"
        style="@style/Theme.CustomViews.MorphInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/standard_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <com.scitalys.customViews.ui.main.MorphInputText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint" />

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

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/standard_view"
        style="@style/Theme.CustomViews.MorphInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/custom_view">

        <MultiAutoCompleteTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint" />

    </com.google.android.material.textfield.TextInputLayout>
class MorphInputText @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : androidx.appcompat.widget.AppCompatMultiAutoCompleteTextView(context, attrs, defStyleAttr) {

    init {
        this.threshold = 1
        val textWatcher = MorphInputTextWatcher
        this.addTextChangedListener(textWatcher)
    }

}

Solution

  • Change the defStyleAttr in the constructor:

    class MorphInputText @JvmOverloads constructor(
            context: Context,
            attrs: AttributeSet? = null,
            defStyleAttr: Int = R.attr.autoCompleteTextViewStyle
    ) : androidx.appcompat.widget.AppCompatMultiAutoCompleteTextView(context, attrs, defStyleAttr){
    
    }