How to create a right/left Background animation? - android

I try to develop an application with a left/right animation on the background on the first screen.
For example, this application have an image in background and this image move from left to right. It's exactly what I want to do.
I try with this code :
ImageView imageViewBackground = (ImageView)findViewById(R.id.imageViewBackground);
Animation animation = new TranslateAnimation(0.0f, 200.0f, 0.0f, 0.0f);
animation.setDuration(5000);
imageViewBackground.startAnimation(animation);
and
<ImageView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageViewBackground"
android:src="#drawable/background"
android:scaleType="centerCrop" />
But the imageView with this scaleType are cropped and we can't see the content of the imageView entirely current the animation.

You can use my SlideImageView library from the GitHub. It gives you what you want.

Related

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.

change position of image view

i can't change the position of the login button.Because when i try, it can't be moved from the original position. I' ve set the android:layout_gravity and android:gravity but i want it in a specific position.
how i can set the coordinates (x,y) of the image?
this is the login_fragment.xml
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
<ImageView
android:id="#+id/login"
android:layout_width="400px"
android:layout_height="100px"
android:src="#drawable/login_button" />
You cant do it within the xml itself, you need to create an instance of that ImageView in your activity and call its setX() or setY() method to set the coordinates.
Beware that every screen has different number of pixels, you might have different result on different devices.
Sample:
ImageView s = (ImageView) findViewById(R.id.your_id);
s.setY(number);
s.setX(number);
TranslateAnimation animation = new TranslateAnimation(0.0f, 50.0f, 0.0f, 0.0f);
animation.setDuration(700);
animation.setRepeatCount(5);
animation.setRepeatMode(2);
animation.setFillAfter(true);
image.startAnimation(animation);

Animate ImageView width without scaling

I'm trying to animate an ImageView so it's slowly shown from left to right.
When I asked this before I was having trouble to explain what I wanted, so this time I created the desired effect using HTML / JS:
http://jsfiddle.net/E2uDE/
What would be the best way to get this effect in Android?
I tried changing the scaleType and then applying a ScaleAnimation directly to that ImageView:
Layout:
<ImageView
android:id="#+id/graphImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
Java:
scale = new ScaleAnimation((float)0,
(float)1, (float)1, (float)1,
Animation.RELATIVE_TO_SELF, (float)0,
Animation.RELATIVE_TO_SELF, (float)1);
scale.setDuration(1000);
graphImage.startAnimation(scale);
But this stil scales the image.
I also tried wrapping the ImageView in a FrameLayout, hoping I could just animate the FrameLayout:
<FrameLayout
android:layout_width="70dp"
android:layout_height="fill_parent"
android:clipChildren="true"">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left|clip_horizontal" />
</FrameLayout>
This will still try to scale my ImageView to fit inside the FrameLayout.
There are several ways to do this - one way is to simply change the clip on the canvas (i.e. the area where the view is allowed to draw) of the ImageView drawing your image. Slowly increasing the right-hand edge of the draw bounds will result in same effect as in your example link.
I have written some example code which illustrates this technique. If you download/build/run the project, clicking on the image will run the reveal animation.
Have a look at the onDraw method of the CoveredImageView class, which has the following basic structure:
#Override
protected void onDraw(Canvas canvas) {
...
canvas.getClipBounds(mRect);
mRect.right = ...;
canvas.clipRect(mRect);
...
super.onDraw(canvas);
...
invalidate();
}
The clip is adjusted and then invalidate() is called, causing onDraw() to be called again.
I have also written some code to interpolate the right clip value from the elapsed time, which does not depend on any particular version of Android. However, as a note, from Android 3.0 there is a new animation framework and a ValueAnimator class which could help perform such tasks.
You could overlap your imageview with another one, for example one with a plain white drawable. Then you can animate the overlapping imageview without worrying about scale until it has a width of 0 and remove it. For that to work you have to place your imageView in a RelativeLayout ofc.

Android - Translating view bigger than screen size causes smearing

