How to Customize a Spinner in Android Studio
Tags: Android App Development, Customize Spinner, AndroidDev, Technology, Programming

Create a new project using an Android studio then go to the resource folder I mean res folder in your android studio project after it expands the values folder and double click on the strings.xml file and make a string array in it with your own values which you want to display in your custom spinner. As I make a String array in the following image.

String array for the custom spinner

After doing this task you should expand the “layout” folder make a layout file named “custom_spinner.xml”. In this file, you can design a popup window UI (User Interface). I design the layout like the following image.

In the above image, I have taken CardView as a root view with 10 max elevations and layout width and layout height with match_parent value. A RelativeLayout is taken as child layout of CardView with match_parent value of layout width and height. The id of the RelativeLayout is taken as “rl_custom_layout”.

And finally, a ListView is used in the RelativeLayout for displaying the items as scrollable and selectable. In the ListView, I specified the entries attribute and the string array as a value of it. This String Array I created earlier in our project’s Strings.xml file. Using the entries attribute, we don’t need to make an Adapter object in our Java coding and setting it to the ListView. So this is a short and easier way to bind String Array to ListView. It is done for our popup window layout which will display as a custom spinner in our MainActivity.

Before moving towards MainActivity, we should go to the drawable folder and right-click on it then go to the new option then select vector asset and find down arrow icon like the following image. And click the ok button. It will add to your drawable folder.

Select the down arrow for the spinner

After it, go to the java folder of your project make a package named “SaudSpinner” and make a new java class with the name “SaudSpinner” extends this class with TextView like the following image.

Customize the text view for the custom spinner

In the above image, I have created three constructors with different parameters for handling the attributes of our custom spinner attributes. And also I have created the inti() method which takes the AtttributeSet object as a parameter. This method called through the constructors of SaudSpinner class.

Init Method

The init method takes the AttributeSet object as a parameter if the AttributeSet object null it will not do any things if attributes are provided to SaudSpinner then it will set padding 5 to all dimensions of the spinner. For setting the padding to the spinner I called the setPadding method which required four parameters like left, top, right, and bottom paddings.

After it, I need to display a down icon to the right side of the spinner. So for this purpose, I called setCompoundDrawablesWithIntrinsicBounds with requires four-parameter as well like left, top, right, bottom drawable resources. So I need a down icon on the right side of the spinner that’s why I pass drawable resources as third parameter R.drawable.ic_baseline_arrow_drop_down_24 and the other parameter’s value is given “0”.

So I want to display select text in the center of the spinner. So for this purpose, I called the setGravity method and pass this value Gravity.CENTER_VERTICAL. So that’s it for this SaudSpinner class.

activity_main.xml

Now Go to the activity_main.xml file and write our custom spinner name class which is “SaudSpinner”. For applying the ripple effect on our custom spinner I have specified two attributes like below.

1. android:background=”?attr/selectableItemBackground”

2. android:clickable=”true”

Layout for custom spinner

MainActivity.java

MainActivity.java

MainActivity.java

In MainActivity class I have declared two objects of PopupWindow and SaudSpinner and initialized the SaudSpinner object by using findViewById method. I have set onclick listener on our custom spinner class which is SaudSpinner. In onClick listener, I called the layout inflater service using the getSystemService method. Using the LayoutInflater object I inflated our custom spinner layout. In the next line, I am getting the phone screen height and then divide it by 2. So that I am able to get half-height of the screen and put this height for Popup window so in this way we can specify the dynamic height of our custom spinner according to the screen height. In the next line, I have initialized the PopupWindow object, I need to pass four parameters from the constructor. It requires view, width, height, and a focusable boolean value. So I passed the custom spinner view which I inflated. The second parameter is the width of the Popup window so I specified width wrap_content and the third parameter is height, the height value is in pixels which is half the phone screen, and the fourth value I passed true to make it focusable.

so now I have declared and initialized the ListView object and set the on item click listener, in the onItemClick method I have got the item and converted it to string and store it in “s” string variable. Then I have given the delay for one second by making a new thread just displaying the ripple effect and animation on item click. After giving the one-second delay I have called the dismiss method of the popup window.

Now I have created two animation files in “anim” folder. One for entry animation and the second for the closing animation.

you can see it in the below screenshot

fade_out.xml

anim/fade_out.xml

popupwindow.xml

anim/popupwindow.xml

Then I have created a separate style in theme.xml file. Style is given below.

theme.xml or syle.xml

Then in the MainActivity.java file, I have set the animation style to the popupwindow object and called the showasdropdown method for displaying the popupwindow below the Custom spinner view. Check the screenshot.