I am trying to write an animation like in WhatsApp Call screen. But I don't know what is the true way to achieve this.
To achieve this animation I am starting trying with fadein and fadeout animation. These are my set methods for fade in and out animations.
private Animation setAnimFadeOut(int startOff,int duration){
Animation animFadeOut;
animFadeOut = new AlphaAnimation(1, 0);
animFadeOut.setInterpolator(new AccelerateInterpolator());
animFadeOut.setStartOffset(startOff);
animFadeOut.setDuration(duration);
return animFadeOut;
}
private Animation setAnimFadeIn(int startOff,int duration){
Animation animFadeIn;
animFadeIn = new AlphaAnimation(0, 1);
animFadeIn.setInterpolator(new AccelerateInterpolator());
animFadeIn.setStartOffset(startOff);
animFadeIn.setDuration(duration);
return animFadeIn;
}
and for every animations animationlisteners onAnimationEnd method triggers animation for restart. fadeIn animation starts fadeOut animation and fadeOut starts fadeIn animation.
right1FadeOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
right1.startAnimation(right1FadeIn);
Log.i(TAG, "onAnimationEnd: 1 outEnd");
}
});
right1FadeIn.setAnimationListener(new Animation.AnimationListener() {
Override
public void onAnimationEnd(Animation animation) {
right1.startAnimation(right1FadeOut);
Log.i(TAG, "onAnimationEnd: 1 inEnd");
}
});
Initialization
int startOff = 0;
int diff = 100;
int duration = 600;
final Animation right1FadeOut = setAnimFadeOut(startOff,duration);
final Animation right1FadeIn = setAnimFadeIn(0,duration);
final Animation right2FadeOut = setAnimFadeOut(startOff+diff,duration+diff);
final Animation right2FadeIn = setAnimFadeIn(0,duration);
final Animation right3FadeOut = setAnimFadeOut(startOff+diff*2,duration+diff*2);
final Animation right3FadeIn = setAnimFadeIn(0,duration);
I am starting animation calling fadeout for every button and it did not work as I expected. How can I achieve animation like WhatsApp?
right1.startAnimation(right1FadeOut);
right2.startAnimation(right2FadeOut);
right3.startAnimation(right3FadeOut);
this is the result.
I would first use Animator objects instead of Animation, then i can use AnimatorSet to control all animators as a group. (aka: order)
For example:
activity XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0"
android:src="#drawable/ic_launcher_foreground" />
<ImageView
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0"
android:src="#drawable/ic_launcher_foreground" />
<ImageView
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0"
android:src="#drawable/ic_launcher_foreground" />
<ImageView
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0"
android:src="#drawable/ic_launcher_foreground" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Activity Class:
Java:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View[] images = {findViewById(R.id.img1), findViewById(R.id.img2), findViewById(R.id.img3), findViewById(R.id.img4),}; //array of views that we want to animate
//we will have 2 animator foreach view, fade in & fade out
//prepare animators - creating array of animators & instantiating Object animators
ArrayList<ObjectAnimator> anims = new ArrayList<>(images.length * 2);
for (View v : images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 0f, 1f).setDuration(80)); //fade in animator
for (View v : images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 1f, 0f).setDuration(80)); //fade out animator
final AnimatorSet set = new AnimatorSet(); //create Animator set object
//if we want to repeat the animations then we set listener to start again in 'onAnimationEnd' method
set.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
set.start(); //repeat animator set indefinitely
}
});
set.setStartDelay(600); //set delay every time we start the chain of animations
for (int i = 0; i < anims.size() - 1; i++) set.play(anims.get(i)).before(anims.get(i + 1)); //put all animations in set by order (from first to last)
findViewById(R.id.txt).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) { //start the animations on click
set.start();
}
});
}
}
Kotlin:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val images = arrayOf(img1, img2, img3, img4) //array of views that we want to animate
//we will have 2 animator foreach view, fade in & fade out
//prepare animators - creating array of animators & instantiating Object animators
val anims = ArrayList<ObjectAnimator>(images.size * 2)
for (v in images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 0f, 1f).setDuration(80)) //fade in animator
for (v in images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 1f, 0f).setDuration(80)) //fade out animator
val set = AnimatorSet() //create Animator set object
//if we want to repeat the animations then we set listener to start again in 'onAnimationEnd' method
set.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) = set.start() //repeat animator set indefinitely
})
set.startDelay = 600 //set delay every time we start the chain of animations
for (i in 0 until anims.size - 1) set.play(anims[i]).before(anims[i + 1]) //put all animations in set by order (from first to last)
txt.setOnClickListener { set.start() } //start the animations on click
}
}
Try to start your subsequent animations in your AnimationListeners onAnimationStart method with an increasing delay.
arrow1FadeIn.setAnimationListener( new Animation.AnimationListener() {
#Override
public void onAnimationStart( Animation animation )
{
arrow2.startAnimation( arrow2FadeIn );
}
#Override
public void onAnimationEnd( Animation animation )
{
arrow1.startAnimation( arrow1FadeOut );
}
#Override
public void onAnimationRepeat( Animation animation )
{
}
} );
arrow1FadeOut.setAnimationListener( new Animation.AnimationListener()
{
#Override
public void onAnimationStart( Animation animation )
{
}
#Override
public void onAnimationEnd( Animation animation )
{
arrow1.startAnimation( arrow1FadeIn );
}
#Override
public void onAnimationRepeat( Animation animation )
{
}
} );
And your animations like
final Animation arrow1FadeIn = setAnimFadeIn( startOff, duration );
final Animation arrow1FadeOut = setAnimFadeOut( startOff, duration );
final Animation arrow2FadeIn = setAnimFadeIn( diff, duration );
final Animation arrow2FadeOut = setAnimFadeOut( startOff, duration );
final Animation arrow3FadeIn = setAnimFadeIn( diff*2, duration );
final Animation arrow3FadeOut = setAnimFadeOut( startOff, duration );
You may need to twiddle a bit when starting all over again but this way, they should be in sync. Just start the first fadeIn Animation with
arrow1.startAnimation( arrow1FadeIn );
I suggest you use Facebook Rebound library.
It support Spring animation like facebook has. It also has cool feature called SpringChain, which automatically play a sequence of animation using Spring physics from start to end. You can custom how you want to animate the View (scale, alpha, translate ...)
Related
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 Studio 1.5
Device Samsung 4.4.2
I am trying to animate items loaded from a ArrayList into a recyclerview. I when the dropdown arrow is clicked the items should animate (decelerate) when expanded and should animate when collapsed. However, currently the list items just appears.
Code that calls the setAnimation
#Override
public void onBindChildViewHolder(ChatChildViewHolder childViewHolder, int position, Object childListItem) {
ChatChildTitles chatChildTitles = (ChatChildTitles)childListItem;
childViewHolder.tvChildTitle.setText(chatChildTitles.getTitle());
setAnimation(childViewHolder.cvChildRooms, position);
}
Code for setting the animation
private void setAnimation(CardView viewToAnimate, int position) {
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.fade_in);
animation.setInterpolator(mContext, android.R.anim.decelerate_interpolator);
viewToAnimate.startAnimation(animation);
}
Here is a couple of screenshots:
In the collapsed state
After the arrow has been clicked expland the list
This is my layout I am using that represents the rows that will be displayed in the recyclerView:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android:id="#+id/cvChildRooms"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:cardBackgroundColor="#color/child_header_lighter_grey"
card:contentPadding="4dp"
card:cardPreventCornerOverlap="true">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical|start"
android:src="#drawable/photorace"/>
<TextView
android:id="#+id/tvChildTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center"
android:text="Coffee Latte Room"
android:fontFamily="sans-serif-light"
android:textSize="16sp"
android:textColor="#android:color/black"/>
</android.support.v7.widget.CardView>
I have a function that should start the animation.
private void setAnimation(CardView viewToAnimate, int position) {
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.decelerate_interpolator);
viewToAnimate.startAnimation(animation);
}
I have tested using the following that works ok with slide_in_left. However, I don't want them to slide in from the left
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.slide_in_left);
viewToAnimate.startAnimation(animation);
Many thanks for any suggestions,
If you want to use a decelerate interpolator you need to set it AS an interpolator, not as the animator:
private void setAnimation(CardView viewToAnimate, int position) {
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.fade_in); //change this with your desidered (or custom) animation
animation.setInterpolator(mContext, android.R.anim.decelerate_interpolator);
viewToAnimate.startAnimation(animation);
}
UPDATE
You said that you are using com.bignerdranch.android:expandablerecyclerview:2.0.3.
From the official docs of the library, it's clearly state how to create expand/collapse animations:
You can also create your own animations for expansion by overriding
ParentViewHolder#onExpansionToggled(boolean), which will be called for
you when the itemView is expanded or collapsed.
I suggest you to take a look at the official example of the library.
You can't use decelerate_interpolator because it's not an animation, it is an interpolator:
An interpolator defines the rate of change of an animation. This
allows the basic animation effects (alpha, scale, translate, rotate)
to be accelerated, decelerated, repeated, etc.
Reference:
http://developer.android.com/reference/android/view/animation/Interpolator.html
As you can see the XML that describing them are completely different:
Source of decelerate_interpolator.xml:
<decelerateInterpolator />
Source of slide_in_left.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-50%p" android:toXDelta="0"
android:duration="#android:integer/config_mediumAnimTime"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
To animate the list as they expand and collapse, consider using an ItemAnimator from android.
You will need to set up a custom itemAnimator, something similar to the one in the link below:
https://gist.github.com/ademar111190/dc988c8d899dae0193f7
Set the itemAnimator in the method runPendingAnimations to your decelerate interpolator.
#Override
public void runPendingAnimations() {
if (!mViewHolders.isEmpty()) {
int animationDuration = 300;
AnimatorSet animator;
View target;
for (final RecyclerView.ViewHolder viewHolder : mViewHolders) {
target = viewHolder.itemView;
target.setPivotX(target.getMeasuredWidth() / 2);
target.setPivotY(target.getMeasuredHeight() / 2);
animator = new AnimatorSet();
animator.playTogether(
ObjectAnimator.ofFloat(target, "translationX", -target.getMeasuredWidth(), 0.0f),
ObjectAnimator.ofFloat(target, "alpha", target.getAlpha(), 1.0f)
);
animator.setTarget(target);
animator.setDuration(animationDuration);
animator.setInterpolator(new DecelerateInterpolator());
animator.setStartDelay((animationDuration * viewHolder.getPosition()) / 10);
animator.addListener(new AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
mViewHolders.remove(viewHolder);
}
});
animator.start();
}
}
}
Then you will need to set the itemAnimator to the recycler view.
recyclerView.setItemAnimator(new MyItemAnimator());
You can use below code for do that.
private void hideViews() {
recyclerView.animate().translationY(-recyclerView.getHeight()).setInterpolator(new AccelerateInterpolator(2));
FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) mFabButton.getLayoutParams();
int fabBottomMargin = lp.bottomMargin;
mFabButton.animate().translationY(mFabButton.getHeight()+fabBottomMargin).setInterpolator(new AccelerateInterpolator(2)).start();
}
private void showViews() {
recyclerView.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
mFabButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
}
You can call this method onClick of your Button.
Hope it will help you.
Using this code I only have a fade in, I'm looking for how to add a fade out as well. I've added another xml called "fadeout" but I can't integrate it in my code.
ImageView imageView = (ImageView)findViewById(R.id.imageView);
Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.fadein);
imageView.startAnimation(fadeInAnimation);
button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
imageView.startAnimation(fadeInAnimation);
}
}
fadein.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:interpolator="#android:anim/accelerate_interpolator"
android:duration="Your Duration(in milisecond)"
android:repeatCount="infinite"/>
</set>
Here is my solution. It uses AnimatorSet. AnimationSet library was too buggy to get working. This provides seamless and infinite transitions between fade in and out.
public static void setAlphaAnimation(View v) {
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(v, "alpha", 1f, .3f);
fadeOut.setDuration(2000);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(v, "alpha", .3f, 1f);
fadeIn.setDuration(2000);
final AnimatorSet mAnimationSet = new AnimatorSet();
mAnimationSet.play(fadeIn).after(fadeOut);
mAnimationSet.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mAnimationSet.start();
}
});
mAnimationSet.start();
}
This is Good Example for Fade In and Fade Out Animation with Alpha Effect
Animate Fade In Fade Out
UPDATED :
check this answer may this help you
I´ve been working in Kotlin (recommend to everyone), so the syntax might be a bit off.
What I do is to simply to call:
v.animate().alpha(0f).duration = 200
I think that, in Java, it would be the following.:
v.animate().alpha(0f).setDuration(200);
Try:
private void hide(View v, int duration) {
v.animate().alpha(0f).setDuration(duration);
}
private void show(View v, int duration) {
v.animate().alpha(1f).setDuration(duration);
}
According to the documentation AnimationSet
Represents a group of Animations that should be played together. The
transformation of each individual animation are composed together into
a single transform. If AnimationSet sets any properties that its
children also set (for example, duration or fillBefore), the values of
AnimationSet override the child values
AnimationSet mAnimationSet = new AnimationSet(false); //false means don't share interpolators
Pass true if all of the animations in this set should use the
interpolator associated with this AnimationSet. Pass false if each
animation should use its own interpolator.
ImageView imageView= (ImageView)findViewById(R.id.imageView);
Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_in);
Animation fadeOutAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_out);
mAnimationSet.addAnimation(fadeInAnimation);
mAnimationSet.addAnimation(fadeOutAnimation);
imageView.startAnimation(mAnimationSet);
I hope this will help you.
we can simply use:
public void animStart(View view) {
if(count==0){
Log.d("count", String.valueOf(count));
i1.animate().alpha(0f).setDuration(2000);
i2.animate().alpha(1f).setDuration(2000);
count =1;
}
else if(count==1){
Log.d("count", String.valueOf(count));
count =0;
i2.animate().alpha(0f).setDuration(2000);
i1.animate().alpha(1f).setDuration(2000);
}
}
where i1 and i2 are defined in the onCreateView() as:
i1 = (ImageView)findViewById(R.id.firstImage);
i2 = (ImageView)findViewById(R.id.secondImage);
count is a class variable initilaized to 0.
The XML file is :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/secondImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="animStart"
android:src="#drawable/second" />
<ImageView
android:id="#+id/firstImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="animStart"
android:src="#drawable/first" />
</RelativeLayout>
#drawable/first and #drawable/second are the images in the drawable folder in res.
You can do this also in kotlin like this:
contentView.apply {
// Set the content view to 0% opacity but visible, so that it is visible
// (but fully transparent) during the animation.
alpha = 0f
visibility = View.VISIBLE
// Animate the content view to 100% opacity, and clear any animation
// listener set on the view.
animate()
.alpha(1f)
.setDuration(resources.getInteger(android.R.integer.config_mediumAnimTime).toLong())
.setListener(null)
}
read more about this in android docs
Please try the below code for repeated fade-out/fade-in animation
AlphaAnimation anim = new AlphaAnimation(1.0f, 0.3f);
anim.setRepeatCount(Animation.INFINITE);
anim.setRepeatMode(Animation.REVERSE);
anim.setDuration(300);
view.setAnimation(anim); // to start animation
view.setAnimation(null); // to stop animation
FOR FADE add this first line with your animation's object.
.animate().alpha(1).setDuration(2000);
FOR EXAMPLE
Today, I got stuck with this problem. This worked for me:
#JvmStatic
fun setFadeInFadeOutAnimation(v: View?) {
val fadeIn = ObjectAnimator.ofFloat(v, "alpha", 0.0f, 1f)
fadeIn.duration = 300
val fadeOut = ObjectAnimator.ofFloat(v, "alpha", 1f, 0.0f)
fadeOut.duration = 2000
fadeIn.addListener(object : AnimatorListenerAdapter(){
override fun onAnimationEnd(animation: Animator?) {
fadeOut.start()
}
})
fadeIn.start()
}
I am making a picture gallery app. I current have a imageview with a text view at the bottom. Currently it is just semitransparent. I want to make it fade in, wait 3 second, then fade out 90%. Bringing focus to it or loading a new pic will make it repeat the cycle. I have read thru a dozen pages and have tried a few things, no success. All I get is a fade in and instant fade out
protected AlphaAnimation fadeIn = new AlphaAnimation(0.0f , 1.0f ) ;
protected AlphaAnimation fadeOut = new AlphaAnimation( 1.0f , 0.0f ) ;
txtView.startAnimation(fadeIn);
txtView.startAnimation(fadeOut);
fadeIn.setDuration(1200);
fadeIn.setFillAfter(true);
fadeOut.setDuration(1200);
fadeOut.setFillAfter(true);
fadeOut.setStartOffset(4200+fadeIn.getStartOffset());
Works perfectly for white backgrounds. Otherwise, you need to switch values when you instantiate AlphaAnimation class. Like this:
AlphaAnimation fadeIn = new AlphaAnimation( 1.0f , 0.0f );
AlphaAnimation fadeOut = new AlphaAnimation(0.0f , 1.0f );
This works with black background and white text color.
Kotlin Extension functions for Guy Cothal's answer:
inline fun View.fadeIn(durationMillis: Long = 250) {
this.startAnimation(AlphaAnimation(0F, 1F).apply {
duration = durationMillis
fillAfter = true
})
}
inline fun View.fadeOut(durationMillis: Long = 250) {
this.startAnimation(AlphaAnimation(1F, 0F).apply {
duration = durationMillis
fillAfter = true
})
}
That's the solution that I've used in my project for looping fade-in/fade-out animation on TextViews:
private void setUpFadeAnimation(final TextView textView) {
// Start from 0.1f if you desire 90% fade animation
final Animation fadeIn = new AlphaAnimation(0.0f, 1.0f);
fadeIn.setDuration(1000);
fadeIn.setStartOffset(3000);
// End to 0.1f if you desire 90% fade animation
final Animation fadeOut = new AlphaAnimation(1.0f, 0.0f);
fadeOut.setDuration(1000);
fadeOut.setStartOffset(3000);
fadeIn.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationEnd(Animation arg0) {
// start fadeOut when fadeIn ends (continue)
textView.startAnimation(fadeOut);
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationStart(Animation arg0) {
}
});
fadeOut.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationEnd(Animation arg0) {
// start fadeIn when fadeOut ends (repeat)
textView.startAnimation(fadeIn);
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationStart(Animation arg0) {
}
});
textView.startAnimation(fadeOut);
}
Hope this could help!
You can use an extra animation object (which doesn't modify its alpha) to prevent the instant fade out, set animationListener for your fade-in effect and start the extra animation object in the on animationEnd of the fade-in, then you start fade-out on animation end of the extra animation object, try the link below, it'll help..
Auto fade-effect for textview
I was searching for a solution to similar problem (TextView fade in/wait/fade out) and came up with this one (in fact, the official docs point to this too). You can obviously improve this by adding more params.
public void showFadingText(String text){
txtView.setText(text);
Runnable endAction;
txtView.animate().alpha(1f).setDuration(1000).setStartDelay(0).withEndAction(
endAction = new Runnable() {
public void run() {
txtView.animate().alpha(0f).setDuration(1000).setStartDelay(2000);
}
}
);
}
Provided you have txtView declared somewhere else with alpha starting at zero.
How do I display Blinking Text in android.
Thank you all.
Actually there is an Easter egg blink tag for this in ICS! :) I don't actually recommend using it - was REALLY amused to find it in the source, though!
<blink xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I'm blinking"
/>
</blink>
Create a view animation for it. You can do an alpha fade from 100% to 0% in 0 seconds and back again on a cycle. That way, Android handles it inteligently and you don't have to mess arround with threading and waste CPU.
More on animations here:
http://developer.android.com/reference/android/view/animation/package-summary.html
Tutorial:
http://developerlife.com/tutorials/?p=343
Using Threads in your code always wastes CPU time and decreases performance of the application. You should not use threads all the time. Use if wherever neccessary.
Use XML Animations for this purpose :
R.anim.blink
<?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:interpolator="#android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>
Blink Activity: use it like this :-
public class BlinkActivity extends Activity implements AnimationListener {
TextView txtMessage;
Button btnStart;
// Animation
Animation animBlink;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_blink);
txtMessage = (TextView) findViewById(R.id.txtMessage);
btnStart = (Button) findViewById(R.id.btnStart);
// load the animation
animBlink = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.blink);
// set animation listener
animBlink.setAnimationListener(this);
// button click event
btnStart.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animBlink);
}
});
}
#Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// check for blink animation
if (animation == animBlink) {
}
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
}
Let me know if you have any queries..
It can be done by adding a ViewFlipper that alternates two TextViews and Fadein and Fadeout animation can be applied when they switch.
Layout File:
<ViewFlipper android:id="#+id/flipper" android:layout_width="fill_parent" android:layout_height="wrap_content" android:flipInterval="1000" >
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="TEXT THAT WILL BLINK"/>
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="" />
</ViewFlipper>
Activity Code:
private ViewFlipper mFlipper;
mFlipper = ((ViewFlipper)findViewById(R.id.flipper));
mFlipper.startFlipping();
mFlipper.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.fade_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.fade_out));
public static void blinkText(TextView textView) {
Animation animation = new AlphaAnimation(1, 0); // Change alpha from fully visible to invisible
animation.setDuration(300); // duration - half a second
animation.setInterpolator(new LinearInterpolator()); // do not alter animation rate
animation.setRepeatCount(-1); // Repeat animation infinitely
animation.setRepeatMode(Animation.REVERSE); // Reverse animation at the end so the button will fade back in
textView.startAnimation(animation);
}
I can't remember where I found this but it is by far the best I've seen
If you want to make text blink on canvas in bitmap image so you can use this code
we have to create two methods
So first, let's declare a blink duration and a holder for our last update time:
private static final int BLINK_DURATION = 350; // 350 ms
private long lastUpdateTime = 0; private long blinkStart=0;
now create method
public void render(Canvas canvas) {
Paint paint = new Paint();
paint.setTextSize(40);
paint.setColor(Color.RED);
canvas.drawBitmap(back, width / 2 - back.getWidth() / 2, height / 2
- back.getHeight() / 2, null);
if (blink)
canvas.drawText(blinkText, width / 2, height / 2, paint);
}
Now create update method to blink
public void update() {
if (System.currentTimeMillis() - lastUpdateTime >= BLINK_DURATION
&& !blink) {
blink = true;
blinkStart = System.currentTimeMillis();
}
if (System.currentTimeMillis() - blinkStart >= 150 && blink) {
blink = false;
lastUpdateTime = System.currentTimeMillis();
}
}
Now it work fine
private bool _blink;
private string _initialtext;
private async void Blink()
{
_initialtext = _txtView.Text;
_txtView.Text = Resources.GetString(Resource.String.Speak_now);
while (VoiceRecognizerActive)
{
await Task.Delay(200);
_blink = !_blink;
Activity.RunOnUiThread(() =>
{
if (_blink)
_txtView.Visibility = ViewStates.Invisible;
else
_txtView.Visibility = ViewStates.Visible;
});
}
_txtView.Text = _initialtext;
_txtView.Visibility = ViewStates.Visible;
}
//this is for Xamarin android