Remove Android Spinner onClick item background

Question

I'm trying to remove the default highlight effect for Spinner item's onClick. I have my own specific spinner background which have radius in its corners. When I applied the new background, it still has its default background under my custom background. I've tried styling like this:

<style name="ExternalPSpinnerTheme" parent="Widget.AppCompat.Spinner.DropDown">
    <item name="android:listSelector">@color/transparent</item>
    <item name="android:listChoiceBackgroundIndicator">@color/transparent</item>
    <item name="android:listChoiceIndicatorSingle">@color/transparent</item>
    <item name="android:selectableItemBackground">@color/transparent</item>
    <item name="android:background">@drawable/spinner_sortfriend_background</item>
    <item name="android:cacheColorHint">@android:color/transparent</item>
    <item name="android:popupBackground">@drawable/spinner_sortfriend_background</item>
    <item name="android:dropDownSelector">@color/transparent</item>
</style>

I've tried changing the parent to Widget.AppCompat.Spinner but it didn't work.. PopupBackground and background works tho.

The other question is questioning on how to hide dividers and add its own spinner custom implementation, mine is asking about how to remove the default onClick highlight effect on the background. How did I try to achieve it? This is how:

if (position > 0 &&
   (position + 1) < mDataset.size()){
    divider.setVisibility(View.VISIBLE);
    convertView.setBackground(ContextCompat.getDrawable(context, R.drawable.spinner_dropdown_background_middle_white_to_migrey));
    } else if (position == 0){
        divider.setVisibility(View.VISIBLE);
        convertView.setBackground(ContextCompat.getDrawable(context, R.drawable.spinner_dropdown_background_top_white_to_migrey));
    } else if (position + 1 == mDataset.size()){
        divider.setVisibility(View.GONE);
        convertView.setBackground(ContextCompat.getDrawable(context, R.drawable.spinner_dropdown_background_bottom_white_to_migrey));
    }

And I still didn't get the right answer, I even tried the solution in the other question. I just realized something tho, only the background on the first item overlaps with my custom background click effect, but the one at the end of the list doesn't get overlapped.. Weird..

Any solution?

Answer 1

Create custom Spinner Layout in your xml as follows

<RelativeLayout
            android:id="@+id/relativeLayout_multiChoiceDropDown"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/drawable_border_profile">

        <TextView
            android:id="@+id/textView_multiChoiceDropDownText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:layout_marginBottom="@dimen/margin_5dp"
            android:layout_marginEnd="@dimen/margin_5dp"
            android:layout_marginStart="@dimen/margin_5dp"
            android:layout_marginTop="@dimen/margin_5dp"
            android:layout_toStartOf="@+id/button_multiChoiceDropDownArrow"
            android:padding="@dimen/margin_5dp"
            android:text="Select Item"
            android:textColor="@color/black"
            android:textSize="@dimen/text_size_16"/>


        <Button
            android:id="@+id/button_multiChoiceDropDownArrow"
            android:layout_width="@dimen/profile_multi_choice_width"
            android:layout_height="@dimen/profile_multi_choice_height"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/dropdownarrow"/>
    </RelativeLayout>

drawable_border_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#80FFFFFF"/>
    <stroke
        android:width="0.5dp"
        android:color="@color/light_gray"/>
    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"/>
</shape>

Then Set OnClickListener on RelativeLayout. On that You can open Popup Window

LayoutInflater inflater = (LayoutInflater)parentActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.pop_up_window, null);
    RelativeLayout layout1 = holder.relativeLayout_multiChoiceDropDown;

    pw = new PopupWindow(layout, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);

    pw.setBackgroundDrawable(new BitmapDrawable());
    pw.setTouchable(true);
    pw.setOutsideTouchable(true);
    pw.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

    pw.setTouchInterceptor(new View.OnTouchListener()
    {
        public boolean onTouch(View v, MotionEvent event)
        {
            if (event.getAction() == MotionEvent.ACTION_OUTSIDE)
            {
                pw.dismiss();
                return true;
            }
            return false;
        }
    });

pw.setContentView(layout);
pw.showAsDropDown(layout1, -5, 0);

final ListView list = (ListView) layout.findViewById(R.id.dropDownList);
Adapter_DropDown adapter = new Adapter_DropDown(parentActivity, items);
list.setAdapter(adapter);

pop_up_window.xml

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

<ListView
    android:id="@+id/dropDownList"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="#000"
    android:dividerHeight="0.5dp">
</ListView>

Answer 2

You can use customArray Adapter

public class Adapter_Spinner extends ArrayAdapter
{
    Context context;
    List<Response_IdDesc> dataArray;

    public Adapter_Spinner(Context context, int textViewResourceId, List<Response_IdDesc> dataArray)
    {
        super(context, textViewResourceId, dataArray);
        this.dataArray = dataArray;
        this.context = context;

    }

    @Override public Response_IdDesc getItem(int position)
    {
        return dataArray.get(position);
    }

    @Override public int getCount()
    {
        return dataArray.size();
    }

    @Override public int getPosition(Object item)
    {
        return dataArray.indexOf(item);
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent)
    {
        return getCustomView(position, convertView, parent);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        return getCustomView(position, convertView, parent);
    }

    public View getCustomView(int position, View convertView, ViewGroup parent)
    {

        LayoutInflater inflater = LayoutInflater.from(context);

        View view = inflater.inflate(R.layout.rowitem_spinner_profile, parent, false);
        TextView label = (TextView) view.findViewById(R.id.textview_spinner);

        label.setText(dataArray.get(position).DESC);

        return view;
    }
}

Then set your spinner adapter like this

Adapter_Spinner adapter_spinner = new Adapter_Spinner(parentActivity, R.layout.rowitem_spinner, list);
spinner.setAdapter(adapter_spinner);