Developing a "Thumb wheel" widget

Put your problem here if it does not fit any of the other categories.

Developing a "Thumb wheel" widget

Postby Daniel » Sun Jan 10, 2010 7:30 pm


I want to develop a "thumb wheel" widget, like this on of Qt:

It should be scrolled and animated and be able to "fling".
My first idea was to extend a Slider, but I'm not sure if this would be the best basis. It should propably be implemented with the OnGestureListener, but I don't know how to animate the "wheel".

Has anybody an idea how to develop such a widget and can give me some clues? And which basis class would you prefer to extend?

I'm looking forward your ideas.

Thank you very much.
Posts: 8
Joined: Sun Jan 10, 2010 7:07 pm


Postby Daniel » Sun Jan 10, 2010 11:00 pm

Does no one has an idea?

Tomorrow, I'm going to implement this widget and will post my experiences. Nevertheless it would be nice to hear of some opinion of you.
Posts: 8
Joined: Sun Jan 10, 2010 7:07 pm

Postby Daniel » Wed Jan 20, 2010 12:35 am


even though nobody replied, now I'm gonna present you my solution.

After days of struggling with the SeekBar and the draw(Canvas c) method, I have solved the problem. I created a class MySeekBar that extends the SeekBar of the android SDK. Here is it:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class MySeekBar extends SeekBar implements OnSeekBarChangeListener {
  3.         private int start;
  4.         private boolean first = true;
  6.         public MySeekBar(Context context, AttributeSet attrs, int defStyle) {
  7.                 super(context, attrs, defStyle);
  8.                 init();
  9.         }
  11.         public MySeekBar(Context context, AttributeSet attrs) {
  12.                 super(context, attrs);
  13.                 init();
  14.         }
  16.         public MySeekBar(Context context) {
  17.                 super(context);
  18.                 init();
  19.         }
  21.         private void init() {
  22.                 Drawable d = getResources().getDrawable(R.drawable.date_chooser);
  23.                 this.setProgressDrawable(d);
  24.                 this.setThumb(null);
  25.                 this.setHapticFeedbackEnabled(true);
  26.                 this.setMax(Constants.SEEKBAR_RESOLUTION);
  27.                 this.setOnSeekBarChangeListener(this);
  28.         }
  30.         @Override
  31.         public void onProgressChanged(SeekBar seekBar, int progress,
  32.                         boolean fromUser) {
  33.                 // only react to user input
  34.                 if (fromUser) {
  35.                         // if it is the first change of progress, remember the start point
  36.                         if (first) {
  37.                                 first = false;
  38.                         }
  39.                         // after the first change, adjust the calendar and update the view
  40.                         else {
  41.                                 PoiActivity.mCal.add(Calendar.DAY_OF_YEAR, progress - start);
  42.                                 updateMapOverlay();
  43.                                 PoiActivity.updateDateText();
  44.                         }
  45.                         start = progress;
  46.                 }
  47.         }
  49.         @Override
  50.         public void onStartTrackingTouch(SeekBar seekBar) {
  51.                 first = true;
  52.         }
  54.         @Override
  55.         public void onStopTrackingTouch(SeekBar seekBar) {
  56.                 // reset the seekbar status
  57.                 seekBar.setProgress(Constants.SEEKBAR_RESOLUTION / 2);
  58.         }
Parsed in 0.035 seconds, using GeSHi

The first interesting part is in the init()-method. Here I'm setting the thumb-image to null, so that no thumb will be drawn. After that the ProgressDrawable is set to a custom png file. Finally the OnSeekBarChangeListener is set.
The next part are the methods of the OnSeekBarChangeListener. When starting to touch this SeekBar, I'm setting the "first-flag" and do nothing in the progressChanged method. But when the progress is changed again the flag is set to false and the action can happen. I'm adjusting a calendar and the corresponding view on a map by the amount I have "scrolled" my widget.

The screenshot shows the widget in action:


I hope my solution can be helpful for someone of you :)
Posts: 8
Joined: Sun Jan 10, 2010 7:07 pm


Return to Other Coding-Problems

Who is online

Users browsing this forum: Majestic-12 [Bot] and 10 guests