How would I implement a swipe-based circular control like this?

Question

I am working on an Android application, and I have a TextView where I display a price (for example 50$).

I would like to have a circular control similar to this picture:

Answer 1

Use a NumberPicker, which is simpler and then customize it!

Answer 2

You can use the Android Gesture Builder from the Android SDK samples.

I can't test it right now, but you should be able to create the app from the sample, run it, create the custom gestures you want (circular clockwise and circular counter clockwise), and then get the gestures raw file from the device/emulator internal storage (it is created by the app after you make the gestures).

With that, you can import it to your project and use the Gesture Library to intercept, register and recognize the specific gestures. You basically add an overlay layout where you want the gesture to be captured and then you decide what to do with it.

See more in depth, step-by-step guide in the following link: http://www.techotopia.com/index.php/Implementing_Android_Custom_Gesture_and_Pinch_Recognition

Answer 3

I've modified the source of circularseekbar to work as you want.

You can get the mofidied class from modified cirucularseekbar

First Include the control in your layout and set your dial as a background

            <com.yourapp.CircularSeekBar
                android:id="@+id/circularSeekBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/amount_wheel_bg" />

Then, in your activity (it should implement OnCircularSeekBarChangeListener) add the following:

//This is a reference to the layout control
private CircularSeekBar circularSeekBar;
//This is a reference to the textbox where you want to display the amount
private EditText amountEditText;
private int previousProgress = -1;

And add the following callback methods:

@Override
   public void onProgressChanged(CircularSeekBar circularSeekBar,
                 int progress, boolean fromUser) {
          if(previousProgress == -1)
          {
                 //This is the first user touch we take it as a reference
                 previousProgress = progress;
          }
          else
          {
                 //The user is holding his finger down
                 if(progress == previousProgress)
                 {
                       //he is still in the same position, we don't do anything
                 }
                 else
                 {
                       //The user is moving his finger we need to get the differences

                       int difference = progress - previousProgress;                        

                       if(Math.abs(difference) > CircularSeekBar.DEFAULT_MAX/2)
                       {
                              //The user is at the top of the wheel he is either moving from the 0 -> MAx or Max -> 0
                              //We have to consider this as 1 step 

                              //to force it to be 1 unit and reverse sign;
                              difference /= Math.abs(difference); 
                              difference -= difference;

                       }                          
                       //update the amount
                       selectedAmount += difference;
                        previousProgress= progress;
                       updateAmountText();
                 }
          }

   }

   @Override
   public void onStopTrackingTouch(CircularSeekBar seekBar) {

          //reset the tracking progress
          previousProgress = -1;

   }

   @Override
   public void onStartTrackingTouch(CircularSeekBar seekBar) {

   }

   private void updateAmountText()
   {
          amountEditText.setText(String.format("%.2f", selectedAmount));
   }

selectedAmount is a double property to store the amount selected.

I hope this can help you.

Answer 4

I had a friend that needed to implement something similar like what you want.

He actually used gesture detection - GestureOverlayView and MotionEvent.

By creating his custom gestures he managed to implement this.

My friend mostly referenced this site. There is a sample code there too.

Hope you find this useful!