How to implement Swipe events to animate(e.g. change alpha) Views?

Question

In my app I want that when the user Swipes from Bottom to Top the alpha of ImageView should decrease till a certain point, also if the user Swipes from Top to Bottom the alpha should increase till 1. I tried many things still no success

Code

 gestureDetector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener());


        GestureDetector.SimpleOnGestureListener simpleOnGestureListener = new GestureDetector.SimpleOnGestureListener() {

            @Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

                float distanceX = 0;
                float distanceY = 0;

                try {

                    distanceX = e2.getX() - e1.getX();
                    distanceY = e2.getY() - e1.getY();

                } catch (Exception e) {

                }


                if (Math.abs(distanceY) > Math.abs(distanceX) && Math.abs(distanceY) > THRESHOLD && Math.abs(velocityY) > VELOCITY) {

                    if (distanceY > 0) {

                        //increase the alpha

                    } else {

                        //reduce the alpha


                    }
                    return true;

                }

                return false;


            }

        };

        gestureDetector = new GestureDetector(this, simpleOnGestureListener);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        return gestureDetector.onTouchEvent(event);
    }

Please edit the question to state what specific problem you are facing. — An SO User, Jan 19 '16 at 11:24
hey....i had done the same functionality today and had submitted that POC Th thing here is i have taken three images of the whole image and had changing the alpha depending on the image click — GvSharma, Jan 19 '16 at 11:24

Tharindu Welagedara · Answer 1 · 2016-01-20T05:59:47.140

Try this code. It worked for me.

EDIT: First define mAlpha instance variable Then copy and paste following code and try.

private float mAlpha = 1;

ImageView img = (ImageView) findViewById(R.id.img);
img.setOnTouchListener(new View.OnTouchListener() {
            float mDownY;
            private int mSwipeSlop = -1;

            @Override
            public boolean onTouch(final View v, MotionEvent event) {
                if (mSwipeSlop < 0) {
                    mSwipeSlop = ViewConfiguration.get(MainActivity.this).getScaledTouchSlop();
                }
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        if (mItemPressed) {
                            // Multi-item swipes not handled
                            return false;
                        }
                        mItemPressed = true;
                        mDownY = event.getY();
                        break;
                    case MotionEvent.ACTION_CANCEL:
                        mItemPressed = false;
                        break;
                    case MotionEvent.ACTION_MOVE:
                    {
                         float y = event.getY() + v.getTranslationY();
                         float deltaY = y - mDownY;
                         if (!mSwiping) {
                            if (deltaY > mSwipeSlop) {
                               mSwiping = true;
                            }
                         }
                         if (mSwiping) {
                            if (mAlpha > 1) {
                               mAlpha = 1;
                            } else if (mAlpha < 0) {
                               mAlpha = 0;
                            }
                            v.setAlpha(mAlpha);
                            mAlpha = mAlpha - deltaY / v.getWidth();
                        }
                    }
                    break;
                    case MotionEvent.ACTION_UP: {
                        mItemPressed = false;
                    }
                    break;
                    default:
                        return false;
                }
                return true;
            }
        });

yup this code is working fine but it only works for swiping down, i also want to increase the alpha when swipe from bottom to top — Sonali Pawar, Jan 19 '16 at 12:49
@SonaliPawar I have edited the code. Please check the code now. — Tharindu Welagedara, Jan 20 '16 at 06:01

GvSharma · Answer 2 · 2016-01-20T06:37:44.470

@TdSoft answer works for me... but it works for only down swipe. To make it work for both up and down swipe actions , i have change this.

case MotionEvent.ACTION_MOVE: {
float y = event.getY() + v.getTranslationY();
float deltaY = y - mDownY;
float deltaYAbs = deltaY;
boolean mSwiping = false;
float mAlpha = 1 - deltaYAbs / v.getWidth();
if (!mSwiping) {
    mSwiping = true;                    
    if (deltaYAbs > mSwipeSlop) {                    
    mAlpha = 1 - deltaYAbs / v.getWidth();                        
    } else {                    
    mAlpha = 1 + deltaYAbs / v.getWidth();                        
    }
}                
if (mSwiping) {
    v.setAlpha(mAlpha); 
}
break;

Chintan Bawa · Answer 3 · 2016-01-19T13:49:22.490

Its just an hack. You can try this code and can do improvement in it.

My idea is that I am just using verticle SeekBar under ImageView and using SeekBar progressValue for setting Image alpha.(Note: I have made Seekbar verticle by giving rotation of 270 in xml).

Test.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.widget.ImageView;
import android.widget.SeekBar;

public class Test extends AppCompatActivity {

    private SeekBar seekBar;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        imageView = (ImageView) findViewById(R.id.img);

        seekBar = (SeekBar) findViewById(R.id.seekBar1);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                float val = ((float) (100 - progress));
                val = (float) ((val / 100) + 0.3); // minimum alpha is 0.3. you can change it. 
                if (val < 1.00) {
                    Log.e("progress", "" + val);
                    imageView.setAlpha(val);

                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }


        });
    }


}

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/seekBarPrefBarContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:rotation="270" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">

        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/yourdrawable" />
    </LinearLayout>

</RelativeLayout>

How to implement Swipe events to animate(e.g. change alpha) Views?

3 Answers3