custom spinner adapter android kotlin

Spinner Custom Item Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageViewFlag"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="5dp"
        app:layout_constraintEnd_toStartOf="@+id/textViewCountryName"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:id="@+id/textViewCountryName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Demo"
        android:textColor="#000"
        android:padding="7dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageViewFlag"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Spinner Custom Adapter

package com.example.customspinnerexamplekotlin

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import kotlinx.android.synthetic.main.item_custom_spinner.view.*


class CustomSpinnerAdapter(ctx: Context, countries: ArrayList<CountryData>) : ArrayAdapter<CountryData>(ctx, 0, countries) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createItemView(position, convertView, parent);
    }

    override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
        return createItemView(position, convertView, parent);
    }

    fun createItemView(position: Int, recycledView: View?, parent: ViewGroup):View {
        val country = getItem(position)

        val view = recycledView ?: LayoutInflater.from(context).inflate(
                R.layout.item_custom_spinner,
                parent,
                false
        )

        country?.let {
            view.imageViewFlag.setImageResource(country.flag)
            view.textViewCountryName.text = country.countryName
        }
        return view
    }
}

CountryData Object

package com.example.customspinnerexamplekotlin

class CountryData (val countryName: String,
                   val flag: Int)

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f3f3f3">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="16dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="16dp" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/tv_selected_item"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Select Country from below spinner"
        android:textColorHint="#000000"
        app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
        app:layout_constraintStart_toStartOf="@id/guidelineStart"
        app:layout_constraintTop_toTopOf="parent">
    </com.google.android.material.textview.MaterialTextView>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_spinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#ffffff"
        android:padding="5dp"
        app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
        app:layout_constraintStart_toStartOf="@+id/guidelineStart"
        app:layout_constraintTop_toBottomOf="@id/tv_selected_item">

        <androidx.appcompat.widget.AppCompatSpinner
            android:id="@+id/spinner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.example.customspinnerexamplekotlin

import android.os.Bundle
import android.view.View
import android.widget.AdapterView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setCustomAdapterSpinner()
    }

    fun setCustomAdapterSpinner() {

        val country_list = arrayListOf<CountryData>()

        country_list.add(CountryData("India", R.drawable.ic_flag_black_24dp))
        country_list.add(CountryData("United States", R.drawable.ic_flag_black_24dp))
        country_list.add(CountryData("Indonesia", R.drawable.ic_flag_black_24dp))
        country_list.add(CountryData("France", R.drawable.ic_flag_black_24dp))
        country_list.add(CountryData("China", R.drawable.ic_flag_black_24dp))

        val adapter = CustomSpinnerAdapter(
                this,
                country_list
        )

        spinner.adapter = adapter

        spinner.setOnItemSelectedListener(object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(parent: AdapterView<*>?, p1: View?, pos: Int, p3: Long) {
                Toast.makeText(this@MainActivity, "" + (parent?.getItemAtPosition(pos) as CountryData).countryName, Toast.LENGTH_SHORT).show()
            }

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

        // dynamically adding data after setting adapter to spinner

        country_list.add(CountryData("Japan", R.drawable.ic_flag_black_24dp))
        country_list.add(CountryData("New Zealand", R.drawable.ic_flag_black_24dp))
        country_list.add(CountryData("Other", R.drawable.ic_flag_black_24dp))

        adapter.notifyDataSetChanged()
    }

}

Android kotlin Custom Spinner Adapter example

Custom spinner Adapter with image and text android kotlin