Adding animations to Note To Self

The completed code for this chapter is in the usual place: Chapter 16/Note to self. Note, however, that the code also includes the minor additions that we will make in the next chapter.

Defining the animations in XML

First, let's define two animations in XML that we can use. A FADE IN animation, which is the normal behavior when a note appears in the list and a flash, which will be the behavior that can be tweaked from the settings screen. If the note is important, the user will be able to set it to either flash fast, flash slow, or not flash at all.

Right-click on the res folder and navigate to New | Android resource directory. Enter anim in the Directory name field and click on OK.

Now, right-click on the new anim directory and navigate to New | Animation resource file. In the File name field, type fade_in and then click on OK. Delete all the contents and add this code to create the animation:

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="500"
    android:interpolator="@android:anim/accelerate_interpolator"></alpha>
</set>

Now, right-click on the new anim directory and navigate to New | Animation resource file. In the File name field, type flash and then click on OK. Delete all the contents and add this code to create the animation:

<?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:repeatMode="reverse"
    android:repeatCount="infinite"/>
</set>

Our XML animations are ready, so let's add the Java code.

Controlling the animations in Java

Add these highlighted member variables to MainActivity just after the class declaration:

public class MainActivity extends AppCompatActivity {

    Animation mAnimFlash;
    Animation mFadeIn;

Now, let's initialize these animations based on the user's current settings. The best place to do this is in onResume because that is where we load the settings, and it is guaranteed to run every time MainActivity is run, whether that is because the app has just started or because the user is just returning from the settings screen (perhaps having just changed the settings). Add this code just after the code that loads the settings that we implemented in the previous chapter. The next listing shows the entire onResume method. The new code to add is highlighted here:

@Override
protected void onResume(){
  super.onResume();

  mPrefs = getSharedPreferences("Note to self", MODE_PRIVATE);
  mSound  = mPrefs.getBoolean("sound", true);
  mAnimOption = mPrefs.getInt("anim option", SettingsActivity.FAST);

  mAnimFlash = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.flash);
  mFadeIn = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in);
  
  // Set the rate of flash based on settings
  if(mAnimOption == SettingsActivity.FAST){
    
    mAnimFlash.setDuration(100);
    Log.i("anim = ",""+ mAnimOption);
    }else if(mAnimOption == SettingsActivity.SLOW){
  
    Log.i("anim = ",""+ mAnimOption);
      mAnimFlash.setDuration(1000);
    }

  mNoteAdapter.notifyDataSetChanged();
}

Now, we just need to apply the appropriate animation to the appropriate part of our UI. We can do so in the NoteAdapter inner class in the getView method, just after we initialize tempNote with the details of the note we are currently dealing with. We are then in a position to call isImportant to make a decision about which animation to play. I have included the line before the new code and the line after the new code as well as highlighted the new code to show exactly where this code goes:

…
Note tempNote = noteList.get(whichItem);

// To animate or not to animate
if (tempNote.isImportant() && mAnimOption != SettingsActivity.NONE ) {

  view.setAnimation(mAnimFlash);

}else{
  view.setAnimation(mFadeIn);
}

if (!tempNote.isImportant()){
…

If you run Note To Self now, you will be able to see the nice FADE IN animations as well as the flashing animations on any note that the user has labeled as important. And, of course, you can change the speed of the flashing animation or switch it off completely from the settings screen. That's it for animation in Note To Self.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.225.55.151