title: ImageView onTouch not moving up and down but only around circle
body: <p>I am developing a joystick button. Everything is ok when moving it around circle, but when I want to move it up or down, it goes only around circle again from the right side. So, I want to have both options (to move up or down in circle like real joystick). Here is my code example. Thanks for any help</p>
  
  <pre><code>public class JoystickView extends FrameLayout implements View.OnTouchListener {
  
      private Context context;
      private ImageView backgroundImageView;
      private ImageView buttonImageView;
      private RelativeLayout relativeLayout;
      private View rootView;
      float xx = 0;
      float yy = 0;
  
  
  
      public JoystickView(Context context) {
          super(context);
          this.context = context;
          setLayout(this);
          buttonImageView.setOnTouchListener(this);
          this.setClipChildren(false);
  
      }
  
      public void setLayout(ViewGroup view) {
  
          FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
          View v = inflateControlerLayout();
          view.addView(v, layoutParams);
      }
  
      protected View inflateControlerLayout() {
          initSlider();
          rootView = relativeLayout;
          return rootView;
  
      }
  
  
      public void initSlider() {
  
          if (relativeLayout == null) {
              relativeLayout = new RelativeLayout(context);
              RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
              relativeLayout.setLayoutParams(layoutParams);
              relativeLayout.setClipChildren(false);
          }
  
          if (backgroundImageView == null) {
              backgroundImageView = new ImageView(context);
  
              LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
              backgroundImageView.setLayoutParams(layoutParams);
  
              // load image
              try {
                  // get input stream
                  InputStream ims = getContext().getAssets().open("joystick_background.png");
                  // load image as Drawable
                  Drawable d = Drawable.createFromStream(ims, null);
                  // set image to ImageView
                  backgroundImageView.setImageDrawable(d);
              } catch (IOException ex) {
                  return;
              }
          }
  
          if (buttonImageView == null) {
              buttonImageView = new ImageView(context);
  
              LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT, Gravity.CENTER);
  
              buttonImageView.setLayoutParams(layoutParams);
  
  
              // load image
              try {
                  // get input stream
                  InputStream ims2 = getContext().getAssets().open("jostick_button.png");
                  // load image as Drawable
                  Drawable d2 = Drawable.createFromStream(ims2, null);
                  // set image to ImageView
                  buttonImageView.setImageDrawable(d2);
                  buttonImageView.bringToFront();
              } catch (IOException ex) {
                  return;
              }
          }
  
          if (relativeLayout != null) {
              relativeLayout.addView(backgroundImageView);
              relativeLayout.addView(buttonImageView);
          }
      }
  
      @Override
      public boolean onTouch(View view, MotionEvent motionEvent) {
  
  
          switch (motionEvent.getAction() &amp; MotionEvent.ACTION_MASK) {
              case MotionEvent.ACTION_DOWN:
  
                  break;
  
              case MotionEvent.ACTION_UP:
                  view.setX(xx);
                  view.setY(yy);
                  break;
  
              case MotionEvent.ACTION_POINTER_DOWN:
                  break;
  
              case MotionEvent.ACTION_POINTER_UP:
                  break;
  
              case MotionEvent.ACTION_MOVE:
  
  
                  float cx = view.getWidth() / 2.f;
                  float cy = view.getHeight() / 2.f;
                  float x = motionEvent.getRawX();
                  float y = motionEvent.getRawY();
                  float w = buttonImageView.getWidth();
                  float h = buttonImageView.getHeight();
  
                  double r = Math.min(cx, cy) / 2.;
                  double dx = x - cx;
                  double dy = y - cy;
                  double hypot = Math.hypot(dx, dy);
                  double cos = dx / hypot;
                  double sin = dy / hypot;
                  double rdx = hypot &lt; 1. ? 0. : r * cos;
                  double rdy = hypot &lt; 1. ? 0. : r * sin;
  
                  buttonImageView.setTranslationX((float) (cx + rdx - w / 2.));
                  buttonImageView.setTranslationY((float) (cy + rdy - h / 2.));
  
                  break;
          }
          return true;
  
      }
  }
  </code></pre>