material design animate android - android

Hi I try to animate list of Views in layout to be scale_up but each of them must have wait for 100 millisecond after last view start it's animation.
I try to set delay for them:
for (View view: views) {
AnimatorSet animator = (AnimatorSet)AnimatorInflater.loadAnimator(context, R.animator.edit_text_open);
animator.setStartDelay(counter++ * 100);
Log.e("counter number:", "" + counter);
animator.setTarget(view);
animator.start();
}
but it's not work all View animate together.
and one more thing is there any good recurse about material design animations I try to make animation like shows in every where with material design I just don't know how they do it.

Initializing AnimatorSet
AnimatorSet animator = (AnimatorSet)AnimatorInflater.loadAnimator(context, R.animator.edit_text_open);
Using Timer will get the task done
Timer t = new Timer();
int count = 0;
t.scheduleAtFixedRate(new TimerTask() {
// Do stuff
animator.setTarget(views.get(count));
animator.start();
count++;
if (count >= views.size()) //assuming views as List<View>
t.cancel();
}, 0, 100);
Hope, that helps. Happy Coding!!!

As #Stack Overflowerrr say in last answer there is the code:
t.scheduleAtFixedRate(new TimerTask() {
// Do stuff
#Override
public void run() {
runOnUiThread(new Runnable() {
#Override
public void run() {
AnimatorSet animator = (AnimatorSet)AnimatorInflater.loadAnimator(MainActivity.this, R.animator.edit_text_open);
animator.setTarget(views.get(count));
animator.start();
Log.e("counter", "" + count);
}
});
count++;
if (count + 1 >= views.size()) //assuming views as List<View>
t.cancel();
}
}, 0, 500);
and I declare these two as global:
int count = 0;
Timer t = new Timer();
again many thans Stack Overflowerrr.

Related

How to correctly animate stacking views one after another in Android using handler?

I have a LinearLayout with RelativeLayout children. Each RelativeLayout has a background image like a file cabinet. I am trying to animate the drawers dropping down into view one after another with a smooth delay. Everything I have tried plays all animations at once. I have this as my method for animating each drawer:
private void dropAndPause(final RelativeLayout drawer){
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_down);
animation.setStartOffset(750L);
drawer.startAnimation(animation);
}
}, 1200);
}
I have also tried this:
View[] views = new View[] { ... };
// 100ms delay between Animations
long delayBetweenAnimations = 100l;
for(int i = 0; i < views.length; i++) {
final View view = views[i];
// We calculate the delay for this Animation, each animation starts 100ms
// after the previous one
int delay = i * delayBetweenAnimations;
view.postDelayed(new Runnable() {
#Override
public void run() {
Animation animation = AnimationUtils.loadAnimation(context, R.anim.your_animation);
view.startAnimation(animation);
}
}, delay);
}
Instead of View[] views, I used this:
View[] drawers = new View[] {
drawerOne, drawerTwo, drawerThree, drawerFour, drawerFive
};
Which plays, again, all of the animations at once. How can I get each "drawer"/view to slide in one at a time? Also, should I have each view as visibility GONE initially?
If you want to animate the views inside a layout, then it's much easier to use layout animations. Basically, you need to load an animation, create a LayoutAnimationController, set the delay on it, and launch the animation. Here's some sample code.
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_down);
animation.setStartOffset(750L);
LayoutAnimationController controller = new LayoutAnimationController(animation);
controller.setDelay(0.1F);
viewGroup.setLayoutAnimation(controller);
viewGroup.startLayoutAnimation();
The delay here is set as fraction of the animation duration.

How to make an imageView change background randomly?

