I am trying to create and improve existing SlidingDrawers projects that can work for all four sides of the screen {LEFT, RIGHT, TOP, BOTTOM}. There are a few libraries, however, they all have limitations, complications and bugs. One of the more common ones is umano's AndroidSlidingUpPanel, however, I do not like this library because you have to only include two child layouts, and also need to be mindful of a specific arrangement for main content to drawer. Other libraries are similar, or more complicated, or have bugs.
I am close to completing my version of SlidingDrawers, I am focusing on BOTTOM gravity. I need some help with the fling gesture. Clicking on the drawer will open and close it. You can also slide the drawer with your finger. But if you fling the drawer, the entire view will shift higher than it should or lower than it should.
How can I resolve this? As far as I can tell, my math is correct. The translation value I am passing to my animator should be right. Below is the work I have completed. Please checkout this project https://github.com/drxeno02/CustomDrawerLayout.git. Thank you in advance.
For those of you who want to see a snippet of how the problematic code looks, here is how I am currently doing my gestures.
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mActivePointerId = MotionEventCompat.getPointerId(event, 0);
switch (mStickTo) {
case GRAVITY_BOTTOM:
case GRAVITY_TOP:
mInitialCoordinate = event.getY();
break;
case GRAVITY_LEFT:
case GRAVITY_RIGHT:
mInitialCoordinate = event.getX();
break;
}
break;
case MotionEvent.ACTION_MOVE:
float coordinate = 0;
switch (mStickTo) {
case GRAVITY_BOTTOM:
case GRAVITY_TOP:
coordinate = event.getY();
break;
case GRAVITY_LEFT:
case GRAVITY_RIGHT:
coordinate = event.getX();
break;
}
final int diff = (int) Math.abs(coordinate - mInitialCoordinate);
// confirm that difference is enough to indicate drag action
if (diff > mTouchSlop) {
// start capturing events
Logger.d(TAG, "drag is being captured");
return true;
}
break;
case MotionEvent.ACTION_UP:
if (!FrameworkUtils.checkIfNull(mVelocityTracker)) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}
break;
}
// add velocity movements
if (FrameworkUtils.checkIfNull(mVelocityTracker)) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);
return super.onInterceptTouchEvent(event);
}
@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN && event.getEdgeFlags() != 0) {
return false;
}
// add velocity movements
if (FrameworkUtils.checkIfNull(mVelocityTracker)) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);
final View parent = (View) getParent();
final int coordinate;
final int distance = getDistance();
final int tapCoordinate;
switch (mStickTo) {
case GRAVITY_BOTTOM:
coordinate = (int) event.getRawY();
tapCoordinate = (int) event.getRawY();
break;
case GRAVITY_LEFT:
coordinate = parent.getWidth() - (int) event.getRawX();
tapCoordinate = (int) event.getRawX();
break;
case GRAVITY_RIGHT:
coordinate = (int) event.getRawX();
tapCoordinate = (int) event.getRawX();
break;
case GRAVITY_TOP:
coordinate = getRawDisplayHeight(getContext()) - (int) event.getRawY();
tapCoordinate = (int) event.getRawY();
break;
// if view position is not initialized throw an error
default:
throw new IllegalStateException("Failed to initialize coordinates");
}
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
/*
* Return the pointer identifier associated with a particular pointer data index is
* this event. The identifier tells you the actual pointer number associated with
* the data, accounting for individual pointers going up and down since the start
* of the current gesture.
*/
mActivePointerId = event.getPointerId(0);
switch (mStickTo) {
case GRAVITY_BOTTOM:
mDelta = coordinate - ((RelativeLayout.LayoutParams) getLayoutParams()).topMargin;
break;
case GRAVITY_LEFT:
mDelta = coordinate - ((RelativeLayout.LayoutParams) getLayoutParams()).rightMargin;
break;
case GRAVITY_RIGHT:
mDelta = coordinate - ((RelativeLayout.LayoutParams) getLayoutParams()).leftMargin;
break;
case GRAVITY_TOP:
mDelta = coordinate - ((RelativeLayout.LayoutParams) getLayoutParams()).bottomMargin;
break;
}
mLastCoordinate = coordinate;
mPressStartTime = System.currentTimeMillis();
break;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
final int farMargin = coordinate - mDelta;
final int closeMargin = distance - farMargin;
switch (mStickTo) {
case GRAVITY_BOTTOM:
if (farMargin > distance && closeMargin > mOffsetHeight - getHeight()) {
layoutParams.bottomMargin = closeMargin;
layoutParams.topMargin = farMargin;
}
break;
case GRAVITY_LEFT:
if (farMargin > distance && closeMargin > mOffsetHeight - getWidth()) {
layoutParams.leftMargin = closeMargin;
layoutParams.rightMargin = farMargin;
}
break;
case GRAVITY_RIGHT:
if (farMargin > distance && closeMargin > mOffsetHeight - getWidth()) {
layoutParams.rightMargin = closeMargin;
layoutParams.leftMargin = farMargin;
}
break;
case GRAVITY_TOP:
if (farMargin > distance && closeMargin > mOffsetHeight - getHeight()) {
layoutParams.topMargin = closeMargin;
layoutParams.bottomMargin = farMargin;
}
break;
}
setLayoutParams(layoutParams);
break;
case MotionEvent.ACTION_UP:
final int diff = coordinate - mLastCoordinate;
final long pressDuration = System.currentTimeMillis() - mPressStartTime;
switch (mStickTo) {
case GRAVITY_BOTTOM:
// determine if fling
int relativeVelocity;
final VelocityTracker velocityTracker = mVelocityTracker;
velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
final int initialVelocityY = (int) VelocityTrackerCompat.getYVelocity(
velocityTracker, mActivePointerId);
relativeVelocity = initialVelocityY * -1;
// take absolute value to have positive values
final int absoluteVelocity = Math.abs(relativeVelocity);
if (Math.abs(diff) > mFlingDistance && absoluteVelocity > mMinimumVelocity) {
if (tapCoordinate > parent.getHeight() - mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_CLOSED) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_OPEN, parent.getHeight() - mOffsetHeight, true);
} else if (Math.abs(getRawDisplayHeight(getContext()) -
tapCoordinate - getHeight()) < mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_OPEN) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_CLOSED, parent.getHeight() - mOffsetHeight, true);
}
} else {
if (isClicked(getContext(), diff, pressDuration)) {
if (tapCoordinate > parent.getHeight() - mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_CLOSED) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_OPEN, parent.getHeight() - mOffsetHeight, true);
} else if (Math.abs(getRawDisplayHeight(getContext()) -
tapCoordinate - getHeight()) < mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_OPEN) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_CLOSED, parent.getHeight() - mOffsetHeight, true);
}
} else {
smoothScrollToAndNotify(diff);
}
}
break;
case GRAVITY_TOP:
if (isClicked(getContext(), diff, pressDuration)) {
final int y = getLocationInYAxis(this);
if (tapCoordinate - Math.abs(y) <= mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_CLOSED) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_OPEN, parent.getHeight() - mOffsetHeight, true);
} else if (getHeight() - (tapCoordinate - Math.abs(y)) < mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_OPEN) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_CLOSED, parent.getHeight() - mOffsetHeight, true);
}
} else {
smoothScrollToAndNotify(diff);
}
break;
case GRAVITY_LEFT:
if (isClicked(getContext(), diff, pressDuration)) {
if (tapCoordinate <= mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_CLOSED) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_OPEN, getWidth() - mOffsetHeight, true);
} else if (tapCoordinate > getWidth() - mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_OPEN) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_CLOSED, getWidth() - mOffsetHeight, true);
}
} else {
smoothScrollToAndNotify(diff);
}
break;
case GRAVITY_RIGHT:
if (isClicked(getContext(), diff, pressDuration)) {
if (parent.getWidth() - tapCoordinate <= mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_CLOSED) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_OPEN, getWidth() - mOffsetHeight, true);
} else if (parent.getWidth() - tapCoordinate > getWidth() - mOffsetHeight &&
mLockMode == LockMode.LOCK_MODE_OPEN) {
notifyActionAndAnimateForState(LockMode.LOCK_MODE_CLOSED, getWidth() - mOffsetHeight, true);
}
} else {
smoothScrollToAndNotify(diff);
}
break;
}
break;
}
return true;
}
/**
* Method is used to animate the view to the given position
*
* @param diff
*/
private void smoothScrollToAndNotify(int diff) {
int length = getLength();
LockMode stateToApply;
if (diff > 0) {
if (diff > length / 2.5) {
stateToApply = LockMode.LOCK_MODE_CLOSED;
notifyActionAndAnimateForState(stateToApply, getTranslationFor(stateToApply), true);
} else if (mLockMode == LockMode.LOCK_MODE_OPEN) {
stateToApply = LockMode.LOCK_MODE_OPEN;
notifyActionAndAnimateForState(stateToApply, getTranslationFor(stateToApply), false);
}
} else {
if (Math.abs(diff) > length / 2.5) {
stateToApply = LockMode.LOCK_MODE_OPEN;
notifyActionAndAnimateForState(stateToApply, getTranslationFor(stateToApply), true);
} else if (mLockMode == LockMode.LOCK_MODE_CLOSED) {
stateToApply = LockMode.LOCK_MODE_CLOSED;
notifyActionAndAnimateForState(stateToApply, getTranslationFor(stateToApply), false);
}
}
}
/**
* Method is used to retrieve dimensions meant for translation
*
* @param stateToApply
* @return
*/
private int getTranslationFor(LockMode stateToApply) {
switch (mStickTo) {
case GRAVITY_BOTTOM:
switch (stateToApply) {
case LOCK_MODE_OPEN:
return getHeight() - (getRawDisplayHeight(getContext()) - getLocationInYAxis(this));
case LOCK_MODE_CLOSED:
return getRawDisplayHeight(getContext()) - getLocationInYAxis(this) - mOffsetHeight;
}
break;
case GRAVITY_TOP:
final int actionBarDiff = getRawDisplayHeight(getContext()) - ((View) getParent()).getHeight();
final int y = getLocationInYAxis(this) + getHeight();
switch (stateToApply) {
case LOCK_MODE_OPEN:
return getHeight() - y + actionBarDiff;
case LOCK_MODE_CLOSED:
return y - mOffsetHeight - actionBarDiff;
}
break;
case GRAVITY_LEFT:
final int x = getLocationInXAxis(this) + getWidth();
switch (stateToApply) {
case LOCK_MODE_OPEN:
return getWidth() - x;
case LOCK_MODE_CLOSED:
return x - mOffsetHeight;
}
break;
case GRAVITY_RIGHT:
switch (stateToApply) {
case LOCK_MODE_OPEN:
return getWidth() - (getRawDisplayWidth(getContext()) - getLocationInXAxis(this));
case LOCK_MODE_CLOSED:
return getRawDisplayWidth(getContext()) - getLocationInXAxis(this) - mOffsetHeight;
}
break;
}
throw new IllegalStateException("Failed to return translation for drawer");
}
/**
* Method is used to perform the animations
*
* @param stateToApply
* @param translation
* @param notify
*/
private void notifyActionAndAnimateForState(final LockMode stateToApply,
final int translation, final boolean notify) {
switch (mStickTo) {
case GRAVITY_BOTTOM:
switch (stateToApply) {
case LOCK_MODE_OPEN:
animate().translationY(-translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationY(0);
}
});
break;
case LOCK_MODE_CLOSED:
animate().translationY(translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationY(0);
}
});
break;
}
break;
case GRAVITY_TOP:
switch (stateToApply) {
case LOCK_MODE_OPEN:
animate().translationY(translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationY(0);
}
});
break;
case LOCK_MODE_CLOSED:
animate().translationY(-translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationY(0);
}
});
break;
}
break;
case GRAVITY_LEFT:
switch (stateToApply) {
case LOCK_MODE_OPEN:
animate().translationX(translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationX(0);
}
});
break;
case LOCK_MODE_CLOSED:
animate().translationX(-translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationX(0);
}
});
break;
}
break;
case GRAVITY_RIGHT:
switch (stateToApply) {
case LOCK_MODE_OPEN:
animate().translationX(-translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationX(0);
}
});
break;
case LOCK_MODE_CLOSED:
animate().translationX(translation)
.setDuration(TRANSLATION_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
notifyActionForState(stateToApply, notify);
setTranslationX(0);
}
});
break;
}
break;
}
}
Additional notes: I have further insight into this issue. I commented out the ACTION_MOVE to eliminate the position of the drawer having been moved before the fling action. The animation works perfectly. I believe my idea is correct. To get translation for "open" I do
getHeight() - (getRawDisplayHeight(getContext()) - getLocationInYAxis(this))
So, what is left is the amount of distance necessary to translate. Once the drawer has been dragged x-distance, however, I am expecting that getLocationInYAxis(this) would return me the dragged position. But the calculation is off.
Seems that you should use the getTranslationFor function to calculate the new translation for the state.
You currently taking into account only the Height and the offset, but from the getTranslationFor code it seems that you should consider also getLocationInYAxis.
So, instead of this line:
notifyActionAndAnimateForState(LockMode.LOCK_MODE_OPEN, parent.getHeight() - mOffsetHeight, true);
try this line:
notifyActionAndAnimateForState(LockMode.LOCK_MODE_OPEN, getTranslationFor(LockMode.LOCK_MODE_OPEN), true);