How to add separate text color and background color in a spinner (drop down) in Android?

Question

I want a white background for the android spinner (drop down) and black color for the text in the spinner, however when I set the background color to be white, my text also becomes white and disappears. How can I make sure that the text is black and the background is white. Attached is the code snippet for my xml file.

<Spinner
    android:id="@+id/spinnerDropDown"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginEnd="80dp"
    android:layout_marginRight="80dp"
    android:background="@color/white"
    android:text="@color/black"
    android:spinnerMode="dropdown"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.253" />

I want it to look like this as shown in the image attached here

Answer 1

You can create your own Adapter and you can change all colors as you want. I use CardView for changing Spinner's background and also Spinner looks better with CardView.

your xml (replaced Spinner's constraints to CardView)

 <androidx.cardview.widget.CardView
            android:id="@+id/cardview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="80dp"
            app:cardCornerRadius="4dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.253">
    
        <Spinner
            android:id="@+id/spinner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        </androidx.cardview.widget.CardView>

spinner.xml (for changing text and background color)

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

    <TextView
        android:id="@+id/tv_spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:textSize="16sp" />

</LinearLayout>

AdapterSpinner.class

public class AdapterSpinner extends ArrayAdapter{

    Context context;
    List<String> liste;
    int dropDownBackground, dropDownTextColor, textColor;


    public AdapterSpinner(Context context, CardView cv, Spinner spinner,List<String> liste, int background, int textColor, int dropDownBackground, int dropDownTextColor) {
        super(context, 0, liste);
        this.context = context;
        this.liste = liste;
        this.textColor = textColor;
        this.dropDownTextColor = dropDownTextColor;
        this.dropDownBackground = dropDownBackground;
        if (cv != null) {
            cv.setCardBackgroundColor(background);
        }
        spinner.getBackground().setColorFilter(textColor, PorterDuff.Mode.SRC_IN);
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View view, @NonNull ViewGroup parent) {
        if (view == null) {
            view = LayoutInflater.from(context).inflate(R.layout.spinner, parent, false);
        }
        TextView tv = view.findViewById(R.id.tv_spinner);
        tv.setText(getItem(position).toString());
        tv.setTextColor(textColor);
        view.setPadding(20, 0, 0, 0);
        return view;
    }

    @Override
    public View getDropDownView(int position, @Nullable View view, @NonNull ViewGroup parent) {
        if (view == null) {
            view = LayoutInflater.from(getContext()).inflate(R.layout.spinner, parent, false);
        }
        TextView tv = view.findViewById(R.id.tv_spinner);
        tv.setText(getItem(position).toString());
        tv.setTextColor(dropDownTextColor);
        tv.setPadding(20, 10, 20, 10);
        view.setBackgroundColor(dropDownBackground);
        return view;
    }
}

Inside your activity:

int background = ContextCompat.getColor(this, R.color.white);
int textColor = ContextCompat.getColor(this, R.color.black);
int dropBackground = ContextCompat.getColor(this, R.color.white);
int dropTextColor = ContextCompat.getColor(this, R.color.black);
Spinner sp = findViewById(R.id.spinner);
CardView cv = findViewById(R.id.cardview);
AdapterSpinner adapter = new AdapterSpinner(this, cv, sp, list, background, textColor, dropBackground, dropTextColor);
sp.setAdapter(adapter);