Develop Reference

Letting an image expand into view using an animation

In my Android app, I have a TextView with a white background. When it is clicked, its background will change to a .png picture of some icon by calling setBackgroundResource(R.drawable.icon) on the TextView. This works as intended, but the change is rather abrupt. I would like to make the icon appear more gradually; when the TextView is clicked, a tiny version of the icon should appear in the center of the TextView and then immediately expand and fill out the entire TextView. I believe the best way to do this would be by using an animation, which of the available animation types in Android are best for this task?
In case it is not clear what I mean, I drew a sketch to illustrate. The second sequence shows how the code works right now, the first shows how I would like it to be.

So, I managed to get the effect you want with an ImageView, using ScaleAnimation. Here's what you have to do:
First, our XML ImageView:
<ImageView
android:id="#+id/scale_anim"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#android:color/white" />
It has fixed dimensions and a white background.
The animation will start with one click with this, inside your onCreate() method:
ImageView starImageView = (ImageView) findViewById(R.id.scale_anim);
starImageView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
ScaleAnimation starScaleAnimation =
new ScaleAnimation(0.3f, 1f, 0.3f, 1f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
starScaleAnimation.setDuration(500);
((ImageView) v).setImageResource(R.drawable.star);
ScaleAnimation scaleAnim = starScaleAnimation;
v.startAnimation(scaleAnim);
}
});
We are applying a scale animation on the ImageView that stars with 30% of the original size and scales to 100% of its size, from its center point. The duration of this animation is half a second. All these parameters can be changed.
Every time you click the ImageView, your drawable will be applied and the animation will start.

Try this way if it solve yours.
Create an ImageView (X) above your original ImageView (A) - same size and same place as (A)
Animate (X) with ObjectAnimator, listen for the onAnimationEnd call and set the (A)'s background. Then remove (X).
Hope this will help.

Android Game development - Imageview automatically shrinks at screen edge

I have a bunch of dynamically created ImageViews representing different objects in a game, which is working fine. However if any Image reaches the edge of the screen, it shrinks. Looks like android is attempting to create a smooth transition, but this is not wanted.
I found another thread with the same issue here: Animation Drawable gets automatically shrinks at the corners ?, however his solution does not work for me, it only enhances the issue as it starts shrinking once the margin hits the screen edge.
This is my code:
final LayoutParams _updated_params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
_updated_params.setMargins((int)m_x, (int)m_y, 0, 0);
m_image.setLayoutParams(_updated_params);</code>
Where m_x/m_y is the absolute position of the image and m_image is an ImageView instance.
Does anyone know how I can turn off this automatic resizing?

Add setScaleType
m_image.setScaleType(ScaleType.MATRIX);

Use setScaleType
m_image.setScaleType(ScaleType.FIT_XY);

Android ScaleAnimation from code with a nine patch not working

I have a button that says "Sign In". When the user hits it it brings up an alert dialogue that takes user log in info. Once the user inputs their info and hits OK the button stretches to the width required to contain "Welcome, [User Name]". What I'm trying to do is to animate the change in width of the button from "Sign In" to "Welcome, [User Name]".
I've made the button background with a nine patch, which works perfectly if I specify different widths in the xml file. When I try to animate a change in width from the default width to a longer width it just stretches like a normal .png and not a 9.png.
Here's the code I'm using to stretch from one static width to another:
<Button
android:id="#+id/signIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#drawable/button_nine_patch"
android:textSize="20dip"
android:layout_marginBottom="-2dip" />
And
ScaleAnimation stretch = new ScaleAnimation(1.0f ,10.0f, 1.0f, 1.0f);
this.signIn = (Button) this.findViewById(R.id.signIn);
this.signIn.setOnClickListener(this);
stretch.setDuration(2000);
signIn.startAnimation(stretch);
Since I don't know how many letters a person's name will be I need to be able to set the final width of the button from code.
I've googled like crazy and gone over all the android documentation but I just can't find an answer to this problem.
Any help would be MUCH appreciated.

When Android undergoes the animation process on a view, it animates a Bitmap representation of the current view rather than the actual view. Animating the view would require dealing with the components surrounding the view, and would be significantly more costly. While this usually is beneficial, in your situation it turns a 9patch into just any old bitmap, and therefore does not give you the desired result.
I do not know of any way to only transform a specific region of a view, and have a question dedicated to that over here: Stretch/Scale a Specific Region of View/Bitmap

Android: bad animation framerate when fading screen

I have simple task: fade screen (+ other actions, but it doesnt matter now) when something happens (say, button pressed).
My minSDKVersion is 11. I do it in this way: activity layout contains a view:
<View
android:id="#+id/bgFadingView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:background="#android:color/black" />
and method where I fade screen is as follows:
protected void fadeBGView(boolean fadeIn)
{
ObjectAnimator animator = ObjectAnimator.ofFloat(bgFadingView, "alpha", fadeIn ? 0.75f : 0f); //bgFadingView is initialized via findViewById(R.id.bgFadingView);
animator.setDuration(1000);
animator.start();
}
in other words, I have black view, which occupies the whole screen and when I need to fadeIn, I change view's alpha from 0 to 0.75.
The problem is that it works with bad framerate... I see fading animation frame by frame - it works at about 15fps. What am I doing wrong? Android system fading works much more smoothly - I want to archieve the same result or close. How to?

All I had to do was:
ObjectAnimator.setFrameDelay(10);
default frame delay was too long, so my animations didnt work smoothly. The problem was not due to device performance limitations.

Dynamically changing the border of View

I am just planning to implement a view whose border color keeps on changing dynamically at run time based on a timer. For example initially the view's border will be in green color(timer=20sec) and every sec the green color disappears and once it goes of more than half(timer=10sec) of the view... the border color should change to orange and once it reaches the end(timer=5sec) of timer it should be in red color and phone should vibrate (easy can be done).... If somebody is familiar with zynga poker its the same that i want to implement.
Now one way of implementing it could be have a backend timer and based on that have "n" number of drawables and keep on changing the background of the view every sec. But this requires many images and i dont think this is the optimal way of implementing it.
just wondering if i can write a custom view and implement the surface view and do something around it so that this can be done. Anybody has any idea on how to achieve this? can this be done using any animations around customviews? Any ideas around this are greatly appreciated.
Thanks in advance

Run a timertask, and change the border of the view by setting the background value of the view to a style.
Like,
view.setBackground(R.drawable.border_style_green);
So in the timer task, keep checking the time, and change the border.
Note - border_style_green is a XML file which has the style where you can set the border, the rounded corner to a view, etc.

My suggestion is to make use of the animation framework from android. If your app targets versions below honeycomb use NineOldAndroids.
As already suggested set the border by assigning shapeDrawable to your view
view.setBackground(R.drawable.border_style_green);
you start the animator like this. (this code will animate from currentColor to red in 1000ms)
ObjectAnimator animator = ObjectAnimator.ofFloat(this, "color", currentColor,Color.RED);
animator.setEvaluator(new ArgbEvaluator());
animator.setDuration(1000);
animator.start();
Then in your activity implement:
public void setColor(int color){
currentColor = color;
view.getBackground().setColorFilter(color, PorterDuff.Mode.MULTIPLY);
}

if view is html page : Use Jquery for this implementation. by ajax you can call backend as well. Jquery delay function