Setting AppCompatAutoCompleteTextView dropdown width with margins

Question

I have the following AppCompatAutoCompleteTextView -

<androidx.appcompat.widget.AppCompatAutoCompleteTextView
            android:id="@+id/phoneNumberPrefixTextView"
            style="@style/PrimaryEditText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/credit_card_form_height"
            android:gravity="center"
            android:dropDownWidth="match_parent"
            android:inputType="number"
            android:maxLength="3" />

With the following list item XML -

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingHorizontal="@dimen/padding_16">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/country_edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/padding_16"
        android:layout_marginVertical="@dimen/padding_16"
        android:fontFamily="@font/montserrat_regular"
        android:textColor="@color/light_black"
        android:textSize="@dimen/text_size_normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Israel" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/country_code_edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/padding_4"
        android:fontFamily="@font/montserrat_regular"
        android:textColor="@color/fog_medium"
        android:textSize="@dimen/text_size_normal"
        app:layout_constraintBottom_toBottomOf="@+id/country_edit_text"
        app:layout_constraintStart_toEndOf="@+id/country_edit_text"
        app:layout_constraintTop_toTopOf="@+id/country_edit_text"
        tools:text="+972" />


</androidx.constraintlayout.widget.ConstraintLayout>

and the following ArrayAdapter -

class CountriesWithCodeAdapter(
    context: Context,
    resource: Int,
    private val items: MutableList<Countries.Country>
) : ArrayAdapter<Countries.Country>(context, resource, items) {

    private val originalList: List<Countries.Country> = items.toList()
    private var filteredItems: List<Countries.Country> = items.toList()

    override fun getItem(position: Int): Countries.Country {
        return items[position]
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val binding: CreditCardCountryWithCodeItemBinding =
            if (convertView != null) {
                CreditCardCountryWithCodeItemBinding.bind(convertView)
            } else {
                CreditCardCountryWithCodeItemBinding.inflate(
                    LayoutInflater.from(context),
                    parent, false
                )
            }
        binding.countryEditText.text = items[position].name
        binding.countryCodeEditText.text = items[position].callingCode
        return binding.root
    }

    override fun getFilter(): Filter = object : Filter() {
        override fun performFiltering(constraint: CharSequence?): FilterResults {
            val charString = constraint.toString().lowercase(Locale.getDefault()).trim()

            filteredItems = if (charString.isEmpty()) {
                originalList.toList()
            } else {
                originalList.filter { country ->
                    country.callingCode.contains(charString, ignoreCase = true)
                }
            }

            val filterResults = FilterResults()
            filterResults.values = filteredItems
            return filterResults
        }

        override fun publishResults(constraint: CharSequence?, results: FilterResults?) {
            @Suppress("UNCHECKED_CAST")
            filteredItems = results?.values as? List<Countries.Country> ?: emptyList()
            if (filteredItems.isEmpty()) {
                clear()
                notifyDataSetChanged()
            } else {
                clear()
                addAll(filteredItems)
                notifyDataSetChanged()
            }
        }
    }
}

I am trying to achieve a behavior that will introduce paddings in the dropdown items. I added into the list items padding to the root parent alongside setting android:dropDownWidth="match_parent" but it seems to not actually do anything. What am I missing?

Answer 1

Assuming you are trying to achieve horizontal margin on your autocomplete textView, You can try creating seperate layout for autocomplete textView and include inside your parent layout like this below which will set horizontal padding/margin of 16 on your auto complete textView:-

Parent Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginHorizontal="16dp"
    tools:context=".messageCenter.MessageCenterFragment">
    <include
        android:id="@+id/ilAutoCompleteTextView"
        layout="@layout/autocomplete_textview"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Child Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000"
        android:hint="Enter Your Name Here"
        android:padding="15dp"
        android:textColorHint="#fff"
        android:textStyle="bold|italic" />
</RelativeLayout>

Now your code :-

val fruits = arrayOf("Apple", "Banana", "Cherry", "Date", "Grape", "Kiwi", "Mango", "Pear")

        val adapter = ArrayAdapter(requireContext(), R.layout.select_dialog_item, fruits)
        //Getting the instance of AutoCompleteTextView
        val actv = binding.ilAutoCompleteTextView.autoCompleteTextView
        actv.threshold = 1 //will start working from first character
        actv.setAdapter(adapter) //setting the adapter data into the AutoCompleteTextView
        actv.setTextColor(Color.RED)