I wrote code which can change background image random every 5 second.now i want to use fade in/out animation to change background image,but I do not know how I can use this animation.
This is a my source:
void handlechange() {
Handler hand = new Handler();
hand.postDelayed(new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
// change image here
change();
}
private void change() {
// TODO Auto-generated method stub
Random rand = new Random();
int index = rand.nextInt(image_rundow.length);
mapimg.setBackgroundResource(image_rundow[index]);
handlechange();
}
}, 4000);
}
At the moment everything is OK. I can change background image random,but I don't know how can I use animation fade in/out.
If anyone knows solution please help me,
thanks.
You need to call these codes.
First, you have to make two xml files for fade in & out animation like this.
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:fillAfter="true"
android:duration="2000"
/>
</set>
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:fillAfter="true"
android:duration="2000"
/>
</set>
Second, you have to run animation of imageView like below and also you have to set AnimationListener to change fadeout when fadein finish.
Animation fadeOut = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_out);
imageView.startAnimation(fadeOut);
fadeOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
Animation fadeIn = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_in);
imageView.startAnimation(fadeIn);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
For fade in animation , create new folder named 'anim' in your res folder and inside it, create 'fade_in.xml' with following code
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="#android:integer/config_mediumAnimTime"
android:fromAlpha="0.0"
android:interpolator="#android:anim/decelerate_interpolator"
android:toAlpha="1.0" />
</set>
now to run this animation on your imageview, use following code in your activity
Animation anim = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_in);
imageView.setAnimation(anim);
anim.start();
for fadeout animation, just swap values of android:fromAlpha and android:toAlpha
Hope this helps.
You can use relativeLayout, and add one layer of background view which set both height and width match_parent. All other UI element should put on top of this view. In your code. Define fadeOut and fadeIn animation. Find that background view by id, then do this:
xxxBackground.startAnimation(fadeOut);
xxxBackground.setBackgroundResource(R.drawable.your_random_pic);
xxxBackground.startAnimation(fadeIn);
You can use some interpolator to tune the performance.
You need AnimationDrawable with animation.
First step AnimationDrawable
-Create a file /res/anim/anim_android.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false">
<item android:drawable="#drawable/android_1"
android:duration="100"/>
<item android:drawable="#drawable/android_2"
android:duration="100"/>
<item android:drawable="#drawable/android_3"
android:duration="100"/>
<item android:drawable="#drawable/android_4"
android:duration="100"/>
<item android:drawable="#drawable/android_5"
android:duration="100"/>
<item android:drawable="#drawable/android_6"
android:duration="100"/>
<item android:drawable="#drawable/android_7"
android:duration="100"/>
</animation-list>
-Add a ImageView with android:src="#anim/anim_android".
<ImageView
android:id="#+id/myanimation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#anim/anim_android" />
Second step
-In your activity create AnimationDrawable and Animation
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.setOneShot(true);
animationDrawable.start();
Animation animation = AnimationUtils.loadAnimation(YourActivity.this, android.R.anim.fade_in);
imageView.setAnimation(animation);
animation.start();
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
Animation fadeOut = AnimationUtils.loadAnimation(YourActivity.this, android.R.anim.fade_out);
imageView.startAnimation(fadeOut);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
you don't need Handler.
Answer by kimkevin animates a View (be it an ImageView, TextView etc.) and not a background of a View. Which means if you want to just highlight any View, you'll have to add another View behind it (lets call it backgroundView) and animate that backgroundView.
Use the following code for animating background of a view
val startColor = view.solidColor
val endColor = ContextCompat.getColor(context, R.color.your_color)
val colorAnim = ObjectAnimator.ofInt(view, "backgroundColor", startColor, endColor, startColor)
colorAnim.duration = 2000
colorAnim.setEvaluator(ArgbEvaluator())
colorAnim.start()
Related
I am trying to create a drop-down animation. When the user taps on a specified button #+id/btnToHideView, I would like a view #+id/relativeLayoutControls to drop down/slide up (VISIBLE / GONE).
Here is how the layout file looks:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnToHideView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="#drawable/hide_btn"
/>
<RelativeLayout
android:id="#+id/relativeLayoutControls"
android:layout_width="60dp"
android:layout_height="fill_parent"
android:layout_marginRight="6dp"
android:layout_marginEnd="6dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">
//I have buttons in this layoout
</RelativeLayout>
</LinearLayout>
and this is what I have tried:
I created 2 animation files in res/anim
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromYDelta="0"
android:toYDelta="100%" />
</set>
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
Then I tried handling this by doing:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
controlsHide = (RelativeLayout) findViewById(R.id.relativeLayoutControls);
final Animation slide_down = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_down);
final Animation slide_up = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_up);
btnToHideView = (Button) findViewById(R.id.btnToHideView);
btnToHideView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//I just did slide_up to test if its working
controlsHide.startAnimation(slide_up);
}
});
I followed this post, but when I tap on the button nothing happens. In logcat, it only prints ACTION_DOWN.
Please try this:
SlideUp:
Animation slideUp = AnimationUtils.loadAnimation(activity, R.anim.slide_up);
view.startAnimation(slideUp);
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
or
view.animate().translationY(0);
Dropdown:
view.animate().translationY(view.getHeight());
Here is my source code implementation (refer here), You can use them
// Initially hide/show the content view.
redLayout = mView.findViewById(R.id.history_operation);
//Load animation
slide_down = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_down);
slide_up = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_up);
Create an animation xml for slide down and up. You can feel free to set the duration for the animation if you like. Here I set 500 milli:
<translate
android:duration="500"
android:fromYDelta="-100%"
android:toYDelta="0" />
and
<translate
android:duration="500"
android:fromYDelta="0"
android:toYDelta="-100%" />
Implementing the animation in the source code:
slide_up.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
//When the animation was finished, set gone to the view
redLayout.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
slide_down.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
//When the animation start, set visible to the view
redLayout.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
Finally, calling the toggle function to start the defined animations
private void toggle1() {
// Start animation
if(isFadeOut){
redLayout.startAnimation(slide_down);
}else {
redLayout.startAnimation(slide_up);
}
isFadeOut = !isFadeOut;
}
Usually I don't like to use dependencies to keep app light as much as possible. But Animation library has fun various animations:
Java:
Import render animations
import render.animations.*;
Start animation
// Declare yourlayout
yourlayout AppleText = findViewById(R.id.yourlayout);
// Create Render Class
Render render = new Render(MainActivity.this);
// Set Animation
render.setAnimation(Attention.Wobble(AppleText));
render.start();
Kotlin:
Import render animations
import render.animations.*
Start animation
// Declare yourlayout
val yourlayout: View = findViewById(R.id.layout_tag)
// Create Render Class
val render = Render(this)
// Set Animation
render.setAnimation(Bounce().InDown(yourlayout))
render.start()
Bonuse().InUp(yourview) and try Bonuse().InDown(yourview)
Slide().InUp(yourview) and try Slide().InDown(yourlayout)
I have an app with certain background and i want to change it to different background very nicely and gradually on a button click.
I tried doing it with objectanimator by setting background attribute of root layout to two png files that are in my drawable folder but it did not work as type of value of background is in drawable.
My root layout is relative layout and i want to change its background.
RelativeLayout.setbackground(drawable image);
,and objectanimator does not take property with values that are not int,float etc which in my case i have drawable type.
objectanimator.offloat(view,property,values....);
What are the best ways to accomplish this without any library?
Add these two animations to your anim folder
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:fillAfter="true"
android:duration="2000"
/>
</set>
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:fillAfter="true"
android:duration="2000"
/>
</set>
and then in your Activity/Fragment
Animation fadeIn = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_in);
imageView.startAnimation(fadeIn);
fadeIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
Animation fadeOut = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_out);
imageView.startAnimation(fadeOut);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
I want to apply animation on layout
when i click on arrow the slide meny look like
then clink on arrow reanimation the menuenter code here
You can define an animation like this one that animates left to right and apply that to your layout:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="700"/>
</set>
To apply animation to a layout resource:
Animation slideInLeft;
...
slideInLeft = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
mYourLayout.startAnimation(slideInLeft);
Edit:
When the animation is finished the layout will go back to the starting position. to avoid that you can use one of these 3 approaches:
1- Define an animation listener like this and hide your layout
anim.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation arg0) {
}
});
2- Use a postDelayed Handler with the same duration has your animation duration and hide the layout at the end.
3- add this line to your animation:
anim.setFillAfter(true);
Hope it helps.
I use API 10.
I have an ImageView nested inside of a LinearLayout. The ImageView has an OnClickListener (or an OnTouchListener, I'm sure which one I ll use at the end). The ImageView is centered on the screen, and when clicked it performs the following animation.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true"
>
<alpha
android:fromAlpha="1"
android:toAlpha="0"
android:duration ="500"
/>
<translate
android:fromXDelta="0%"
android:toXDelta="-100%p"
android:duration ="1000"
/>
</set>
The problem is that after the animation ends, it returns to its first position, faded out to 0, but it is still clickable even if it doesn't show up. I click on an empty space where the ImageView was first positioned, and it performs the the animation again. Like clicking a ghost.
How do I make it so that the ImageView stays at the position written at android:toXDelta ??
You can set an animationListener to your animation to tackle the problem, I created this simple fonction:
public void startAnimation(final View v, final int animationResourceId, AnimationListener l){
Animation anim;
if(v!=null){ // can be null, after change of orientation
anim = AnimationUtils.loadAnimation(v.getContext(),resId);
v.setAnimation(anim);
anim.setAnimationListener(l);
v.startAnimation(anim);
}
}
Then every time I need to animate an view, I can do something like this:
startAnimation(myView, R.anim.my_anim, new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
myView.setVisibility(View.GONE);
}
});
I have 2 imageview (a imageview for a pen image, and a imageview for a line, both are drawable), that each one has it own view animation that works perfectly.
my problem is that when I start the animation for the pen I want it to interact and animate the drawing of the line in the other view animation (I want that it will show as the pen is drawing the line), how do I do that?
my xml for animation for the pen imageview is:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:fromYDelta="-50%p"
android:toYDelta="-50%p"
android:duration="2000"/>
</set>
my xml for animation for the line imageview is:
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="0%"
android:pivotY="50%"
android:fromXScale="0%"
android:toXScale="100%"
android:fromYScale="1.0"
android:toYScale="1.0"
android:fillAfter="true"
android:duration="2000"
android:interpolator="#android:anim/linear_interpolator"
/>
please help!
I believe this can be done with the help of animationListener. Add an animationListener for the pen's animation. In onAnimationStart method do lineImage.startAnimation(lineAnimation);
Sample:
penAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
lineImage.startAnimation(lineAnimation);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});