Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating an iPhone-like Wheel Picker for Selection

Published? true
FormatLanguage: WikiFormat

Problem:

Want a selection UI component similar to iPhone wheel picker.

Solution:

Now you can with Android-Wheel the iPhone-like WheelPicker for Android: Android-Wheel: http://code.google.com/p/android-wheel/ It comes with a handy ScrollListener for listen to touch events on the wheel component.

Discussion:

This is a nice UI control that adds some pizazz to your app. The example uses three of them for a simulated Medical Device field entry of the body part(s) exhibiting a symptom. It looks like this:

File: Main.java

package com.example.wheelies;

import kankan.wheel.widget.OnWheelChangedListener;
import kankan.wheel.widget.OnWheelScrollListener;
import kankan.wheel.widget.WheelView;
import kankan.wheel.widget.adapters.ArrayWheelAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.EditText;
import android.widget.TextView;

public class WheelDemoActivity extends Activity {

	private final static String TAG = "WheelDemo";

	String wheelMenu1[] = new String[]{
			"Right Arm", "Left Arm", "R-Abdomen", "L-Abdomen", "Right Thigh", "Left Thigh"};
	String wheelMenu2[] = new String[]{"Upper", "Middle", "Lower"};
	String wheelMenu3[] = new String[]{"R", "L"};

	// Wheel scrolled flag
	private boolean wheelScrolled = false;

	private TextView resultText;
	private EditText text1;
	private EditText text2;
	private EditText text3;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		initWheel(R.id.p1, wheelMenu1);
		initWheel(R.id.p2, wheelMenu2);
		initWheel(R.id.p3, wheelMenu3);

		text1 = (EditText) this.findViewById(R.id.r1);
		text2 = (EditText) this.findViewById(R.id.r2);
		text3 = (EditText) this.findViewById(R.id.r3);
		resultText = (TextView) this.findViewById(R.id.result);
	}

	// Wheel scrolled listener
	OnWheelScrollListener scrolledListener = new OnWheelScrollListener()  {
		@Override    
		public void onScrollingStarted(WheelView wheel) {
			wheelScrolled = true;
		}
		@Override
		public void onScrollingFinished(WheelView wheel) {
			wheelScrolled = false;
			updateStatus();
		}
	};

	// Wheel changed listener
	private final OnWheelChangedListener changedListener = new OnWheelChangedListener() {
		@Override    
		public void onChanged(WheelView wheel, int oldValue, int newValue) {
			Log.d(TAG, "onChanged, wheelScrolled = " + wheelScrolled);    
			if (!wheelScrolled) {
				updateStatus();
			}
		}
	};

	/**
	 * Updates entered PIN status
	 */
	private void updateStatus() {
		text1.setText(wheelMenu1[getWheel(R.id.p1).getCurrentItem()]);
		text2.setText(wheelMenu2[getWheel(R.id.p2).getCurrentItem()]);
		text3.setText(wheelMenu3[getWheel(R.id.p3).getCurrentItem()]);

		resultText.setText(
		    wheelMenu1[getWheel(R.id.p1).getCurrentItem()] + " - " + 
		    wheelMenu2[getWheel(R.id.p2).getCurrentItem()] + " - " + 
		    wheelMenu3[getWheel(R.id.p3).getCurrentItem()]);
	}

	/**
	 * Initializes wheel
	 *
	 * @param id
	 *          the wheel widget Id
	 */
	private void initWheel(int id, String[] wheelMenu1) {
		WheelView wheel = (WheelView) findViewById(id);
		wheel.setViewAdapter(new ArrayWheelAdapter<String>(this, wheelMenu1));
		wheel.setVisibleItems(2);
		wheel.setCurrentItem(0);
		wheel.addChangingListener(changedListener);
		wheel.addScrollingListener(scrolledListener);
	}

	/**
	 * Returns wheel by Id
	 *
	 * @param id
	 *          the wheel Id
	 * @return the wheel with passed Id
	 */
	private WheelView getWheel(int id) {
		return (WheelView) findViewById(id);
	}
}