Fill Imageview background animation - android

How to fill a image view background such that its transparent area will be filled by some color.
I want to fill below image -
and filled image will be like -
i want to fill black area of image only with animation from bottom to top.
Please suggest some animation by which i can do desire animation.
Thanks in advance

U can try adding it in code
ImageView backgroundImg = (ImageView) findViewById(R.id.backgroundImg);
backgroundImg.setBackgroundColor(Color.rgb(100, 100, 50));
This will also solve your problem. Just add this in your ImageView tag.
android:background="#android:color/red"
Check this Im not sure. But check this snippet
You can simply use ArgbEvaluator which is available since API 11 (Honeycomb):
ValueAnimator anim = new ValueAnimator();
anim.setIntValues(color1, color2);
//anim..setIntValues(Color.parseColor("#FFFFFF"), Color.parseColor("#000000"));
anim.setEvaluator(new ArgbEvaluator());
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
backgroundImg.setBackgroundColor((Integer)valueAnimator.getAnimatedValue());
}
});
anim.setDuration(300);
anim.start();
Even better, beginning with API 21 (Lollipop 5.0) you can replace the first 3 lines in the code above with one:
ValueAnimator anim = ValueAnimator.ofArgb(color1, color2)

Related

android tint animation doesn't work

I have custom ImageView which should animate its content after loading from solid background color to image with setColorFilter:
private void _animate() {
int bgColor= ContextCompat.getColor(getContext(), R.color.iconPlaceholderBg);
int transparent=ContextCompat.getColor(getContext(),android.R.color.transparent);
ValueAnimator bgAnim= ValueAnimator.ofObject(new ArgbEvaluator(),bgColor,transparent);
bgAnim.setDuration(5000);
//bgAnim.setInterpolator(new DecelerateInterpolator());
bgAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
//Log.d("anim",animation.getAnimatedFraction()+"")
//Image.this.clearColorFilter();
Image.this.setColorFilter((int)animation.getAnimatedValue());
}
});
bgAnim.start();
}
Animation itself runs as expexted (5 seconds long).However content appears immediately in the final position(without color transformation).I've tried different PorterDuff.Mode modes but looks like none of them do things right.Are there any workarounds to get desired effect?
The problem was with my background color which has tranparency.For some reason setColorFilter works not exactly as you expect with trasparent colors.I've managed to get desired behaviour with following workaround:
Image.this.getDrawable().setAlpha((int) (animation.getAnimatedFraction()*255));

Smooth color animation

I'm trying to create smooth color animation in my WaveView. Unfortunatelly animation is creating rainbow effect spamming through every color from start to end.
I'll need it to go from Red to Green with just (Red -> Orange - > Yellow - > Greenish -> Green) like on RGB tables.
Here's my ObjectAnimator:
ObjectAnimator waveColor = ObjectAnimator.ofInt(
mWaveView, "waveColor",Color.parseColor("#64ff0000"),Color.parseColor("#6400ff00"));
waveColor.setDuration(7000);
waveColor.setInterpolator(new LinearInterpolator());
animators.add(waveColor);
I have no idea how to make it to just go through that colors.
Check this Link:
Hope I have understood your question properly and it helps
ColorDrawable[] color = {new ColorDrawable(Color.RED), new ColorDrawable(Color.GREEN)};
TransitionDrawable trans = new TransitionDrawable(color);
//This will work also on old devices. The latest API says you have to use setBackground instead.
mWaveView.setBackgroundDrawable(trans);
trans.startTransition(7000);
best way use ValueAnimator and ColorUtils.blendARGB
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
valueAnimator.setDuration(325);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float fractionAnim = (float) valueAnimator.getAnimatedValue();
view.setColorBackground(ColorUtils.blendARGB(Color.parseColor("#FFFFFF")
, Color.parseColor("#000000")
, fractionAnim));
}
});
valueAnimator.start();

RecyclerView ItemAnimator cannot animate width change

I want to change the size of the itemView of RecyclerView in the 'animateMoveImpl()' method for my ItemAnimator, but it did not work.
I have tried the scale animation, it works fine, but not enough.
What I want to achieve is to change the 'width' property, so the image shown in the itemView will adapt to the change. The scale animation just make the image stretched.
Is it possible to animate the width change of itemView in ItemAnimator?
Thanks~
Update:
The code is like follows.
ValueAnimator anim = ValueAnimator.ofFloat(1f, 0.5f);
anim.setDuration(1000);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float tmp = DEFAULT_WIDTH * (float)animation.getAnimatedValue();
animButton.setWidth((int)tmp);
animButton.requestLayout();
}
});
anim.start();
Note that it works for normal view. But it does not work int the 'animateMoveImpl()' for ItemAnimator.

