Custom Spinner with ImageView and TextView in Android Kotlin Tutorial

In this tutorial, We will implement Custom Spinner Adapter using Kotlin.
We will use Base Adapter class and custom layout for spinner adapter item.
We will display spinner item with ImageView and TextView.

We will also cover:

  • Spinner on item select listener.
  • Adding hint in spinner (Add first item in spinner as Hint and change its color to gray and disable it so user cannot select first item).

Add Spinner Widget in layout.xml

<Spinner
    android:id="@+id/spinnerTariffCalculator"
    android:layout_width="match_parent"
    android:layout_height="42dp"
    android:background="@drawable/bg_dropdown"
    android:spinnerMode="dropdown" />

Create XML drawable file for Spinner Background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item>
        <layer-list>
            <item>
                <shape>
                    <stroke
                        android:width="1dip"
                        android:color="@android:color/black" />
                    <corners android:radius="3dp" />
                    <solid android:color="@android:color/transparent"></solid>
                    <padding
                        android:bottom="5.0dip"
                        android:left="5.0dip"
                        android:right="5.0dip"
                        android:top="5.0dip" />
                </shape>
            </item>
            <item>
                <bitmap
                    android:gravity="center_vertical|right"
                    android:src="@drawable/chevron_down" />
            </item>
        </layer-list>
    </item>
</layer-list>

Creating Custom Adapter Class

This class will extend BaseAdapter class.

package com.es.mewphone.common

import android.content.Context
import android.support.v7.widget.RecyclerView
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.TextView

class CustomDropDownAdapter(val context: Context, var listItemsTxt: Array<String>) : BaseAdapter() {


    val mInflater: LayoutInflater = LayoutInflater.from(context)

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view: View
        val vh: ItemRowHolder
        if (convertView == null) {
            view = mInflater.inflate(R.layout.view_drop_down_menu, parent, false)
            vh = ItemRowHolder(view)
            view?.tag = vh
        } else {
            view = convertView
            vh = view.tag as ItemRowHolder
        }

    // setting adapter item height programatically.
     
        val params = view.layoutParams
        params.height = 60
        view.layoutParams = params

        vh.label.text = listItemsTxt.get(position)
        return view
    }

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

        return null

    }

    override fun getItemId(position: Int): Long {

        return 0

    }

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

    private class ItemRowHolder(row: View?) {

        val label: TextView

        init {
            this.label = row?.findViewById(R.id.txtDropDownLabel) as TextView
        }
    }
}

Creating layout file for Custom Spinner Adapter

// view_drop_down_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="42dp"
    android:layout_margin="32dp">

    <ImageView
        android:id="@+id/imgDropDownMenuIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_transaction_history" />

    <TextView
        android:id="@+id/txtDropDownLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_marginStart="6dp"
        android:gravity="center_horizontal"
        android:text="Residential"
        android:textColor="@android:color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/imgDropDownMenuIcon"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Set Spinner Adapter

val listItemsTxt = arrayOf("Residential", "Commercial")

var spinnerAdapter: CustomDropDownAdapter = CustomDropDownAdapter(context!!, listItemsTxt))
var spinner: Spinner = view.findViewById(R.id.spinnerTariffCalculator) as Spinner
spinner?.adapter = spinnerAdapter

Setting Spinner Item Selected Listener (Kotlin Code)

spinner?.setOnItemSelectedListener(object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>, view: View?, position: Int, id: Long) {

        
        } // to close the onItemSelected
    }

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

Output:

android custom spinner adapter
android custom spinner layout

copyright @ http://www.developine.com

Conclusion:

  • We have learned how to customize Spinner Widget in Android.
  • We have learned how to implement Base Adapter in Kotlin Android.
  • We added TextView and ImageView in our spinner.
Hello! I am Hammad Tariq. Jack of All trades and Yet master of Many! Senior Android Application Developer | Cross-platform Development | Flutter | Backend Development (Spring Boot + Kotlin + MySQL) | Blogger | Founder I am an all-around Mobile Developer who is passionate about learning the latest technologies and trends. I graduated from Air University Islamabad, Pakistan in 2015 but started working on Android Development, Universal Windows Apps development long before that. Currently, I am working as a team lead and Senior Android Developer at EVAMP SAANGA, Pakistan.
Posts created 40

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top