Android-XML custom spinner

Question

I'm developing an Android app, and I have a fragment with a form with some spinners and one searchable spinner. Now all the spinners have the style="@android:style/Widget.Spinner.DropDown" that make the spinner like this https://csharpcorner.azureedge.net/article/how-we-can-search-spinner-item-using-kotlin-in-android-studio/Images/8.png. The searchable spinner have also a close button and a custom design like this https://csharpcorner.azureedge.net/article/how-we-can-search-spinner-item-using-kotlin-in-android-studio/Images/9.png. Now I want to change the design, for example make the spinner background color light blue and change the text "Select item" and the text of the "Close" button inside the searchable spinner, but I don't know how to do this. Can someone help me? xml of some spinners:

                android:id="@+id/customerSpinner"
                style="@android:style/Widget.Spinner.DropDown"
                android:layout_width="350dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/MarginStart20"
                android:layout_marginTop="5dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/TextView6" />

            <TextView
                android:id="@+id/TextView7"
                style="@style/TitleStyle"
                android:text="@string/field_text"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/customerSpinner" />

            <Spinner
                android:id="@+id/fieldSpinner"
                style="@android:style/Widget.Spinner.DropDown"
                android:layout_width="350dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/MarginStart20"
                android:layout_marginTop="5dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/TextView7" /> ``

Answer 1

Here What I have tried when I started learning android hope it helps you

Here is an example

Declare an Array of data like this with your drawable Files

You can declare it publicly or in Oncrete method

// Declaring the String Array with the Text Data for the Spinners

String[] Languages = { "Select a Language", "C# Language", "HTML Language",
"XML Language", "PHP Language" };

// Declaring the Integer Array with resource Id's of Images for the Spinners

Integer[] images = { 0, R.drawable.image_1, R.drawable.image_2,
R.drawable.image_3, R.drawable.image_4 };

Find your Spinner in on create method and add an adapter to it

// Declaring and typecasting a Spinner

Spinner mySpinner = (Spinner) findViewById(R.id.spinner1);
 
// Setting a Custom Adapter to the Spinner

mySpinner.setAdapter(new MyAdapter(MainActivity.this, R.layout.custom,
Languages));

Now Your Adapter will look like this

Here Adapter will take data from the array and set it to the custom view like a recycler view

// Creating an Adapter Class

public class MyAdapter extends ArrayAdapter {
 
public MyAdapter(Context context, int textViewResourceId,
String[] objects) {
super(context, textViewResourceId, objects);
}
 
public View getCustomView(int position, View convertView,
ViewGroup parent) {
 
// Inflating the layout for the custom Spinner

LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(R.layout.custom, parent, false);
 
// Declaring and Typecasting the textview in the inflated layout
TextView tvLanguage = (TextView) layout
.findViewById(R.id.tvLanguage);
 
// Setting the text using the array

tvLanguage.setText(Languages[position]);
 
// Setting the color of the text
tvLanguage.setTextColor(Color.rgb(75, 180, 225));
 
// Declaring and Typecasting the imageView in the inflated layout

ImageView img = (ImageView) layout.findViewById(R.id.imgLanguage);
 
// Setting an image using the id's in the array

img.setImageResource(images[position]);
 
// Setting Special attributes for 1st element

if (position == 0) {

// Removing the image view

img.setVisibility(View.GONE);

// Setting the size of the text

tvLanguage.setTextSize(20f);

// Setting the text Color

tvLanguage.setTextColor(Color.BLACK);
 
}
 
return layout;
}
 
// It gets a View that displays in the drop down popup the data at the specified position
@Override
public View getDropDownView(int position, View convertView,
ViewGroup parent) {
return getCustomView(position, convertView, parent);
}
 
// It gets a View that displays the data at the specified position
@Override
public View getView(int position, View convertView, ViewGroup parent) {
return getCustomView(position, convertView, parent);
}
}

XML file for the spinner or your main activity where you have a spinner

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

    <Spinner android:drawSelectorOnTop="true" android:id="@+id/spinner1" android:layout_width="match_parent" android:layout_height="wrap_content" android:prompt="@string/select">
</LinearLayout>

Create a file name custom.xml

This XML file for showing views like image and text view

for example here an image of c#& its title

Here You can set the background color and as per your need changes

<LinearLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="3dip">
    <ImageView android:id="@+id/imgLanguage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher">
    </ImageView>
    <TextView android:id="@+id/tvLanguage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="8dp" android:text="Text Here">
    </TextView>
</LinearLayout>

here it will look like this