Pada tutorial kali ini akan membahas mengenai cara membuat spinner untuk aplikasi Android yang kita buat dengan Android Studio.

Spinner adalah sebuah daftar drop down, yang menghadirkan data untuk kita pilih di dalam sebuah aplikasi Android.

Di artikel ini kita akan membuat sebuah aplikasi Android yang berisi spinner sederhana yang memungkinkan kita memilih sebuah item dari sebuah daftar drop down.

Kita akan menampilkan sebuah data statis di spinner. Memilih sebuah item dari Spinner yang akan menampilkan pesan Toast.

Cara membuat spinner di aplikasi Android dengan Android Studio

Berikut adalah seluruh langkah yang perlu dilakukan jika ingin membuat sebuah spinner pada aplikasi Android menggunakan Android Studio.

Spinner Android

Sekali lagi saya ulang bahwa Spinner merupakan sebuah drop down yang kerap ditemukan dalam bahasa pemograman lainnya seperti pada halaman HTML.

Di dunia Android, Spinner di gunakan untuk memilih sebuah value (nilai) dari sejumlah value yang ada. Dan secara default, sebuah spinner menampilkan value yang terpilih. Menyetuh / mengklik spinner akan menampilkan sebuah menu drop down dengan semua value yang tersedia, dari sana kita dalam memilih sebuah nilai.

Dan Spinner berhubungan dengan AdapterView. Jadi kita harus membuat kelas adapter dengan Spinner.

Daftar drop down Android

Berikut ini adalah sebuah file xml yang menampilkan layout dari sebuah spinner tipikal di Android yang berisi sebuah teks label dan sebuah tag element spinner.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<!-- Text Label -->
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="Category:"
android:layout_marginBottom="5dp"
/>

<!-- Spinner Element -->
<Spinner
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="@string/spinner_title"
/>
</LinearLayout>

Berikut adalah kode mengenai bagaimana cara menggunakan sebuah spinner dalam kelas Activity.

Spinner spinner = (Spinner) findViewById(R.id.spinner);

Kini mari kita mengembangkan sebuah aplikasi dimana dapat melewati nilai yang dipilih dari Spinner ke layar berikut menggunakan Bundles dan menampilkan pesan Toast dari nilai yang dipilih disaat bersamaan.

Baca juga.

Contoh project Spinner Android

Berikut adalah gambar menunjukkan project untuk Spinner.

Struktur Project Spinner Android

Mari kita mulai dengan Layout kelas MainActivity. Kita hanya perlu menambah Tombol / Button pada file basic_spinner.xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


<LinearLayout
android:orientation="vertical"
android:padding="10dip"
android:id="@+id/linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<!-- Text Label -->
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="Category:"
android:layout_marginBottom="5dp"
/>

<!-- Spinner Element -->
<Spinner
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="@string/spinner_title"
/>
</LinearLayout>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NEXT"
android:id="@+id/button"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="137dp" />


</RelativeLayout>

Kode layout SecondActivity sebagai berikut.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Empty"
android:id="@+id/txt_bundle"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="103dp" />
</RelativeLayout>

Berikut ini adalah file Android Manifest.

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="abibakar.club.spinners" >

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".SecondActivity"/>
</application>

</manifest>

Kelas-kelas java MainActivity dan SecondActivity di definisikan sebagai berikut.

package abibakar.club.spinners;

import android.app.Activity;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity implements AdapterView.OnItemSelectedListener {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Spinner element
final Spinner spinner = (Spinner) findViewById(R.id.spinner);
Button button=(Button)findViewById(R.id.button);

// Spinner click listener
spinner.setOnItemSelectedListener(this);

// Spinner Drop down elements
List<String> categories = new ArrayList<String>();
categories.add("Item 1");
categories.add("Item 2");
categories.add("Item 3");
categories.add("Item 4");
categories.add("Item 5");
categories.add("Item 6");

// Creating adapter for spinner
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, categories);

// Drop down layout style - list view with radio button
dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

// attaching data adapter to spinner
spinner.setAdapter(dataAdapter);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent= new Intent(MainActivity.this,SecondActivity.class);
intent.putExtra("data",String.valueOf(spinner.getSelectedItem()));
startActivity(intent);
}
});
}

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// On selecting a spinner item
String item = parent.getItemAtPosition(position).toString();

// Showing selected spinner item
Toast.makeText(parent.getContext(), "Selected: " + item, Toast.LENGTH_LONG).show();

}

public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}

}

package abibakar.club.spinners;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class SecondActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.second_activity);

TextView textView=(TextView) findViewById(R.id.txt_bundle);
Bundle bundle=getIntent().getExtras();
String data=bundle.get("data").toString();
textView.setText(data);
}
}

Dari kode diatas, kita telah membuat sebuah pesan Toast dengan sebuah item dari menu dropdown spinner yang dipilih. Dari tombol diklik kita telah melalui item spinner yang telah dipilih sebagai sebuah value string untuk berlanjut ke aktivitas berikutnya di Android Bundle. Maka data di ambil dari Android Bundle dan ditampilkan dalam sebuah TextView. Mudah sekali bukan begitu?

Berikut adalah screenshot dari sebuah aplikasi menggunakan spinner drop down yang kita buat dari kode-kode diatas berserta emulatornya.

Screenshot berikut menampilkan daftar isi dropdown ketika Spinner dibuka.

Daftar Spinner Android Studio

Ketika sebuah Item dipilih, sebuah pesan Toast akan muncul.

Cara Membuat Spinner Aplikasi Android Studio

Dan setelah itu pemberitahuan Toast menghilang seperti di perlihatkan pada gambar berikut. Namun kita bisa mengklik tombol Next.

List Spinner Android Studio

Selanjut dan akhirnya, di layar kedua, item yang terpilih dari daftar dropdown diambil menggunakan Bundles dan di tampilkan dalam TextView.

Hasil Spinner Android Studio

Berikut ialah sebuah contoh dari Spinner dari aplikasi Android dalam sebuah tampilan emulator.

Membuat Spinner Android Studio

Sekarang silahkan berlanjut kebahasan berikutnya yakni cara membuat ListView dengan Android Spinner.

Itulah cara membuat Spinner dengan Android Studio dan jika rekan ada pertanyaan silahkan tuliskan di area komentar.

LEAVE A REPLY

Please enter your comment!
Please enter your name here