Custom Spinner using AppCompatSpinner in android

Akshay Kumar

28 April 2023

In this blog, we are going to learn about Custom Spinner using AppCompatSpinner in android.

Spinne widget display the list of items to the user for selection. When we click on the spinner then the dropdown list will be displayed. We can select an item for that spinner.

In this blog we are displaying a list of data with AppCompatSpinner. After click on the AppCompatSpinner widget then the list will be displayed for selection and we can choose any item form the list.

AppCompatSpinner is androidx component. It will display the list of items. After clicking on the AppCompatSpinner we are going to display the custom item list. After selecting the the item we will replace the value of the text view with selected item.

For creating the custom spinner with custom items and adapter this blog will help you for the same.

We are going to display the list of dial code with country flag using the custom spinner on this blog.

Please follow the below implementation steps for Custom Spinner using AppCompatSpinner in android with the custom adapter.

Implementation

Initial setup:

Add below dependency in your app-level build.gradle file.

dependencies {
    ...
    implementation 'com.google.android.material:material:1.4.0'

}

dependencies {

...

implementation 'com.google.android.material:material:1.4.0'

}

Implementation steps:

Create the spinner inside your xml file like below:

<androidx.appcompat.widget.AppCompatSpinner
                                android:id="@+id/spinner_country_code"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:maxLines="1"
                                android:singleLine="true"
                                android:textAlignment="viewStart"
                                android:textColor="@color/text_color_primary"
                                android:textSize="@dimen/text_size_medium"/>

<androidx.appcompat.widget.AppCompatSpinner

android:id="@+id/spinner_country_code"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:maxLines="1"

android:singleLine="true"

android:textAlignment="viewStart"

android:textColor="@color/text_color_primary"

android:textSize="@dimen/text_size_medium"/>

Setup the adapter and data for the spinner like below:

private fun setupSpinnerData() {

        try {
            val myJsonFile: InputStream = this.activity!!.assets.open("dial_code_data.json")
            val size: Int = myJsonFile.available()
            val buffer = ByteArray(size)
            myJsonFile.read(buffer)
            myJsonFile.close()
            val myJsonData = String(buffer, Charset.defaultCharset())
            val jsonResponse: CountryCodeListingResponseModel = ObjectMapper().readValue(myJsonData, CountryCodeListingResponseModel::class.java)

            val customDropDownAdapter = jsonResponse.country_code?.let { CountryCodeSpinnerAdapter(context!!.applicationContext, it) }
            mContentViewBinding.spinnerCountryCode.adapter = customDropDownAdapter

            setDefaultCountryCodeSelection(jsonResponse.country_code)

            mContentViewBinding.spinnerCountryCode.onItemSelectedListener = object :
                    AdapterView.OnItemSelectedListener {
                override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
                    // save code ==> jsonResponse.country_code!![position].dial_code!!
                    

                } // to close the onItemSelected

                override fun onNothingSelected(parent: AdapterView<*>?) {}
            }


        } catch (e: IOException) {
            e.printStackTrace()
        }

    }

private fun setupSpinnerData() {

try {

val myJsonFile: InputStream = this.activity!!.assets.open("dial_code_data.json")

val size: Int = myJsonFile.available()

val buffer = ByteArray(size)

myJsonFile.read(buffer)

myJsonFile.close()

val myJsonData = String(buffer, Charset.defaultCharset())

val jsonResponse: CountryCodeListingResponseModel = ObjectMapper().readValue(myJsonData, CountryCodeListingResponseModel::class.java)

val customDropDownAdapter = jsonResponse.country_code?.let { CountryCodeSpinnerAdapter(context!!.applicationContext, it) }

mContentViewBinding.spinnerCountryCode.adapter = customDropDownAdapter

setDefaultCountryCodeSelection(jsonResponse.country_code)

mContentViewBinding.spinnerCountryCode.onItemSelectedListener = object :

AdapterView.OnItemSelectedListener {

override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {

// save code ==> jsonResponse.country_code!![position].dial_code!!

} // to close the onItemSelected

override fun onNothingSelected(parent: AdapterView<*>?) {}

}

} catch (e: IOException) {

e.printStackTrace()

}

Adapter code will look like:

class CountryCodeSpinnerAdapter(private val mContext: Context, private val mListData: ArrayList<CountryCodeListItem>) :  BaseAdapter() {


    private val inflater: LayoutInflater = mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

        val view: View
        val holder: ViewHolder
        if (convertView == null) {
            view = inflater.inflate(R.layout.custom_spinner_country_code, parent, false)
            holder = ViewHolder(view)
            view?.tag = holder
        } else {
            view = convertView
            holder = view.tag as ViewHolder
        }

        val eachListData = mListData[position]
        holder.mBinding?.data = eachListData
        holder.mBinding?.executePendingBindings()

        return view
    }

    override fun getItem(position: Int): Any? {
        return mListData[position];
    }

    override fun getCount(): Int {
        return mListData.size;
    }

    override fun getItemId(position: Int): Long {
        return position.toLong();
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val mBinding: CustomSpinnerCountryCodeBinding? = DataBindingUtil.bind(itemView)
    }
}