I have an imageview with 5 backgrounds to choose from. I want to fade image2 out and set image5 as background with fade in effect. This should keep changing randomly. The problem is, how do i do this efficiently?
this is how i give fade in and fade out effects using system animations-
fade out
Animation out = AnimationUtils.makeOutAnimation(this, true);
viewToAnimate.startAnimation(out);
viewToAnimate.setVisibility(View.INVISIBLE);
fade in
Animation in = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
viewToAnimate.startAnimation(in);
viewToAnimate.setVisibility(View.VISIBLE);
this is how i change my background-
search_engine_identifier.setImageResource(R.drawable.ic_yahoo);
Create two in xml you can get from here then load them like this.
ImageView myImageView = (ImageView) findViewById(R.id.imageView2);
Animation myFadeInAnimation = AnimationUtils.loadAnimation(Splash.this, R.anim.fadein)
Animation myFadeOutAnimation = AnimationUtils.loadAnimation(Splash.this, R.anim.fadeout);
int value = 0; // Global Type
btnStart.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(value%2 == 0){
doFadeOutAnimation();
}else{
doFadeInAnimation();
}
value ++;
}
});
Another way to do this is by using one of Android's View Animator classes, such as ObjectAnimator. Here's what I'm doing:
1) Add the drawable ID's of the images you want to use into an int array.
2) Create ObjectAnimators for the fadeIn and fadeOut animations. You can set the duration of the fade in and fade out to whatever you want.
3) Add an AnimatorListener to the fadeOut ObjectAnimator so that when it finishes, it will set the new image (which is chosen randomly by selecting a random number from the images array) and then it will fade back in with the new image, using the fadeIn ObjectAnimator.
4) Create a runnable and in it's run method, start the fadeOut animation.
5) Call handler.postDelayed on the runnable and use that to decide how long you want each image to stay before fading out.
6) At the end of your Runnable's run method, call handler.postDelayed again so the images will continue to fade in and out, but you should make sure that you have some kind of conditional statement so that you can stop the animation when you need to, which is why I used the boolean "running" so I can set it to false when I need to stop the handler from looping.
ImageView mImageView = (ImageView) findViewById(R.id.imageView);
boolean running = true;
final int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3,
R.drawable.image4, R.drawable.image5};
final Random random = new Random();
final Handler handler = new Handler();
final ObjectAnimator fadeIn = ObjectAnimator.ofFloat(mImageView, "alpha", 0f, 1f);
fadeIn.setDuration(1000);
final ObjectAnimator fadeOut = ObjectAnimator.ofFloat(mImageView, "alpha", 1f, 0f);
fadeOut.setDuration(1000);
fadeOut.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
int rand = random.nextInt(images.length);
mImageView.setImageResource(images[rand]);
fadeIn.start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
Runnable runnable = new Runnable() {
#Override
public void run() {
fadeOut.start();
if (running) {
handler.postDelayed(this, 5000);
}
}
};
handler.postDelayed(runnable, 5000);
}
This will continuously loop through your selected images (randomly) with fade in/ fade out animations. You can add a few checks to make sure the same image doesn't appear twice in a row, etc.

android- simple fade out and fade in animation for viewflipper

I'm new to android and I don't know a lot about android animation .
I've a viewflipper and I want to animate between images inside it .
This is the code :
runnable = new Runnable() {
public void run() {
handler.postDelayed(runnable, 3000);
imageViewFlipper.setInAnimation(fadeIn);
imageViewFlipper.setOutAnimation(fadeOut);
imageViewFlipper.showNext();
}
};
handler = new Handler();
handler.postDelayed(runnable, 500);
}
The 2 animated file are not good , they animate very badly .
I just need a code to fade out the front image and fade in the next image and do the same for all images inside it.
Could anyone help me out ?
thank you
Simple using Kotlin.
First, set the animations:
private fun setAnimations() {
// in anim
val inAnim = AlphaAnimation(0f, 1f)
inAnim.duration = 600
flipperView.inAnimation = inAnim
// out anim
val outAnim = AlphaAnimation(1f, 0f)
outAnim.duration = 600
flipperView.outAnimation = outAnim
}
And to flip (between two views) just call this function:
fun onSendClick(view: View) {
viewFlipper.displayedChild = if(flipperView.displayedChild == 0) 1 else 0
}

force layout to refresh/repaint android?

