Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
🎨 UI – Views और Layouts  ·  Lesson 15

Spinner, AutoComplete और Date/Time Pickers

Spinner

Spinner चुनी हुई value दिखाता है और tap पर list खोलता है। इसके items adapter से आते हैं।

XML
<Spinner
    android:id="@+id/spClass"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<!-- res/values/arrays.xml -->
<string-array name="classes">
    <item>Class 9</item>
    <item>Class 10</item>
    <item>Class 11</item>
    <item>Class 12</item>
</string-array>
Kotlin
val classes = resources.getStringArray(R.array.classes)
val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, classes)
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
binding.spClass.adapter = adapter

binding.spClass.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>, view: View?, position: Int, id: Long) {
        Log.d("Form", "Selected ${classes[position]}")
    }
    override fun onNothingSelected(parent: AdapterView<*>) {}
}
val selected = binding.spClass.selectedItem as String
string-arrayClass 9…12ArrayAdapteritems → rowsSpinnerselected दिखाताonItemSelectedposition
Adapters data को list जैसे views से जोड़ते हैं — RecyclerView जैसा ही idea
XML + Kotlin
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilSubject"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Subject">

    <com.google.android.material.textfield.MaterialAutoCompleteTextView
        android:id="@+id/actvSubject"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>

// Kotlin
val subjects = listOf("Maths", "Physics", "Chemistry", "Biology", "English")
binding.actvSubject.setAdapter(ArrayAdapter(this, android.R.layout.simple_list_item_1, subjects))
binding.actvSubject.setText(subjects.first(), false)        // false = do not filter
binding.actvSubject.setOnItemClickListener { _, _, position, _ ->
    Toast.makeText(this, subjects[position], Toast.LENGTH_SHORT).show()
}
9:41▮▮ 85%New note⋮Subject: Maths ▾MMathsPPhysicsCChemistryBBiology9:41▮▮ 85%Profile⋮City: AlAAligarhAAllahabad
Exposed dropdown और AutoComplete suggestions

AutoCompleteTextView suggestions

XML + Kotlin
<AutoCompleteTextView
    android:id="@+id/actvCity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:completionThreshold="1"
    android:hint="City" />

// Kotlin – suggestions appear after typing 1 letter
val cities = arrayOf("Agra", "Aligarh", "Allahabad", "Delhi", "Dehradun", "Lucknow")
binding.actvCity.setAdapter(ArrayAdapter(this, android.R.layout.simple_list_item_1, cities))

MaterialDatePicker

Kotlin
import com.google.android.material.datepicker.CalendarConstraints
import com.google.android.material.datepicker.DateValidatorPointForward
import com.google.android.material.datepicker.MaterialDatePicker
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale
import java.util.TimeZone

binding.btnDate.setOnClickListener {
    val constraints = CalendarConstraints.Builder()
        .setValidator(DateValidatorPointForward.now())       // no past dates
        .build()
    val picker = MaterialDatePicker.Builder.datePicker()
        .setTitleText("Exam date")
        .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
        .setCalendarConstraints(constraints)
        .build()
    picker.addOnPositiveButtonClickListener { utcMillis ->
        val fmt = SimpleDateFormat("dd MMM yyyy", Locale.getDefault())
        fmt.timeZone = TimeZone.getTimeZone("UTC")            // the selection is UTC midnight
        binding.btnDate.text = fmt.format(Date(utcMillis))
    }
    picker.show(supportFragmentManager, "date")
}

MaterialTimePicker

Kotlin
import com.google.android.material.timepicker.MaterialTimePicker
import com.google.android.material.timepicker.TimeFormat

binding.btnTime.setOnClickListener {
    val picker = MaterialTimePicker.Builder()
        .setTimeFormat(TimeFormat.CLOCK_12H)
        .setHour(9)
        .setMinute(30)
        .setTitleText("Class time")
        .build()
    picker.addOnPositiveButtonClickListener {
        val h = picker.hour
        val m = picker.minute
        val amPm = if (h < 12) "AM" else "PM"
        val h12 = if (h % 12 == 0) 12 else h % 12
        binding.btnTime.text = String.format(Locale.getDefault(), "%d:%02d %s", h12, m, amPm)
    }
    picker.show(supportFragmentManager, "time")
}
9:41▮▮ 85%Exam dateMon, 24 Nov🛍️17🛍️18🛍️24 ✓🛍️25CancelOK9:41▮▮ 85%Class time⋮09 : 30 AM🕘 clock faceCancelOK
Material date और time pickers

Date + time साथ में

Kotlin – Student Diary
// From Student Diary – AddEditNoteFragment.pickDateTime()
datePicker.addOnPositiveButtonClickListener { utcMillis ->
    val utc = Calendar.getInstance(TimeZone.getTimeZone("UTC")).apply { timeInMillis = utcMillis }
    val timePicker = MaterialTimePicker.Builder().setTimeFormat(TimeFormat.CLOCK_12H).setHour(9).build()
    timePicker.addOnPositiveButtonClickListener {
        val local = Calendar.getInstance().apply {
            set(utc.get(Calendar.YEAR), utc.get(Calendar.MONTH), utc.get(Calendar.DAY_OF_MONTH),
                timePicker.hour, timePicker.minute, 0)
        }
        dueAt = local.timeInMillis              // used to schedule the reminder
    }
    timePicker.show(childFragmentManager, "time")
}
Date pickerUTC midnightUTC Calendary, m, dTime pickerhour, minuteLocal CalendartimeInMillis
दोनों pickers को एक timestamp में जोड़ें

आम गलतियाँ

  • Date picker result को local time में format करना → कुछ time zones में पिछला दिन दिखता है। इसे UTC मानें।
  • Activity में pickers childFragmentManager से दिखाना → supportFragmentManager use करें (Fragments में childFragmentManager)।
  • Filtering on वाला exposed dropdown → setText के बाद list में एक ही item दिखता है; दूसरे argument में false दें।

सारांश

  • Spinner और dropdowns ArrayAdapter use करते हैं; selection position से पढ़ें।
  • TextInputLayout के अंदर Material exposed dropdown को प्राथमिकता दें।
  • Date-time input के लिए MaterialDatePicker (UTC millis) + MaterialTimePicker (hour/minute)।
✅ Practice

"Exam form" बनाइए: class (exposed dropdown), city (AutoComplete), exam date (सिर्फ़ future dates) और time। "Submit" के बाद सब एक TextView में दिखाइए।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

Spinner या exposed dropdown menu?
दोनों चुनने के लिए list दिखाते हैं। Material exposed dropdown TextInputLayout fields से मेल खाता है, hint, errors और typing support करता है, इसलिए modern forms में बेहतर दिखता है।
MaterialDatePicker UTC में time क्यों देता है?
Selection चुने गए दिन की UTC midnight होती है। UTC Calendar से year, month, day निकालें, फिर local Calendar बनाएँ।
Users को पुरानी dates चुनने से कैसे रोकें?
Date picker builder पर DateValidatorPointForward.now() के साथ CalendarConstraints set करें।
← Android Tutorial (Kotlin)
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

अगला topicScrollView, CardView और Material Components आपकी प्रगति: 15 / 43 (35%) · Lesson 16 / 43 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें