Cara Membuat Spinner atau ComboBox di Android Studio

PENDAHULUAN

     Pada beberapa aplikasi kita mengenal dengan istilah ComboBox dan ada juga di kenal dengan istilah selection. Nah di android studio atau dalam bahasa xml istilah ini di kenal dengan sebutan spinner. Spinner merupakan komponen dan bagian dari form input yang umun di pakai oleh development.

    Spinner sendiri merupakan rancangan berupa list yang jika komponen ini di pilih oleh user maka akan keluar daftar-daftar list dari komponen tersebut. Pembuatan spinner sendiri akan melibatkan fil string.xml di mana di dalam file ini akan di letakkan item-item dari spinner tersebut.

    Penulisan Spinner adalah seperti berikut

<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/data_spinner"/>

    Perhatikan attribut entries. Attribut tersebut akan berwaran merah/ error karena. Kasus ini terjadi karena kita mengakses data dari string.xml namun data tersebut belum kita buat. Untuk membuat item dari spinner sendiri  anda dapat masuk ke root App=>res=>values=>string.xml. Tambahkan script berikut pada file string.xml:

<resources>
<string name="app_name">LatihanApp</string>

<string-array name="data_spinner">
<item>Kotlin</item>
<item>Java</item>
</string-array>
</resources>

       

    Jika anda masuk ke halaman Design tentu tidak akan nampak item-item yang ada di dalam spinner. Jadi anda perlu menjalankan projek terlebih dahulu.  Sekarang coba jalankan program dan perhatikan pada sebelah kanan spinner terdapat tanda segitiga. Silahkan anda klik tanda tersebut untuk melihat list item yang telah kita buat di file string.xml tadi.

2. Memberi Aksi klik Pada Spinner

    Jika sebelumnya kita meletakkan data pada file String.xml maka  metode yang ke 2 ini kita akan mencoba meletetakkan data di dalam Arraly. Jadi kita perlu mendefenisikan spinner terlebih dahulu di halaman activity_main.xml. Perhatikan code berikut yang ada pada activity_main.xml

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

      

     Spinner kita beri 3 jenis attribut yaitu width, height dan id. Attribut android:id=".. " merupakan entitas dari komponen spiner yang akan di kenali oleh program nantinya. Pengenalan identitas ini dapat di tulis dalam code MainActivity.kt.

     Oke sekarang coba masuk ke halaman MainActivity.kt. Kita akan membuat data terlebih dahulu dalam bentuk array. Data kita adalah data jenis-jenis bahasa pemrograman. Data tersebut disimpan dalam variable bernama "bahasa." Penulisan variabel tersebut di tulis di bawah class. PErhatikan penulisan code di bawah ini:

class MainActivity : AppCompatActivity() {
var bahasa = arrayOf("PHP", "KOTLIM", "JAVA")

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

}
}

      Apa selanjutnya? Ingatkan di komponen Spinner kita memiliki attribut id dengan nilai "spin_bahasa", Nah identitas dari spinner tersebut akan kita panggil dan kita letakkan di dalam variable "spinBahasa. Perhatikan bagaimana pemanggilan id tersebut di code berikut:

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val spinBahasa: Spinner = findViewById(R.id.spinner)

}

    

    Kita butuh sebuah Adapter untuk memanggil spinner dan memberikan action terhadap item yang terpilih nantinya. Adapter merupakan perantara antara dua view yang akan menghubungakn ke dua view tersebut. Jadi selanjutnya kita tambahkan Adapter seperti yang terlihat pada code dibawah ini:

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

val spinBahasa: Spinner = findViewById(R.id.spin_bahasa)
val arrayAdapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, carmodels)
arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
spinBahasa!!.setAdapter(arrayAdapter)

}

    

    Nah, setelah adapter kita buat. sekarang mari kita beri action pada item di spinner. Method yang akan di tambah adalah onItemSelectedListener. Artinya ketika salah satu item di klik maka sebuah action akan terjadi. Perhatikan cara penambahannya di bawah ini:

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val spinBahasa: Spinner = findViewById(R.id.spin_bahasa)
val arrayAdapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, carmodels)
arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
spinBahasa!!.setAdapter(arrayAdapter)

spinBahasa!!.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {

}
}

    Perhatikan pada "object" terdapat garis merah menandakan error pada code. Bagaimana cara memperbaikinya? Arahkan cursor ke "object" tersebut sehingga muncul dialog. Pilih Implement Members. Nanti muncul kotak dialog  yang di dalamnya terdapat 2 class. Anda pilih ke 2 class yang ada di dalam kotak dialog tersebut kemudian klik OK. Otomatis 2 buah class akan di buat oleh android studion. Perhatikan code seperti berikut:

spinBahasa!!.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
override fun onItemSelected(
parent: AdapterView<*>?,
view: View?,
position: Int,
id: Long
) {
TODO("Not yet implemented")
}

override fun onNothingSelected(parent: AdapterView<*>?) {
TODO("Not yet implemented")
}
}

Terakhir kita bisa tambahkan toast sebagai sarana informasi yang menandakan item yang mana nanti yang terselection:

spinBahasa!!.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
override fun onItemSelected(
parent: AdapterView<*>?,
view: View?,
position: Int,
id: Long
) {
TODO("Not yet implemented")
Toast.makeText(this@MainActivity, bahasa[position], Toast.LENGTH_LONG).show()


}

override fun onNothingSelected(parent: AdapterView<*>?) {
TODO("Not yet implemented")
}
}

    Terakhir tinggal kita jalankan projek spinner kita. Silahkan anda klik Run atau tanda segitiga hijau di toolbar dan tunggu hingga emulator tampil. Nah berikut hasil dari projek spinner kita yang berjalan di emulator: 

    Berikut code lengkapnya:

package com.example.latihanapp

import android.os.Bundle
import android.view.View
import android.widget.AdapterView
import android.widget.ArrayAdapter
import android.widget.Spinner
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
var bahasa= arrayOf("PHP", "KOTLIM", "JAVA")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val spinBahasa: Spinner = findViewById(R.id.spin_bahasa)
val arrayAdapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, carmodels)
arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
spinBahasa!!.setAdapter(arrayAdapter)
spinBahasa!!.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
override fun onItemSelected(parent: AdapterView<*>?,view: View?, position: Int,id: Long) {
Toast.makeText(this@MainActivity, bahasa[position], Toast.LENGTH_LONG).show()
}
override fun onNothingSelected(parent: AdapterView<*>?) {
//no activity or action when nothing is selected
}
}
}
}

    Nah sampai disini kita telah sukses membuat 2 metode spinner di android studio dan kita juga bisa memberikan action terhadap item di spinner.