I want to change position of layout and after 75ms return it to first position to make a movement and that is my code:
for(int i = 0; i < l1.getChildCount(); i++) {
linear = (LinearLayout) findViewById(l1.getChildAt(i).getId());
LayoutParams params = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
params.bottomMargin = 10;
linear.setLayoutParams(params);
SystemClock.sleep(75);
}
The problem is the app is stop for 750ms and don't do anything. I tried invalidate() , refreshDrawableState(), requestLayout(), postInvalidate(), and try to call onResume(), onRestart(), onPause() .
Maybe you need:
linear.invalidate();
linear.requestLayout();
after making the layout changes.
EDIT:
Run the code on a different thread:
new Thread() {
#Override
public void run() {
<your code here>
}
}.start();
And whenever you need to update the UI from that thread use:
activity.runOnUiThread(new Runnable() {
#Override
public void run() {
<code to change UI>
}
});
After several hours of testing, I found the solution about updating a view if you made operation with these views like adding children, visibility, rotation, etc.
We need to force update the view with the below methods.
linearSliderDots.post {
// here linearSliderDots is a linear layout &
// I made add & remove view option on runtime
linearSliderDots.invalidate()
linearSliderDots.requestLayout()
}
You should try using an ValueAnimator (Or object animator), the below code is in kotlin but same logic would be applied for java:
val childCount = someView.childCount
val animators = mutableListOf<ValueAnimator>()
for (i in 0..childCount) {
val child = (someView.getChildAt(i))
val animator = ValueAnimator.ofInt(0, 75)
animator.addUpdateListener {
val curValue = it.animatedValue as Int
(child.layoutParams as ViewGroup.MarginLayoutParams).bottomMargin = curValue
child.requestLayout()
}
animator.duration = 75
animator.startDelay = 75L * i
animators.add(animator)
}
animators.forEach { animator ->
animator.start()
}
Basically you create a bunch of animators that have start delay proportionate to the number of children, so as soon as one animation ends, the new one starts
ActivityName.this.runOnUiThread(new Runnable() {
#Override
public void run() {
<code to change UI>
}
});

Scroll up a ScrollView slowly

The question is "How do i scroll up a ScrollView to top very smoothly and slowly".
In my special case i need to scroll to top in about 1-2 seconds.
Ive tried interpolating manually using a Handler (calling scrollTo(0, y)) but that didnt work at all.
I've seen this effect on some bookreader-apps yet, so there must be a way, im sure :D.
(Text is very slowly scrolling up to go on reading without touching the screen, doing input).
I did it using object animator (Available in API >= 3) and it looks very good:
Define an ObjectAnimator:
final ObjectAnimator animScrollToTop = ObjectAnimator.ofInt(this, "scrollY", 0);
(this refers to the class extending Android's ScrollView)
you can set its duration as you wish:
animScrollToTop.setDuration(2000); (2 seconds)
P.s. Don't forget to start the animation.
In 2 seconds move the scroll view to the possition of 2000
new CountDownTimer(2000, 20) {
public void onTick(long millisUntilFinished) {
scrollView.scrollTo(0, (int) (2000 - millisUntilFinished)); // from zero to 2000
}
public void onFinish() {
}
}.start();
Try the following code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
{
ValueAnimator realSmoothScrollAnimation =
ValueAnimator.ofInt(parentScrollView.getScrollY(), targetScrollY);
realSmoothScrollAnimation.setDuration(500);
realSmoothScrollAnimation.addUpdateListener(new AnimatorUpdateListener()
{
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
int scrollTo = (Integer) animation.getAnimatedValue();
parentScrollView.scrollTo(0, scrollTo);
}
});
realSmoothScrollAnimation.start();
}
else
{
parentScrollView.smoothScrollTo(0, targetScrollY);
}
Have you tried smoothScrollTo(int x, int y)?
You can't set the speed parameter but maybe this function will be ok for you
You could use the Timer and TimerTask class. You could do something like
scrollTimer = new Timer();
scrollerSchedule = new TimerTask(){
#Override
public void run(){
runOnUiThread(SCROLL TO CODE GOES HERE);
}
};
scrollTimer.schedule(scrollerSchedule, 30, 30);

Categories

Resources