Kinetic translation in Y-axis using FlingAnimation - android

I'm trying to add 'kinetic' move in Y-axis from top of the screen to bottom (and vice versa) to custom layout displayed above all apps using the window manager.
I tried to do it in this way:
private void animateFlingInYAxis(View view) {
FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_Y);
fling.setStartValue(0.9F);
fling.setStartVelocity(0f);
//fling.setMinValue(0.5F);
fling.setFriction(0.2F);
fling.start();
}
But the following result is no working correctly. I tried to change values SCROLL_Y to TRANSLATION_Y and set a custom range of values but without luck.
Action is processed in ACTION_MOVE event in this way:
case MotionEvent.ACTION_MOVE:
params.y = initialY + (int) (event.getRawY() - initialTouchY);
if(isMovingInYAxis((int) initialTouchY ,(int) event.getRawY())) {
windowManager.updateViewLayout(view, params);
animateFlingInYAxis(view);
}
break;
I would like to ask how to animate moving in Y-axis in the right way?
Many thanks for any advice.
Edit1: After setting setStartVelocity(2000); seems to be working better, but the view is partially hiding (see screenshot below).
Edit2: I Implemented GestureDetector.OnGestureListener in Custom View, now I am able to catch fling and scroll events. In onFling method, I am able to recognize direction of fling gesture (TOP_BOTTOM, BOTTOM_TOP), but I am not able to to do the animation of view of given direction.
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
Logger.d("onFling");
if(e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) {
Logger.d("Bottom to top");
animateFlingInYAxis(view, "BOTTOM_TOP");
return false; // Bottom to top
} else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) {
Logger.d("Top to bottom");
animateFlingInYAxis(view, "TOP_BOTTOM");
return false; // Top to bottom
}
return false;
}
private void animateFlingInYAxis(View view, String type) {
FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.TRANSLATION_Y);
if(type.equals("BOTTOM_TOP")) {
fling.setStartValue(100); //WHICH PARAMS TO PASS?
fling.setMinValue(480); //WHICH PARAMS TO PASS?
fling.setMaxValue(0); //WHICH PARAMS TO PASS?
} else{
fling.setStartValue(470);
fling.setMinValue(480);
fling.setMaxValue(0);
}
fling.setStartVelocity(2000);
fling.setFriction(0.8F);
fling.start();

Related

Scroll fixed number of items on fling/scroll to recyclerview

I have a simple activity which has a root layout.The root layout contains a recyclerview. Recyclerview will contain 20 items created from items.xml ,
which consists of 3 text views.Here items.xml represent single item in the recyclerview.
The recycler view can be scrolled both the ways , it is kind a loop of the items between 1 to 20.
I have a requirement to smoothscroll only 4 items , irrespective of the velocity of the swipe/fling.
Approaches which i have tried many approaches but coudn't succeed till now. If anyone can give any suggestions , that would be very helpful.
SnapHelper - this seems to snap only the item which is in the center.
Using gesture detector - the gestures are getting detected for all the actions , but i am unable to prevent the recyclerview's default scrolling behaviour.
The main issue is the over-scrolling of recycler view due to varing velocities of user scrolls and flings.
Here is my set up for the gesture detector.
public myRecyclerTouchListner(final Context context, final RecyclerView recycleView,
final LinearLayoutManager linearLayoutManager,
final ClickListener clicklistener){
final ViewConfiguration vc = ViewConfiguration.get(context);
final int swipeMinDistance = vc.getScaledPagingTouchSlop();
final int swipeThresholdVelocity = vc.getScaledMinimumFlingVelocity();
final int swipeMaxOffPath = vc.getScaledTouchSlop();
this.clicklistener=clicklistener;
simpleGestureDetector =new GestureDetector(context,new GestureDetector.SimpleOnGestureListener( ){
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
Log.d("try", "on Fling called");
if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE &&
Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
//From Right to Left
recycleView.smoothScrollToPosition(linearLayoutManager.
findLastCompletelyVisibleItemPosition() + Constants.spanLength);
return true;
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE &&
Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
//From Left to Right
recycleView.smoothScrollToPosition(linearLayoutManager.
findFirstCompletelyVisibleItemPosition() - Constants.spanLength);
return true;
}
return true;
}
#Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
return true;
}
#Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
#Override
public boolean onDown(MotionEvent e) {
return true;
}
#Override
public boolean onDoubleTap(MotionEvent e) {
return true;
}
#Override
public void onLongPress(MotionEvent e) {
Log.d("Try", "Long press gesture");
View child=recycleView.findChildViewUnder(e.getX(),e.getY());
if(child!=null && clicklistener!=null){
clicklistener.onLongClick(child,recycleView.getChildAdapterPosition(child));
}
}
});
I think your problem is that scrolling is starting from last visible position where Fling is detected and that mess up the things.
Try with global variable for example int lastScrolledPosition = 0;.
And OnFling recycleView.smoothScrollToPosition(lastScrolledPosition + Constants.spanLength);
I thing this should do the trick. You should change if lastScrolledPosition < Recycleritems count.
It turns out I had to use Snaphelper for custom scroll behavior in case wherein I need control over programmatic scroll and user-scroll(fling).
This was exactly what I was looking for:
How to snap RecyclerView items so that every X items would be considered like a single unit to snap to?
I hope it will be helpful :)

