Easily make your own Flyme suspension ball

Samsung has a hoverball feature of its own, but it’s too complicated to use. The hoverball is supposed to be a one-step product, so there’s still a long way to go in software design. So I searched the market for the flyme floating ball, installed all the top floating ball apps, and finally found an app that was almost like Flyme floating ball.

This app has been in my phone for several months and is the only app on my phone besides wechat that allows self-launch. Thanks to the developers of this app, there are no ads and it’s a great port of flyme’s own floating ball.

However, gradually, I felt a little uncomfortable, that is, every time I installed a new APP, when I opened the prompt to grant permissions (storage, photo), the 6.0 system will always warm pop-up box:

Then I had to go to the Settings page, spend half a day finding the hover ball, turn off its “Apps that appear on top” permission, and then go back to the app and grant permission. Finally, I had to go to the Settings page again and spend another half day finding the hover ball and turning on its “Apps that appear at the top” permission. Friend friend, this experience, once is enough, but let me experience N times ah!

But what’s hard to beat about a programmer? I had nothing to do at home this weekend, so I decided to follow my own habits and create the most easy-to-use floating ball in my mind.

The UI is very simple, three circles are cut directly with Sketch, one is a grey translucent circle for the background, one is a small circle in the center, and another is a large circle hidden by default.

This is the most important part, carrying out the main function of the levitating ball.

(1) when the finger is pressed

When pressed, hide the ball, show the big ball, and record the press position and press time.

case MotionEvent.ACTION_DOWN: mIsTouching = true; mImgBall.setVisibility(INVISIBLE); mImgBigBall.setVisibility(VISIBLE); mLastDownTime = System.currentTimeMillis(); mLastDownX = event.getX(); mLastDownY = event.getY(); postDelayed(new Runnable() { @Override public void run() { if (! mIsLongTouch && mIsTouching && mCurrentMode == MODE_NONE) { mIsLongTouch = isLongClick(event); } } }, LONG_CLICK_LIMIT); break;Copy the code

What does postDealy do at the end of the code? It’s a 300-millisecond delay to determine if it’s a long-press mode. The method code to judge long press is as follows:

private boolean isLongClick(MotionEvent event) { float offsetX = Math.abs(event.getX() - mLastDownX); float offsetY = Math.abs(event.getY() - mLastDownY); long time = System.currentTimeMillis() - mLastDownTime; If (offsetX < mTouchSlop && offsetY < mTouchSlop && time >= LONG_CLICK_LIMIT) {vibrator. Vibrate (mPattern, -1); return true; } else { return false; }}Copy the code

(2) when the finger moves

At this time to determine whether it is in the long press state, if so, then enter the MOVE mode, MOVE the floating ball, if not, then determine the operation gesture, namely pull down or pull up and other gestures.

case MotionEvent.ACTION_MOVE: if (! mIsLongTouch && isTouchSlop(event)) { return true; } if (mIsLongTouch && (mCurrentMode == MODE_NONE || mCurrentMode == MODE_MOVE)) { mLayoutParams.x = (int) (event.getRawX() - mOffsetToParent); mLayoutParams.y = (int) (event.getRawY() - mOffsetToParentY); mWindowManager.updateViewLayout(FloatBallView.this, mLayoutParams); mBigBallX = mImgBigBall.getX(); mBigBallY = mImgBigBall.getY(); mCurrentMode = MODE_MOVE; } else { doGesture(event); } break;Copy the code

The code for gesture operation is as follows, which is mainly calculated according to the current coordinate and the coordinate recorded when pressing, judge gesture, and update the position of the big ball.

private void doGesture(MotionEvent event) { float offsetX = event.getX() - mLastDownX; float offsetY = event.getY() - mLastDownY; if (Math.abs(offsetX) < mTouchSlop && Math.abs(offsetY) < mTouchSlop) { return; } if (Math.abs(offsetX) > Math.abs(offsetY)) { if (offsetX > 0) { if (mCurrentMode == MODE_RIGHT) { return; } mCurrentMode = MODE_RIGHT; mImgBigBall.setX(mBigBallX + OFFSET); mImgBigBall.setY(mBigBallY); } else { if (mCurrentMode == MODE_LEFT) { return; } mCurrentMode = MODE_LEFT; mImgBigBall.setX(mBigBallX - OFFSET); mImgBigBall.setY(mBigBallY); } } else { if (offsetY > 0) { if (mCurrentMode == MODE_DOWN || mCurrentMode == MODE_GONE) { return; } mCurrentMode = MODE_DOWN; mImgBigBall.setX(mBigBallX); mImgBigBall.setY(mBigBallY + OFFSET); // If you hold the drop state for a long time, PostDelayed (new Runnable() {@override public void run() {if (mCurrentMode == MODE_DOWN && mIsTouching) { toRemove(); mCurrentMode = MODE_GONE; } } }, TO_APP_INDEX_LIMIT); } else { if (mCurrentMode == MODE_UP) { return; } mCurrentMode = MODE_UP; mImgBigBall.setX(mBigBallX); mImgBigBall.setY(mBigBallY - OFFSET); }}}Copy the code

(3) when the fingers are lifted

After the finger is lifted, check whether it is in long press mode first. If it is not in long press mode, check whether it is in click mode. If it is not in long press mode, then check whether it is in click mode.

case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
       mIsTouching = false;
       if (mIsLongTouch) {
           mIsLongTouch = false;
       } else if (isClick(event)) {
           AccessibilityUtil.doBack(mService);
       } else {
           doUp();
       }
       mImgBall.setVisibility(VISIBLE);
       mImgBigBall.setVisibility(INVISIBLE);
       mCurrentMode = MODE_NONE;
       break;
Copy the code