class CountryCodeSpinnerAdapter(private val mContext: Context, private val mListData: ArrayList<CountryCodeListItem>) : BaseAdapter() {

private val inflater: LayoutInflater = mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

val view: View

val holder: ViewHolder

if (convertView == null) {

view = inflater.inflate(R.layout.custom_spinner_country_code, parent, false)

holder = ViewHolder(view)

view?.tag = holder

} else {

view = convertView

holder = view.tag as ViewHolder

}

val eachListData = mListData[position]

holder.mBinding?.data = eachListData

holder.mBinding?.executePendingBindings()

return view

}

override fun getItem(position: Int): Any? {

return mListData[position];

}

override fun getCount(): Int {

return mListData.size;

}

override fun getItemId(position: Int): Long {

return position.toLong();

}

class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

val mBinding: CustomSpinnerCountryCodeBinding? = DataBindingUtil.bind(itemView)

}

Adapter custom item layout is:

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="data"
            type="com.webkul.mobikul.models.CountryCodeListItem" />


    </data>

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1"
        android:paddingTop="@dimen/spacing_tiny">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="22dp"
            android:layout_height="match_parent"
            android:layout_weight="0.1"
            android:adjustViewBounds="true"
            app:imageUrl="@{data.image}" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:drawablePadding="@dimen/card_elevation_low"
            android:paddingEnd="@dimen/spacing_small"
            android:background="@color/material_background"
            android:gravity="end"
            android:layout_weight="0.9"
            android:padding="@dimen/spacing_tiny"
            android:text="@={data.dial_code}"
            android:textColor="@color/text_color_primary"
            android:textSize="@dimen/text_size_medium"
            app:drawableStartCompat="@drawable/ic_filled_arrow_down_wrapper" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</layout>

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools">

<data>

<variable

name="data"

type="com.webkul.mobikul.models.CountryCodeListItem" />

</data>

<androidx.appcompat.widget.LinearLayoutCompat

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:weightSum="1"

android:paddingTop="@dimen/spacing_tiny">

<androidx.appcompat.widget.AppCompatImageView

android:layout_width="22dp"

android:layout_height="match_parent"

android:layout_weight="0.1"

android:adjustViewBounds="true"

app:imageUrl="@{data.image}" />

<TextView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:drawablePadding="@dimen/card_elevation_low"

android:paddingEnd="@dimen/spacing_small"

android:background="@color/material_background"

android:gravity="end"

android:layout_weight="0.9"

android:padding="@dimen/spacing_tiny"

android:text="@={data.dial_code}"

android:textColor="@color/text_color_primary"

android:textSize="@dimen/text_size_medium"

app:drawableStartCompat="@drawable/ic_filled_arrow_down_wrapper" />

</androidx.appcompat.widget.LinearLayoutCompat>

</layout>

Model classes are:

class CountryCodeListingResponseModel()  {

    @JsonProperty("country_code")
    var country_code: ArrayList<CountryCodeListItem>? = ArrayList<CountryCodeListItem>()
    
    constructor(parcel: Parcel) : this() {
        country_code = parcel.createTypedArrayList(CountryCodeListItem.CREATOR)
       
    }

    
}


class CountryCodeListItem()  {

    @JsonProperty("dail_code")
    var dial_code: String? = ""

    @JsonProperty("image")
    var image: String? = ""
    

    constructor(parcel: Parcel) : this() {
        dial_code = parcel.readString()
        image = parcel.readString()
    }

    
}

class CountryCodeListingResponseModel() {

@JsonProperty("country_code")

var country_code: ArrayList<CountryCodeListItem>? = ArrayList<CountryCodeListItem>()

constructor(parcel: Parcel) : this() {

country_code = parcel.createTypedArrayList(CountryCodeListItem.CREATOR)

}

class CountryCodeListItem() {

@JsonProperty("dail_code")

var dial_code: String? = ""

@JsonProperty("image")

var image: String? = ""

constructor(parcel: Parcel) : this() {

dial_code = parcel.readString()

image = parcel.readString()

}

Conclusion:

In this blog, you have learned about the implementation of the Custom Spinner using AppCompatSpinner in android.

For more information regarding the AppCompatSpinner you can also check the link.

Thanks for reading this blog. You can also check other blogs from here.