How to implement slide to reveal animation in android?

I have created 5 activities, each has a ListView containing only images. I have used a simple swipe animation to change activities.
Here is the relevant code:
#Override
public boolean onTouchEvent(MotionEvent event) {
if (gestureDetector.onTouchEvent(event)) {
return true;
}
return super.onTouchEvent(event);
}
private void onLeftSwipe() {
Intent intent = new Intent(HimachalActivity.this, IndianWildlifeActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.slide_left_in, R.anim.slide_left_out);
}
private void onRightSwipe() {
Intent intent = new Intent(HimachalActivity.this, BaseActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.slide_right_in, R.anim.slide_right_out);
}
private class SwipeGestureDetector extends GestureDetector.SimpleOnGestureListener {
// Swipe properties, you can change it to make the swipe
// longer or shorter and speed
private static final int SWIPE_MIN_DISTANCE = 120;
private static final int SWIPE_MAX_OFF_PATH = 200;
private static final int SWIPE_THRESHOLD_VELOCITY = 200;
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2,
float velocityX, float velocityY) {
try {
float diffAbs = Math.abs(e1.getY() - e2.getY());
float diff = e1.getX() - e2.getX();
if (diffAbs > SWIPE_MAX_OFF_PATH)
return false;
// Left swipe
if (diff > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
HimachalActivity.this.onLeftSwipe();
// Right swipe
} else if (-diff > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
HimachalActivity.this.onRightSwipe();
}
} catch (Exception e) {
Log.e("BaseActivity", "Error on gestures");
}
return false;
}
}
The problem is that the next activity or previous activity opens only after full swipe and the animation does not feel that smooth.
I want an animation in which the next activity or previous activity starts revealing itself as soon as I start swiping. Is there any built-in animation that can be applied. If not, please point me to any relevant resources for creating one myself, possibly, one which does not require me to modify the existing code much. Thanks.
As far as I know this feature is easily available in Lollipop material design module.
I reckon, it would be easier in case you follow #Whitney 's advice. Put your fragments in view pager as described here: http://developer.android.com/training/animation/screen-slide.html
The reason it is not working with your current implementation is that the device makes sense of fling gesture only after you have flinged. Thereafter, the animation takes place. Fling is not detected in real time. In case you want to implement real time fling, you might have to override touch events as described here: http://developer.android.com/training/custom-views/making-interactive.html

How to create an image slider?

How to create an image slider in eclipse?
i want, when a finger moves from left to right or from right to left on imageView, I want to change the photo.
No need to do any custom thing.As Android provides the facility like this in ViewFlipper class.It is actually made for it.
View Flipper:-
Simple ViewAnimator that will animate between two or more views that
have been added to it. Only one child is shown at a time. If
requested, can automatically flip between each child at a regular
interval.
Its very nice and also built in support for animation so just use this for this purpose.
To implement the ViewFlipper in your application I am sharing some good tutorials..
http://javatechig.com/android/android-viewflipper-example
http://www.yogeshblogspot.com/android-viewflipper-example/
http://learnandroideasily.blogspot.in/2013/06/android-viewflipper-example.html
You can also get more info at here.
http://developer.android.com/reference/android/widget/ViewFlipper.html.
Enjoy..!
View Pager refer this is one option, otherwise you can add a simple gesture listener to your image view.
//Adding gesture listener to image view.
final GestureDetector gdt = new GestureDetector(new GestureListener());
final ImageView imageView = (ImageView) findViewById(R.id.image_view);
imageView.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(final View view, final MotionEvent event) {
gdt.onTouchEvent(event);
return true;
}
});
//The gesture listener class
private class GestureListener extends SimpleOnGestureListener {
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
//load previous image here
return false; // Right to left
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
//load next image here
return false; // Left to right
}
if(e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) {
return false; // Bottom to top
} else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) {
return false; // Top to bottom
}
return false;
}
}

Viewflipper with Scrollviews and a nav bar

