docs: Fixed typos and formatting in cardflip.jd

    </div>

  </div>

</div>

<p> This lesson shows you how to do a card flip

  animation with custom fragment animations.

  Card flips animate between views of content by showing an animation that emulates

  a card flipping over.

</p>

<p>Here's what a card flip looks like:

</p>

  run the sample app and select the Card Flip example. See the following

  files for the code implementation:

</p>

<ul>

  <li>

    <code>src/CardFlipActivity.java</code>

<h2 id="animate">

  Create the Animators

</h2>

<p>

  Create the animations for the card flips. You'll need two animators for when the front

      of the card animates out and to the left and in and from the left. You'll also need two animators

      for when the back of the card animates in and from the right and out and to the right.

  of the card animates out and to the left and in and from the left. You'll also need two

  animators for when the back of the card animates in and from the right and out and to the

  right.

</p>

    <h4>

<h4 id="left-in">

  card_flip_left_in.xml

</h4>

<pre>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Before rotating, immediately set the alpha to 0. -->

        android:duration="1" />

</set>

</pre>

    <h4>

<h4 id="left-out">

  card_flip_left_out.xml

</h4>

<pre>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Rotate. -->

        android:duration="1" />

</set>

</pre>

    <h4>

<h4 id="right-in">

  card_flip_right_in.xml

</h4>

<pre>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Before rotating, immediately set the alpha to 0. -->

        android:propertyName="alpha"

        android:startOffset="@integer/card_flip_time_half"

        android:duration="1" />

</set>

</set>

</pre>

    <h4>

<h4  id="right-out">

  card_flip_right_out.xml

</h4>

<pre>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Rotate. -->

        android:duration="1" />

</set>

</pre>

<h2 id="views">

  Create the Views

</h2>

</LinearLayout>

</pre>

<p>

and the other side of the card that displays an {@link android.widget.ImageView}:

</p>

<pre>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:scaleType="centerCrop"

    android:contentDescription="@string/description_image_1" />

</pre>

<h2 id="fragment">

  Create the Fragment

</h2>

<p>

  Create fragment classes for the front and back of the card. These classes return the layouts

  that you created previously in the {@link android.app.Fragment#onCreateView onCreateView()} method

  where you want to show the card. The following example shows nested fragment classes inside

  of the parent activity that uses them:

</p>

<pre>

public class CardFlipActivity extends Activity {

    ...

    }

}

</pre>

<h2 id="animate">

  Animate the Card Flip

</h2>

  activity shows you how to display the front of the card by default:

</p>

<pre>

public class CardFlipActivity extends Activity {

    ...

}

</pre>

<p>

  Now that you have the front of the card showing, you can show the back of the card

  with the flip animation at an appropriate time. Create a method to show the other

  side of the card that does the following things:

</p>

<ul>

  <li>Sets the custom animations that you created earlier for the fragment transitions.

  </li>

  so when the user presses the <em>Back</em> button, the card flips back over.

  </li>

</ul>

<pre>

private void flipCard() {

    if (mShowingBack) {

    mShowingBack = true;

    // Create and commit a new fragment transaction that adds the fragment for the back of

    // the card, uses custom animations, and is part of the fragment manager's back stack.

    // Create and commit a new fragment transaction that adds the fragment for

    // the back of the card, uses custom animations, and is part of the fragment

    // manager's back stack.

    getFragmentManager()

            .beginTransaction()

            // Replace the default fragment animations with animator resources representing

            // rotations when switching to the back of the card, as well as animator

            // resources representing rotations when flipping back to the front (e.g. when

            // the system Back button is pressed).

            // Replace the default fragment animations with animator resources

            // representing rotations when switching to the back of the card, as

            // well as animator resources representing rotations when flipping

            // back to the front (e.g. when the system Back button is pressed).

            .setCustomAnimations(

                    R.animator.card_flip_right_in, R.animator.card_flip_right_out,

                    R.animator.card_flip_left_in, R.animator.card_flip_left_out)

            // Replace any fragments currently in the container view with a fragment

            // representing the next page (indicated by the just-incremented currentPage

            // variable).

                    R.animator.card_flip_right_in,

                    R.animator.card_flip_right_out,

                    R.animator.card_flip_left_in,

                    R.animator.card_flip_left_out)

            // Replace any fragments currently in the container view with a

            // fragment representing the next page (indicated by the

            // just-incremented currentPage variable).

            .replace(R.id.container, new CardBackFragment())

            // Add this transaction to the back stack, allowing users to press Back

            // to get to the front of the card.

            // Add this transaction to the back stack, allowing users to press

            // Back to get to the front of the card.

            .addToBackStack(null)

            // Commit the transaction.