Increasing the visibility of a view on Swipe using Gestures in android

Question

I am using following code

private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.OnGestureListener()
{
    private float lastDeltaValue;
    private static final int MIN_DISTANCE = 15;
    private static final int MIN_DISTANCE_Y = 25;
    @Override
    public boolean onDown(MotionEvent e)
    {
        lastDeltaValue = 0;
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {

    }

    @Override
    public boolean onSingleTapUp(MotionEvent e)
    {
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
    {
        float startingX = (int)e1.getRawX();
        float startingY = (int)e1.getRawY();

        float endingX = (int)e2.getRawX();
        float endingY = (int)e2.getRawY();

        float deltaX = startingX - endingX;
        float deltaY = startingY - endingY;

        // swipe horizontal?
        if(Math.abs(deltaX) > MIN_DISTANCE && Math.abs(deltaY) < MIN_DISTANCE_Y)
        {
            // left or right
            if(deltaX > 0)
            {
                shouldCallBtn = SHOULD_CALL_WHERE;
                if (gestureLayout.getVisibility() == View.GONE)
                {
                    gestureLayout.setVisibility(View.VISIBLE);
                    gestureLayout.setAlpha(0.3f);
                }
                gestureText.setText(getString(R.string.option_where));
                if (deltaX > lastDeltaValue)
                {
                    if (gestureLayout.getAlpha() > 0.29 && gestureLayout.getAlpha() < 0.80)
                        gestureLayout.setAlpha(gestureLayout.getAlpha() + 0.1f);
                }
                else
                {
                    if (gestureLayout.getAlpha() < 0.81 && gestureLayout.getAlpha() > 0.29)
                        gestureLayout.setAlpha(gestureLayout.getAlpha() - 0.1f);
                }
                Log.d("DELTA VALUES", String.valueOf(deltaX) + "  ==  " + String.valueOf(lastDeltaValue) + "   " +String.valueOf(gestureLayout.getAlpha()));

                lastDeltaValue = deltaX;

            }
            else if(deltaX < 0)
            {
                shouldCallBtn = SHOULD_CALL_ONMYWAY;
                if (gestureLayout.getVisibility() == View.GONE)
                {
                    gestureLayout.setVisibility(View.VISIBLE);
                    gestureLayout.setAlpha(0.3f);
                }
                gestureText.setText(getString(R.string.option_onway));
                if (deltaX > lastDeltaValue)
                {
                    if (gestureLayout.getAlpha() > 0.29 && gestureLayout.getAlpha() < 0.80)
                        gestureLayout.setAlpha(gestureLayout.getAlpha() - 0.1f);
                }
                else
                {
                    if (gestureLayout.getAlpha() < 0.81 && gestureLayout.getAlpha() > 0.29)
                        gestureLayout.setAlpha(gestureLayout.getAlpha() + 0.1f);
                }
                Log.d("DELTA VALUES", String.valueOf(deltaX) + "  ==  " + String.valueOf(lastDeltaValue) + "   " +String.valueOf(gestureLayout.getAlpha()));

                lastDeltaValue = deltaX;
            }
        }
        else
        {
        }
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e)
    {
        gestureLayout.setVisibility(View.VISIBLE);
        gestureLayout.setAlpha(0.8f);
        gestureText.setText(getString(R.string.option_my_location));
        sendLocBtn.performClick();
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
    {
        return false;
    }
};

Initially GestureLayout Visibility is GONE. After swipe its visibility will increase from 0.3 to 0.8. If i try to left swipe it Increases the alpha of a View somewhere on screen with some Text like (Left Swiping) and so does on right swipe.

This code seems to work but the animation of alpha from low to high is not up to standard.

Any help would be helpful

NOTE: I Do not need an animation. I want it to be based on swipe of finger

Answer 1

Lets call the value of 0.1f deltaAlpha. deltaAlpha must be based on the deltaX value. You must define a coefficient for your application that is the ratio between the deltaX and deltaAlpha. For example lets say that 10px are equal to 0.01 alpha change. Now you know that if your finger travels 40px on the screen, the alpha value will be changed with 0.04 no mater of the speed of the gesture. This way the animation will be smooth and will be based on the distance the finger has moved on the screen. Try the following java code:

// 1 deltaX = 0.01 alpha
// This is just an example coefficient.
// Replace it with a value that fits your needs
private static final float COEFFICIENT = 0.01;

private float calculateDeltaAlpha(float deltaX) {
  return deltaX * COEFICIENT;
}

private void incrementViewAlpha(View view, float distanceX) {
  float oldAlpha = gestureLayout.getAlpha();
  if (oldAlpha > 0.29 && oldAlpha < 0.80) {
    gestureLayout.setAlpha(oldAlpha + calculateAlphaDelta(distanceX));
  }
}

private void decrementViewAlpha(View view, float distanceX) {
  float oldAlpha = gestureLayout.getAlpha();
  if (oldAlpha > 0.29 && oldAlpha < 0.80) {
    gestureLayout.setAlpha(oldAlpha - calculateAlphaDelta(distanceX));
  }
}

Call incrementViewAlpha and decrementViewAlpha methods when you want to increase or decrease view's alpha value.

Answer 2

I have improved over Kiril's code and avoided unnecessary code. You need to modify the COEFFICIENT value to control the variation/smoothness depending on layout size, screen size, related parameters, etc. Let me know if it works for you. Also made changes to limit alpha to be within UPPER_BOUND_ALPHA & LOWER_BOUND_ALPHA.

private static final float COEFFICIENT = 0.0001f;
private static final float UPPER_BOUND_ALPHA = 0.8f;
private static final float LOWER_BOUND_ALPHA = 0.3f;

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
{
    float startingX = (int)e1.getRawX();
    float startingY = (int)e1.getRawY();

    float endingX = (int)e2.getRawX();
    float endingY = (int)e2.getRawY();

    float deltaX = startingX - endingX;
    float deltaY = startingY - endingY;

    // swipe horizontal?
    if(Math.abs(deltaX) > MIN_DISTANCE && Math.abs(deltaY) < MIN_DISTANCE_Y) 
    {
        if (gestureLayout.getVisibility() == View.GONE) 
        {
            gestureLayout.setVisibility(View.VISIBLE);
            gestureLayout.setAlpha(LOWER_BOUND_ALPHA);
        }

        // left or right
        if(deltaX > 0)
        {
            shouldCallBtn = SHOULD_CALL_WHERE;
            gestureText.setText(getString(R.string.option_where));
        }
        else if(deltaX < 0)
        {
            shouldCallBtn = SHOULD_CALL_ONMYWAY;
            gestureText.setText(getString(R.string.option_onway));
        }

        float alphaValue = gestureLayout.getAlpha() + COEFFICIENT * deltaX;
        if (alphaValue > UPPER_BOUND_ALPHA) 
        {
            alphaValue = UPPER_BOUND_ALPHA;
        } 
        else if (alphaValue < LOWER_BOUND_ALPHA) 
        {
            alphaValue = LOWER_BOUND_ALPHA;
        }

        gestureLayout.setAlpha(alphaValue);

        Log.d("DELTA VALUES", deltaX + "  ==  " + lastDeltaValue + "   " + gestureLayout.getAlpha());
        lastDeltaValue = deltaX;
    }

    return false;
}