I have a viewflipper which includes a number of layouts. Each layout has a scrollview as the root.
Below the viewflipper I have a horizontal scrollview which contains textviews which acts as a navigation bar.
My original issue was that the fling stopped working as soon as I added a scrollview but I added the following code:
#Override
public boolean dispatchTouchEvent(MotionEvent ev){
super.dispatchTouchEvent(ev);
return gestureDetector.onTouchEvent(ev);
}
And the scrolling now works along with the fling.
The only issue I have now though is that the HSV nav bar now acts a little strange. Sometimes when I try to slide it across, to select new contents, the HSV springs back to where it was. Other times the HSV thinks I want to fling and moves to the next contents. This is of course dependant of the speed I try to scroll it.
I want the nav bar to work independently of the flipper.
I'm trying to understand the code to fix it myself but not getting anywhere.
I have the following in my onCreate:
gestureDetector = new GestureDetector(new MyGestureDetector());
gestureListener = new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (gestureDetector.onTouchEvent(event)) {
return true;
}
return false;
}};
I have the MyGestureDetector class:
class MyGestureDetector extends SimpleOnGestureListener {
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
try {
if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
return false;
// right to left swipe
if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
flipper.setInAnimation(flip_in_from_right);
flipper.setOutAnimation(flip_out_to_left);
flipper.showNext();
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
flipper.setInAnimation(flip_in_from_left);
flipper.setOutAnimation(flip_out_to_right);
flipper.showPrevious();
}
} catch (Exception e) {
// nothing
}
And then the override:
#Override
public boolean dispatchTouchEvent(MotionEvent ev){
super.dispatchTouchEvent(ev);
return gestureDetector.onTouchEvent(ev);
}
Can anyone shed any light on this?
Where exactly is your HSV? Is it pinned to the bottom of the screen? If so, here's what I would do. Within your onFling event, check the Y position of the fling and make sure it's not within your HSV. If it is, then return false and you should be good to go.

View with gesture listener and onLongClickListener

I'm trying to implement a view that has both a longClickListener and a gesture dectector. Basically, I need a button to show a view when the user long clicks on the first view, and then I want to dectect a fling motion up. I would like to make it so that the user does not have to lift their finger at all, and hit both the longclick, and the fling motion.
Here is my code for the longClickListener:
flipCard.setOnLongClickListener(new View.OnLongClickListener() {
public boolean onLongClick(View view) {
answerRight.setVisibility(View.VISIBLE);
answerRight.startAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.grow_from_middle));
answerWrong.setVisibility(View.VISIBLE);
answerWrong.startAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.grow_from_middle));
return false;
}
});
Here is the code for my gesture dector:
gestureDetectorScore = new GestureDetector(new ScoreGestureDetector());
gestureListenerScore = new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (gestureDetectorScore.onTouchEvent(event)) {
return true;
}
return false;
}
};
private class ScoreGestureDetector extends SimpleOnGestureListener {
private static final int SWIPE_MIN_DISTANCE = 5;
private static final int SWIPE_THRESHOLD_VELOCITY = 2;
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
try {
//if (Math.abs(e1.getX() - e2.getX()) > SWIPE_MAX_OFF_PATH)
//return false;
// right to left swipe
//if(e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
if(e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE){
Toast.makeText(AndroidOrientationSensor.this, "Up Swipe", Toast.LENGTH_SHORT).show();
}
//else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE){
Toast.makeText(AndroidOrientationSensor.this, "Down Swipe", Toast.LENGTH_SHORT).show();
}
} catch (Exception e) {
// nothing
}
return false;
}
#Override
public boolean onDown(MotionEvent e1){
Toast.makeText(AndroidOrientationSensor.this, "Up Swipe", Toast.LENGTH_SHORT).show();
return true;
}
}
Finally, I am setting the gesture dectector to the the "flipCard" view like this:
flipCard.setOnTouchListener(gestureListenerScore);
Any help would be greatly appreciated.
I think the problem you're going to have is if the touch event is consumed by the button, then the second view won't receive it.
Even if it did, the fling I imagine will only get called when the user performs a fling from start to finish.
The only thing I can think of doing (despite it being very horrible / hacky) is to try and inset a fake up touch event. This might then allow the user to perform the fling, but this isn't particularly stable either.
Better way to handle it would be to have a view group consume the touch events, pass the touch events to a gesture detector to detect a long click, then set a flag within the view groups touch listener to indicate a fling is expected, then manually detect when prev y and current y go beyond a threshold. This will give you some idea of velocity but probably no where near as meaningful as the velocity provided in the onFling callback method.
What I ended up doing to solve this problem is placing a gestureDectector on the view and overriding the onDown method. This allowed me to simulate a click event. I was unable to get both a long click and a swipe event, but for my purposes the click event triggers during the swipe which seems to work well enough. Thanks to GauntFace for the inspiration.
The GestureListener also has a onLongPress event.

Categories

Resources