FloatingActionButton icon animation (Android FAB src drawable animation)

I was trying to find documentation about how to create icon animation of FAB's (of the Design support library), after searching a while i couldn't find any information about it and the AnimationDrawable reference in android developers doesn't work for FAB's even if the class is a child of ImageView.
but manage to get a workaround that works just fine.
The technic I used is similar to the one exposed on the DrawableAnimation documentation, and using the Property Animation API doc.
First I use the ValueAnimator class, and an int array containing the ids of the drawables that you're going to use in your animation.
final int[] ids = {R.drawable.main_button_1,R.drawable.main_button_2,R.drawable.main_button_3,R.drawable.main_button_4,R.drawable.main_button_5,R.drawable.main_button_6, R.drawable.main_button_7};
fab = (FloatingActionButton) findViewById(R.id.yourFabID);
valueAnimator = ValueAnimator.ofInt(0, ids.length - 1).setDuration(yourAnimationTime);
valueAnimator.setInterpolator( new LinearInterpolator() /*your TimeInterpolator*/ );
Then set up an AnimationUpdateListener, and define the change in icon behavior with the method FloatinActionButton.setImageDrawable(Drawable yourDrawable).
But the ValueAnimator updates by default every available frame (depending on the load in hardware), but we don't need to redraw the icon if it has already been drawn, so that is why I use the variable "i"; so each icon is drawn only once. (the timing depends on the interpolator you define)
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
int i = -1;
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int animatedValue = (int) animation.getAnimatedValue();
if(i!=animatedValue) {
fab.setImageDrawable(getResources().getDrawable(ids[animatedValue]));
i = animatedValue;
}
}
});
This implementation allows you to play the animation backward with the method ValueAnimator.reverse();
I know is not a pro solution but it's the only one I've figured out to work on all API's supporting the PropertyAnimation. Please, if you know a better solution post it here, if not I hope this post is helpful
You can achieve FAB's src drawable animation quite similarly to other views that use background for AnimationDrawable.
For general views' background drawable animation, see Use AnimationDrawable.
However, you cannot call getBackground() to get FAB's src.
Instead, use getDrawable().
Example:
FloatingActionButton loginButton = findViewById(R.id.loginButton);
loginAnimation = (AnimationDrawable) loginButton.getDrawable();
loginButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
loginAnimation.start();
}
});

How do I animate expansion of a ListView?

I'm looking to implement an animation that will slide open or expand a ListView in android. At the moment, I'm using a scale animation (shown below)
Animation slideDown = new ScaleAnimation(1.0f, 1.0f, 0.0f, 1.0f);
slideDown.setDuration(1000);
but this doesn't work for 2 reasons:
1) I want the first item to fade in, and then the list to drop down. If I do a fade in animation, the entire list shows up and then jumps back up to the top and scales down to full size
2) I'm not really looking to scale, I would like to just reveal the ListView by animating down the bottom (if that makes sense).
Is there a way that I can do a TranslateAnimation on just the bottom margin or something similar? I looked into the drawable Clip resource, but that didn't seem to fit my needs here (I'm not sure how to apply it to a ListView). And I'm using a normal ListView, not an ExpandableListView, because I just have one group of items.
So I started searching for different things and it turns out that animating the height was my solution. Essentially I start with a dummy object in the list (so that it has at least 1 row), then I animate it from the height of that row to the height of the full list. Below is the code for the runnable that I am now calling.
private Runnable slideDownList1 = new Runnable() {
#Override
public void run() {
final ListView detail = (ListView)getView().findViewById(R.id.detail_menu_1);
ValueAnimator va = ValueAnimator.ofInt(detail.getHeight(), detail.getHeight()*mItem.containedObjects.size());
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
Integer value = (Integer) animation.getAnimatedValue();
detail.getLayoutParams().height = value.intValue();
detail.requestLayout();
}
});
va.setDuration(1000);
va.start();
}
};
The XML is just a basic ListView with the id of detail_menu_1.
The new element Recycler View include animations. You can use it with Support Library
https://developer.android.com/training/material/lists-cards.html

Categories

Resources