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.
|
1 2 3 4 5 |
dependencies { ... implementation 'com.google.android.material:material:1.4.0' } |
Implementation steps:
Create the spinner inside your xml file like below:
|
1 2 3 4 5 6 7 8 9 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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.
Be the first to comment.