So what i am trying to achieve is user would open to first page of the view pager, and the view pager would bounce to half of the second page and bounce back to the fist page indicating that there are more pages to scroll to. I was wondering on how i could implement this?
You can use fakeDragBy method to achieve this effect:
viewPager.beginFakeDrag();
viewPager.fakeDragBy(offset); //offset in pixels.
viewPager.endFakeDrag();
EDIT:
I have made method for this:
private int animFactor;
private ValueAnimator animator = new ValueAnimator();
private void animateViewPager(final ViewPager pager, final int offset, final int delay) {
if (!animator.isRunning()) {
animator.removeAllUpdateListeners();
animator.removeAllListeners();
//Set animation
animator.setIntValues(0, -offset);
animator.setDuration(delay);
animator.setRepeatCount(1);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
Integer value = animFactor * (Integer) animation.getAnimatedValue();
if (!pager.isFakeDragging()) {
pager.beginFakeDrag();
}
pager.fakeDragBy(value);
}
});
animator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
animFactor = 1;
}
#Override
public void onAnimationEnd(Animator animation) {
pager.endFakeDrag();
}
#Override
public void onAnimationRepeat(Animator animation) {
animFactor = -1;
}
});
animator.start();
}
}
Example of usage:
animateViewPager(pager, 10, 1000);
Edit2: ValueAnimator is class for Api level 11. Also set pager adapter before calling this method.
Adding a note to #Yuraj's answer. Call the method in onWindowFocusChanged when hasFocus==true as follows to avoid indexOutOfBoundsException:
#Override
public void onWindowFocusChanged(boolean hasFocus)
{
super.onWindowFocusChanged(hasFocus);
if(hasFocus)
{
Handler handler = new Handler();
final Runnable r = new Runnable()
{
public void run()
{
if(mViewPager.getCurrentItem() == 0)
{
Context context = Activity_main.this;
String filename="Init";
SharedPreferences stats;
stats = context.getSharedPreferences(filename, 0);
int appOpen = stats.getInt("appOpen", 0);
if(appOpen <= 5)
{
animateViewPager(mViewPager, 10, 300);
appOpen += 1;
SharedPreferences.Editor editor = stats.edit();
editor.putInt("appOpen", appOpen);
editor.commit();
}
}
}
};
handler.postDelayed(r, WAIT_VIEWPAGER_NUDGE);
}
}
Thank you Yuvraj! It worked with a simple modification. If anybody is getting "Invalid index 0, size is 0" error, here's a simple fix for it. If you call animateViewPager() method in onCreate() you might get this error, "Invalid index 0, size is 0". I believe viewpager.beginFakeDrag(); is being called before viewPager items / childs are initialized. So, call animateViewPager() with a delay like so:
new Handler().postDelayed(() -> animateViewPager(viewPager, 10, 1000), 500);
500 is the delay in milisecond
Related
I want to create timer progress bar for 1 minute. I've used following code but it is starting from 60 to 0 whereas using same procedure I've to start from 0 to 60.
public static void animateTimerProgress(int currentTimeDuration, final int maxTimeDuration, boolean withStartDelay, final DonutProgress timeOutProgressView, Runnable endAction) {
final int duration = currentTimeDuration < 0 ? 1 : currentTimeDuration;
timeOutProgressView.setMax(maxTimeDuration);
timeOutProgressView.setProgress(duration);
timeOutProgressView.animate()
.setDuration(duration * SECOND_IN_MILLIS)
.setInterpolator(new LinearInterpolator())
.setStartDelay(withStartDelay ? TIMEOUT_START_DELAY : 0)
.setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int progress = 1 + (int) ((1f - valueAnimator.getAnimatedFraction()) * (duration - 1f));
timeOutProgressView.setProgress(progress);
}
})
.withEndAction(endAction)
.start();
}
Any help would be appreciated.
you can use ValueAnimator like this
ValueAnimator animator = ValueAnimator.ofInt(0, 60);
animator.setDuration(duration * SECOND_IN_MILLIS);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
timeOutProgressView.setProgress((int) animation.getAnimatedValue());
}
});
animator.start();
On Kotlin, you can use 2 extension functions to help with that, incrementing 1 by 1 on progress. In this way, you can have a smoother animation:
/**
* ProgressBar Extensions
*/
fun ProgressBar.setBigMax(max: Int) {
this.max = max * 1000
}
fun ProgressBar.animateTo(progressTo: Int, startDelay: Long) {
val animation = ObjectAnimator.ofInt(
this,
"progress",
this.progress,
progressTo * 1000
)
animation.duration = 500
animation.interpolator = DecelerateInterpolator()
animation.startDelay = startDelay
animation.start()
}
How to use it:
progress.setBigMax(10)
progress.animateTo(10, 100)
Use following code to get your progress
int progress = 1 + (int) (valueAnimator.getAnimatedFraction() * (duration - 1f));
valueAnimator.getAnimatedFraction() gives the fraction value of your animation. You need to multiply by the max progress/duration to get current value of progress.
make a class
public class Anim {
public static void fadeOutProgressLayout(Activity act, final ViewGroup progressLayout) {
act.runOnUiThread(new Runnable() {
#Override
public void run() {
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator());
fadeOut.setDuration(300);
fadeOut.setAnimationListener(new Animation.AnimationListener()
{
public void onAnimationEnd(Animation animation)
{
progressLayout.setVisibility(View.GONE);
}
public void onAnimationRepeat(Animation animation) {}
public void onAnimationStart(Animation animation) {}
});
progressLayout.startAnimation(fadeOut);
}
});
}
}
and write this line where ever you want the progress to go
Anim.fadeOutProgressLayout(GamblingVideosActivity.this, progressLayout);
As Writing Custom View for Android said:
Remove any posted Runnable in onDetachedFromWindow
I have a custom view, CircleCheckBox. When it's clicked animation will be executed.
The animation is implemented by View#postInvalidate().
So is there a way to remove any posted runnable in onDetachedFromWindow()?
EDIT
Let me tell you how CircleCheckBox works.
Step 1
In CircleCheckBox constructor I set View#OnClickListener for it:
this.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
toggle();
if (mListener != null) {
mListener.onCheckedChanged(isChecked());
}
}
});
Step 2
In method toggle() it will invoke:
#Override
public void setChecked(boolean checked) {
....
if (checked) {
startCheckedAnimation();
} else {
startUnCheckedAnimation();
}
}
Step 3
Let's say startCheckedAnimation().
private void startCheckedAnimation() {
// circle animation
ValueAnimator circleAnimator = ValueAnimator.ofFloat(0f, 1f);
circleAnimator.setInterpolator(new DecelerateInterpolator());
circleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
mArcPath.reset();
mArcPath.addArc(mRectF, -159, 360 * (1 - value));
postInvalidate();
}
});
circleAnimator.setDuration(mDuration / 4);
circleAnimator.start();
}
I use postInvalidate() method to let view invoke onDraw().
View#clearAnimation() will cancel all animations that have been applied to the View.
In your case you are using a ValueAnimator, which means that you have to keep a reference to it and when you need to cancel the animation you should perform ValueAnimator#cancel():
private ValueAnimator circleAnimator;
...
circleAnimator = ValueAnimator.ofFloat(0f, 1f);
// setup and start `ValueAnimator`
Then, when needed to cancel the animation:
circleAnimator.cancel();
I think you can just use removeCallbacks(Runnable r)method.
void removeCallbacks (Runnable r)
Remove any pending posts of Runnable r that are in the message queue.
I have a button in my layout. And I am animating the position of that button using ObjectAnimator with translationX animation.
ObjectAnimator btnAnimator = ObjectAnimator.ofFloat(myBtn, "translationX",
ViewHelper.getTranslationX(myBtn), 0);
btnAnimator.addListener(new AnimatorListener() {
#Override
public void onAnimationCancel(Animator arg0) {}
#Override
public void onAnimationEnd(Animator arg0) {
Log.i("TAG","Animation Finished");
}
#Override
public void onAnimationRepeat(Animator arg0) {}
#Override
public void onAnimationStart(Animator arg0) {}
});
btnAnimator.setDuration(animationSpeed).start();
Now I would like to have a listener for the TranslationX of that button to notify whenever the TranslationX position of the button changes.
Here's an easy way I found to do what you're after:
btnAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
Log.e("TAG", "translateX: "+animation.getAnimatedValue("translationX"));
}
});
btnAnimator.setDuration(animationSpeed).start();
Two possible approaches:
1) Override onLayout() in your view to manually compare and detect position changes.
2) Use onLayoutChangeListener on your View:
button.addOnLayoutChangeListener(new OnLayoutChangeListener() {
#Override
public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft,
int oldTop, int oldRight, int oldBottom) {
// Check your new position vs the old one
}
});
I used this and it worked as a decent way of listening for changes of the view translation.
var previousTranslationX = view.translationX
var previousTranslationY = view.translationY
view.viewTreeObserver.addOnDrawListener {
if (previousTranslationX != view.translationX ||
previousTranslationY != view.translationY) {
previousTranslationX = view.translationX
previousTranslationY = view.translationY
dispatchViewTranslationUpdated(view)
}
}
Simply register a callback to be invoked when the view tree is about to be drawn.
Note: This listener almost called every time the view is drawn!
public class MyView extends View {
private float oldScaleX;
public MyView(Context context) {
super(context);
getViewTreeObserver().addOnDrawListener(new ViewTreeObserver.OnDrawListener() {
#Override
public void onDraw() {
// Many things can invoke this method! We don't know why view going
// to be redrawn, So we must determine the cause ourselves.
float newScaleX=getScaleX();
if (oldScaleX!=newScaleX) {
scaleXUpdated();
oldScaleX=newScaleX;
}
}
});
}
private void scaleXUpdated() {
Log.e(TAG,"scaleX updated "+getScaleX);
}
}
How to do scrolling effect like twitter when scroll Up hide viewpager tab (Home, Discover, activity). Or effect like facebook scrolling, while scroll up hide option view(status, photo, checkin) when scroll down show option view. Any example link will do please help.
Easy solution:
public abstract class OnScrollObserver implements AbsListView.OnScrollListener {
public abstract void onScrollUp();
public abstract void onScrollDown();
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
int last = 0;
boolean control = true;
#Override
public void onScroll(AbsListView view, int current, int visibles, int total) {
if (current < last && !control) {
onScrollUp();
control = true;
} else if (current > last && control) {
onScrollDown();
control = false;
}
last = current;
}
Usage:
listView.setOnScrollListener(new OnScrollObserver() {
#Override
public void onScrollUp() {
}
#Override
public void onScrollDown() {
}
});
EDIT: better, you have this library https://github.com/ksoichiro/Android-ObservableScrollView
You can look at this https://github.com/LarsWerkman/QuickReturnListView
Source: https://stackoverflow.com/a/25304575/244702
That's my own implementation:
notice:
View to be hidden should be fixed height
We are not hiding the view by Visiblity.GONE
We are setting the final height to 0px
Here is the code:
//Your view which you would like to animate
final RelativeLayout yourViewToHide = (yourViewToHideativeLayout) findViewById(R.id.topWrapper);
//The initial height of that view
final int initialViewHeight = yourViewToHide.getLayoutParams().height;
listView.setOnScrollListener(new AbsListView.OnScrollListener() {
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//Try catch block for NullPointerExceptions
try{
//Here is a simple delay. If user scrolls ListView from the top of the screen to the bottom then continue
if(firstVisibleItem % visibleItemCount == 0) {
//Here we initialize the animator, doesn't matter what values You will type in
ValueAnimator animator = ValueAnimator.ofInt(0, 1);
//if Scrolling up
if (fastScrollSB.getProgress() > view.getFirstVisiblePosition()){
//Getting actual yourViewToHide params
ViewGroup.LayoutParams params = yourViewToHide.getLayoutParams();
if (!animator.isRunning()) {
//Setting animation from actual value to the initial yourViewToHide height)
animator.setIntValues(params.height, initialViewHeight);
//Animation duration
animator.setDuration(500);
//In this listener we update the view
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
ViewGroup.LayoutParams params = yourViewToHide.getLayoutParams();
params.height = (int) animation.getAnimatedValue();
yourViewToHide.setLayoutParams(params);
}
});
//Starting the animation
animator.start();
}
System.out.println("Scrolling up!");
//If not scrolling
} else if (fastScrollSB.getProgress() == view.getFirstVisiblePosition()) {
System.out.println("Not Scrolling!");
//If scrolling down
} else if (fastScrollSB.getProgress() < view.getFirstVisiblePosition()){
//Getting actual yourViewToHide params
ViewGroup.LayoutParams params = yourViewToHide.getLayoutParams();
if (!animator.isRunning()) {
//Setting animation from actual value to the target value (here 0, because we're hiding the view)
animator.setIntValues(params.height, 0);
//Animation duration
animator.setDuration(500);
//In this listener we update the view
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
ViewGroup.LayoutParams params = yourViewToHide.getLayoutParams();
params.height = (int) animation.getAnimatedValue();
yourViewToHide.setLayoutParams(params);
}
});
//Starting the animation
animator.start();
}
System.out.println("Scrolling down!");
}
}
}catch (Exception e){
e.printStackTrace();
}
}
});`
Hope it fits your needs :)
there is no quick example for this. But what you can do is keep track which way you are scrolling and show or hide the view accordingly
For example get first visible position of the ListView keep track of this and if it is smaller then before you know you are scrolling up this way you can show the view. In case it is bigger then hide the view.
This is a simple approach in case you want to have more precise you need to work with onTouchListeners and y coordinates of the movement.
http://developer.android.com/reference/android/widget/ListView.html
I am Trying to animate 3 images one after the other using value animator but i am not able to decide how to call the three handlers after regular intervals..Suppose there are 3 images and i m making three handlers for animating them.But i am able to bring the three images at a time but not one after the other at regular intervals.Please Help
This is my UpdateListener which i am calling from my handler
public void startAnimation_image(final ImageView aniView) {
animator = ValueAnimator.ofFloat(0, .8f);
animator.setDuration(Constants.ANIM_DURATION);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
int Low = 10;
int High = width-150;
int R = (int) ((Math.random() * (High - Low)) + Low);
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = ((Float) (animation.getAnimatedValue())).floatValue();
aniView.setTranslationX(R);
Log.e("mscale",150*mScale +"");
Log.e("value is", value+"");
aniView.setTranslationY((mDisplaySize.bottom + (150*mScale))*value);
x_point = aniView.getTranslationX();
y_point = aniView.getTranslationY();
}
});
animator.addListener(new AnimatorListener() {
#Override
public void onAnimationStart(Animator arg0) {
}
#Override
public void onAnimationRepeat(Animator arg0) {
}
#Override
public void onAnimationEnd(Animator arg0) {
startAnimation();
}
#Override
public void onAnimationCancel(Animator arg0) {
}
});
animator.start();
}
This is one of my handler
#Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
//int viewId = new Random().nextInt(STARS.length);
id = getApplicationContext().getResources().getIdentifier(STARS[0], "drawable",
getApplicationContext().getPackageName());
inflate = LayoutInflater.from(StarsActivity2.this);
img[0].setVisibility(ImageView.VISIBLE);
img[0].setImageResource(id);
mAllImageViews.add(img[0]);
LayoutParams animationLayout = (LayoutParams) img[0].getLayoutParams();
img[0].setLayoutParams(animationLayout);
Log.e("mHandler",img[0]+ "");
startAnimation_image(img[0]);
}
};
There are similaarly three handlers and three update listeners.. Please help...
You can delay an animation by offset ms by calling
animation.setStartOffset(offset);
So for three images with duration ANIM_DURATION, you can use the following values to start them sequentially (probably by passing them as a parameter to startAnimation_image())
// note: this is for illustrative purposes. You should put this in a loop
int firstOffset = 0 * ANIM_DURATION; // starts immediately
int secondOffset = 1 * ANIM_DURATION; // starts after the first animation is finished
int thirdOffset = 2 * ANIM_DURATION; // starts after the second animation is finished
// ... and so on.