Customize divider / separator in dropdown of an AutocompleteTextview

Question

I've seen this question asked some other times on the site, but no one couldn't get any answer.

Is there any way to customize the appearance of the divider in the dropdown showing when using an AutocompleteTextview in android?

It's pretty easy for a ListView, but using only an ArrayAdapter for the autocompletetextview, is there any way to customize the divider.

(Not the textview, I already know doing that)

Answer 1

Im not sure how you can do it for single AutoCompleteTextView but I know how to set it for the whole application. This should also help you :)

<style name="MyTheme" parent="AppTheme">
        <item name="android:dropDownListViewStyle">@style/MyListViewStyle</item>
</style>

<style name="MyListViewStyle" parent="@android:style/Widget.ListView">
        <item name="android:divider">#F00</item>
        <item name="android:dividerHeight">1px</item>
</style>

Answer 2

I didnt find any divider properties so I did this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="Medium Text"
    android:id="@+id/textView129"
    android:textColor="#000000"
    android:background="@color/white"
    android:layout_marginBottom="1dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"/>
</LinearLayout>

So wat im doing is I have a background color for the Linear layout and another background color for the text View (textView's background color overlaps the linear layout's background color) now using the margin property and setting the bottom margin of textview to 1dp u'll get a clean line between elements....

Answer 3

I had faced same problem and try many ways but not achieve result, at last i got a quick and easy way to set divider and divider lenght with AutocompleteTextview. Basically we can set a border from bottom side with TextView of ArrayAdapter Layout. Like as

step1. Make a layout for arrayadapetr like as

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/testt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/background_single_line"
android:textColor="@drawable/text_color"
android:textAppearance="?android:attr/textAppearanceMediumInverse"
style="?android:attr/dropDownItemStyle"
android:maxLines="1"
android:padding="3dp"
android:textSize="16sp" />

step2: in drawable folder create new layout its name background_single_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/black" />
    </shape>
</item>
<item android:bottom="1dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/white" />
    </shape>
</item>

Finally looks as divider .

Answer 4

The answer from Mark is normally the best solution. However different versions of the AppCompat library have different behavior, regarding how android:dropDownListViewStyle affects other menus, like the system overflow/options menu. For example, in AppCompat version 23.0.1, it will not affect this menu in the ActionBar/Toolbar; whereas version 23.2.1 it will affect it, as explained here.

If you want a style that is isolated to only affect the AutoCompleteTextView, it may not be possible. But an alternative way is to create the list divider image manually, as part of the layout of the dropdown list row:

res/layout/autocomplete_list_row.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:layout_height="50dip">

    <TextView
        android:id="@+id/text"
        style="?android:attr/dropDownItemStyle"
        android:textSize="18sp"
        android:layout_width="fill_parent"
        tools:text="An auto-complete list item"
        android:minHeight="48dip"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dip"
        android:background="@drawable/divider"/>

</LinearLayout>

res/drawable/divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle">
    <size android:height="1dp" />
    <solid android:color="#458c8c8c" />
</shape>

Then use this layout in your adapter for the AutoCompleteTextView:

ArrayAdapter<CharSequence> autoCompleteListAdapter = 
    new ArrayAdapter<>(context,
                       R.layout.autocomplete_list_row,
                       R.id.text, arrayList);

Similar approach using ConstraintLayout here.