I am trying to make a game with several "screen". If the user goes to the edge of a screen, an animation should pop in that shifts out the current screen and shifts in the new screen.
I wanted to do this with a TranslateAnimation. First I calculate an bitmap which contains the first and the second screen and then i want to play this in the view 'transitionView' while i hide the view 'levelView', which originally contained the first screen. After the transition is finished, i want to hide 'transitionView' again and display the new screen in 'levelView'.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewGroup"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
class="at.test.game.ScreenTransitionTest2$LevelView"
android:id="#+id/levelView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<view
class="at.test.game.ScreenTransitionTest2$TransitionView"
android:id="#+id/transitionView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
</RelativeLayout>
I first tried to to it with an ImageView, but it would always scale down the bitmap regardless of the settings i used. So I now created my own View, which just draws the image from (0, 0).
Since clipping occured, I disabled it in the onCreate method:
((RelativeLayout)findViewById(R.id.viewGroup)).setClipChildren(false);
The animation looks like this:
this.transitionView.setBitmap(calculateBitmap(screen1, screen2));
TranslateAnimation a = new TranslateAnimation(
Animation.ABSOLUTE, startx, Animation.ABSOLUTE, endx,
Animation.ABSOLUTE, starty, Animation.ABSOLUTE, endy);
a.setDuration(3000);
a.setFillAfter(true);
this.transitionView.setAnimation(a);
a.start();
My problem: Only 480x800 of the bitmap is rendered/moved correctly (the bitmap is about 1000x880 and its starting coordinates are like (-40, -40), endcoordinates (-520, -40)) outside this area (so on the bottom of the screen and to the right as the 2nd frame should move in) instead of displaying the rest of the bitmap nothing is drawn or just smeared (see screenshot)
Why does the bitmap not get correctly drawn in the animation? Did I miss some settings? I tried 'wrap_content' for the viewgroup, but that did not help either. Or is it just not possible to slide bigger bitmaps through the whole screen?
screenshot - nothing is drawn on bottom and smearing occurs on the right

Full example of how to programmatically do RotateAnimations?

I want to have an animation with various steps that do moves (translations) and rotations like "straight on, turn left, straight on, ...." of a car.
I am able to do this in an AnimationSet, but fail at rotating around the center of my car image with the "RELATIVE_TO_SELF" setting. I know about
Animation a = new RotateAnimation(0,90,Animation.RELATIVE_TO_SELF,0.5f,... )
for this purpose. Still the rotation occurs around the upper left corner of the screen (or canvas?).
Currently I am solving this by manually keeping track of the position after each animation step, but this is suboptimal.
I suspect that my initial layout setup is bogus:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<!-- view that draws some background -->
<de.bsd.turtlecar.SampleView android:id="#+id/graph_view"
android:layout_height="350px"
android:layout_width="fill_parent"
android:visibility="invisible"
/>
<!-- the car -->
<ImageView android:id="#+id/car_view"
android:src="#drawable/turtle_car"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:visibility="invisible"/>
</FrameLayout>
<Button ... onClick="run" ... />
</LinearLayout>
This shows the car in the upper left corner (should show up in a different place -- basically where the animation later starts. And it should be move later).
In my code that is triggered through the run button I do:
ImageView carView = (ImageView) findViewById(R.id.car_view);
print(carView);
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation a = new TranslateAnimation(
Animation.ABSOLUTE,200, Animation.ABSOLUTE,200,
Animation.ABSOLUTE,200, Animation.ABSOLUTE,200);
a.setDuration(1000);
animationSet.addAnimation(a);
RotateAnimation r = new RotateAnimation(0f, -90f,200,200); // HERE
r.setStartOffset(1000);
r.setDuration(1000);
animationSet.addAnimation(r);
...
So at the point with here, the rotation works, but I have to keep track. if I rotate RELATIVE_TO_SELF, the rotation happens around (0,0) of the screen.
Additional question: what can I do in order to keep the car on screen after the animation has finished?
Or am I completely on the wrong track?
Try adding setFillAfter(true) to your Animations. That will certainly keep the car in its final place and it may solve your rotation point problems too
TranslateAnimation a = new TranslateAnimation(
Animation.ABSOLUTE,200, Animation.ABSOLUTE,200,
Animation.ABSOLUTE,200, Animation.ABSOLUTE,200);
a.setDuration(1000);
a.setFillAfter(true); //HERE
animationSet.addAnimation(a);
RotateAnimation r = new RotateAnimation(0f, -90f,200,200); // HERE
r.setStartOffset(1000);
r.setDuration(1000);
r.setFillAfter(true); //HERE
animationSet.addAnimation(r);
...

Categories

Resources