docs: for AU basic training on fragments

including ZIP for sample app

Change-Id: Ifacdf63cb85274b1ff7a389c563d325604c0b7fa

5 files changed, 690 insertions, 0 deletions

diff --git a/docs/html/training/basics/fragments/communicating.jd b/docs/html/training/basics/fragments/communicating.jd
new file mode 100644
index 0000000..b2292b1
--- /dev/null
+++ b/docs/html/training/basics/fragments/communicating.jd
@@ -0,0 +1,179 @@
+page.title=Communicating with Other Fragments
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+previous.title=Building a Flexible UI
+previous.link=fragment-ui.html 
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb"> 
+    <h2>This lesson teaches you to</h2>
+<ol>
+  <li><a href="#DefineInterface">Define an Interface</a></li>
+  <li><a href="#Implement">Implement the Interface</a></li>
+  <li><a href="#Deliver">Deliver a Message to a Fragment</a></li>
+</ol>
+    
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+    </ul>
+
+<h2>Try it out</h2>
+
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+  </div>
+</div>
+
+<p>In order to reuse the Fragment UI components, you should build each as a completely 
+self-contained, modular component that defines its own layout and behavior.  Once you 
+have defined these reusable Fragments, you can associate them with an Activity and 
+connect them with the application logic to realize the overall composite UI.</p>
+
+<p>Often you will want one Fragment to communicate with another, for example to change 
+the content based on a user event.  All Fragment-to-Fragment communication is done 
+through the associated Activity.  Two Fragments should never communicate directly.</p>
+
+
+<h2 id="DefineInterface">Define an Interface</h2>
+
+<p>To allow a Fragment to communicate up to its Activity, you can define an interface 
+in the Fragment class and implement it within the Activity.  The Fragment captures 
+the interface implementation during its onAttach() lifecycle method and can then call 
+the Interface methods in order to communicate with the Activity.</p>
+
+<p>Here is an example of Fragment to Activity communication:</p>
+
+<pre>
+public class HeadlinesFragment extends ListFragment {
+    OnHeadlineSelectedListener mCallback;
+
+    // Container Activity must implement this interface
+    public interface OnHeadlineSelectedListener {
+        public void onArticleSelected(int position);
+    }
+
+    &#64;Override
+    public void onAttach(Activity activity) {
+        super.onAttach(activity);
+        
+        // This makes sure that the container activity has implemented
+        // the callback interface. If not, it throws an exception
+        try {
+            mCallback = (OnHeadlineSelectedListener) activity;
+        } catch (ClassCastException e) {
+            throw new ClassCastException(activity.toString()
+                    + " must implement OnHeadlineSelectedListener");
+        }
+    }
+    
+    ...
+}
+</pre>
+
+<p>Now the fragment can deliver messages to the activity by calling the {@code
+onArticleSelected()} method (or other methods in the interface) using the {@code mCallback}
+instance of the {@code OnHeadlineSelectedListener} interface.</p>
+
+<p>For example, the following method in the fragment is called when the user clicks on a list
+item. The fragment uses the callback interface to deliver the event to the parent activity.</p>
+
+<pre>
+    &#64;Override
+    public void onListItemClick(ListView l, View v, int position, long id) {
+        // Send the event to the host activity
+        mCallback.onArticleSelected(position);
+    }
+</pre>
+
+
+
+<h2 id="Implement">Implement the Interface</h2>
+
+<p>In order to receive event callbacks from the fragment, the activity that hosts it must
+implement the interface defined in the fragment class.</p>
+
+<p>For example, the following activity implements the interface from the above example.</p>
+
+<pre>
+public static class MainActivity extends Activity
+        implements HeadlinesFragment.OnHeadlineSelectedListener{
+    ...
+    
+    public void onArticleSelected(Uri articleUri) {
+        // The user selected the headline of an article from the HeadlinesFragment
+        // Do something here to display that article
+    }
+}
+</pre>
+
+
+
+<h2 id="Deliver">Deliver a Message to a Fragment</h2>
+
+<p>The host activity can deliver messages to a fragment by capturing the {@link
+android.support.v4.app.Fragment} instance 
+with {@link android.support.v4.app.FragmentManager#findFragmentById findFragmentById()}, then
+directly call the fragment's public methods.</p>
+
+<p>For instance, imagine that the activity shown above may contain another fragment that's used to
+display the item specified by the data returned in the above callback method. In this case, 
+the activity can pass the information received in the callback method to the other fragment that
+will display the item:</p>
+
+<pre>
+public static class MainActivity extends Activity
+        implements HeadlinesFragment.OnHeadlineSelectedListener{
+    ...
+
+    public void onArticleSelected(int position) {
+        // The user selected the headline of an article from the HeadlinesFragment
+        // Do something here to display that article
+
+        ArticleFragment articleFrag = (ArticleFragment)
+                getSupportFragmentManager().findFragmentById(R.id.article_fragment);
+
+        if (articleFrag != null) {
+            // If article frag is available, we're in two-pane layout...
+
+            // Call a method in the ArticleFragment to update its content
+            articleFrag.updateArticleView(position);
+        } else {
+            // Otherwise, we're in the one-pane layout and must swap frags...
+
+            // Create fragment and give it an argument for the selected article
+            ArticleFragment newFragment = new ArticleFragment();
+            Bundle args = new Bundle();
+            args.putInt(ArticleFragment.ARG_POSITION, position);
+            newFragment.setArguments(args);
+        
+            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
+
+            // Replace whatever is in the fragment_container view with this fragment,
+            // and add the transaction to the back stack so the user can navigate back
+            transaction.replace(R.id.fragment_container, newFragment);
+            transaction.addToBackStack(null);
+
+            // Commit the transaction
+            transaction.commit();
+        }
+    }
+}
+</pre>
+
+
+
+
+
+
+
+
+
diff --git a/docs/html/training/basics/fragments/creating.jd b/docs/html/training/basics/fragments/creating.jd
new file mode 100644
index 0000000..9f3ed06
--- /dev/null
+++ b/docs/html/training/basics/fragments/creating.jd
@@ -0,0 +1,155 @@
+page.title=Creating a Fragment
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+previous.title=Using the Android Support Library
+previous.link=support-lib.html
+next.title=Building a Flexible UI
+next.link=fragment-ui.html 
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb">
+    
+    <h2>This lesson teaches you to</h2>
+<ol>
+  <li><a href="#Create">Create a Fragment Class</a></li>
+  <li><a href="#AddInLayout">Add a Fragment to an Activity using XML</a></li>
+</ol>
+
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+    </ul>
+
+<h2>Try it out</h2>
+    
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+  </div>
+</div>
+
+<p>You can think of a fragment as a modular section of an activity, which has its own lifecycle,
+receives its own input events, and which you can add or remove while the activity is running (sort
+of like a "sub activity" that you can reuse in different activities). This lesson shows how to
+extend the {@link android.support.v4.app.Fragment} class using the Support Library so your app
+remains compatible with devices running system versions as old as Android 1.6.</p>
+
+<p class="note"><strong>Note:</strong> If you decide for other reasons that the minimum
+API level your app requires is 11 or higher, you don't need to use the Support
+Library and can instead use the framework's built in {@link android.app.Fragment} class and related
+APIs. Just be aware that this lesson is focused on using the APIs from the Support Library, which
+use a specific package signature and sometimes slightly different API names than the versions
+included in the platform.</p>
+
+
+
+<h2 id="Create">Create a Fragment Class</h2>
+
+<p>To create a fragment, extend the {@link android.support.v4.app.Fragment} class, then override 
+key lifecycle methods to insert your app logic, similar to the way you would with an {@link
+android.app.Activity} class.</p>
+
+<p>One difference when creating a {@link android.support.v4.app.Fragment} is that you must use the
+{@link android.support.v4.app.Fragment#onCreateView onCreateView()} callback to define the layout.
+In fact, this is the only callback you need in order to get a fragment running. For
+example, here's a simple fragment that specifies its own layout:</p>
+
+<pre>
+import android.os.Bundle;
+import android.support.v4.app.Fragment;
+import android.view.LayoutInflater;
+import android.view.ViewGroup;
+
+public class ArticleFragment extends Fragment {
+    &#64;Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
+        Bundle savedInstanceState) {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.article_view, container, false);
+    }
+}
+</pre>
+
+<p>Just like an activity, a fragment should implement other lifecycle callbacks that allow you to
+manage its state as it is added or removed from the activity and as the activity transitions
+between its lifecycle states. For instance, when the activity's {@link
+android.app.Activity#onPause()} method is called, any fragments in the activity also receive a call
+to {@link android.support.v4.app.Fragment#onPause()}.</p>
+
+<p>More information about the fragment lifecycle and callback methods is available in the <a
+href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a> developer guide.</p>
+
+
+
+<h2 id="AddInLayout">Add a Fragment to an Activity using XML</h2> 
+
+<p>While fragments are reusable, modular UI components, each instance of a {@link
+android.support.v4.app.Fragment} class must be associated with a parent {@link
+android.support.v4.app.FragmentActivity}. You can achieve this association by defining each
+fragment within your activity layout XML file.</p>
+
+<p class="note"><strong>Note:</strong> {@link android.support.v4.app.FragmentActivity} is a
+special activity provided in the Support Library to handle fragments on system versions older than
+API level 11. If the lowest system version you support is API level 11 or higher, then you can use a
+regular {@link android.app.Activity}.</p>
+
+<p>Here is an example layout file that adds two fragments to an activity when the device
+screen is considered "large" (specified by the <code>large</code> qualifier in the directory
+name).</p>
+
+<p><code>res/layout-large/news_articles.xml:</code></p>
+<pre>
+&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="horizontal"
+    android:layout_width="fill_parent"
+    android:layout_height="fill_parent">
+
+    &lt;fragment android:name="com.example.android.fragments.HeadlinesFragment"
+              android:id="@+id/headlines_fragment"
+              android:layout_weight="1"
+              android:layout_width="0dp"
+              android:layout_height="match_parent" />
+
+    &lt;fragment android:name="com.example.android.fragments.ArticleFragment"
+              android:id="@+id/article_fragment"
+              android:layout_weight="2"
+              android:layout_width="0dp"
+              android:layout_height="match_parent" />
+
+&lt;/LinearLayout>
+</pre>
+
+<p class="note"><strong>Tip:</strong> For more information about creating layouts for different
+screen sizes, read <a href="{@docRoot}training/multiscreen/screensizes.html">Supporting Different
+Screen Sizes</a>.</p>
+
+<p>Here's how an activity applies this layout:</p>
+
+<pre>
+import android.os.Bundle;
+import android.support.v4.app.FragmentActivity;
+
+public class MainActivity extends FragmentActivity {
+    &#64;Override
+    public void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.news_articles);
+    }
+}
+</pre>
+
+
+<p class="note"><strong>Note:</strong> When you add a fragment to an activity layout by defining
+the fragment in the layout XML file, you <em>cannot</em> remove the fragment at runtime. If you plan
+to swap your fragments in and out during user interaction, you must add the fragment to the activity
+when the activity first starts, as shown in the next lesson.</p>
+
+
+
diff --git a/docs/html/training/basics/fragments/fragment-ui.jd b/docs/html/training/basics/fragments/fragment-ui.jd
new file mode 100644
index 0000000..f906f46
--- /dev/null
+++ b/docs/html/training/basics/fragments/fragment-ui.jd
@@ -0,0 +1,196 @@
+page.title=Building a Flexible UI
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+previous.title=Create a Fragment
+previous.link=creating.html
+next.title=Communicating with Other Fragments
+next.link=communicating.html
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb"> 
+    <h2>This lesson teaches you to</h2>
+<ol>
+  <li><a href="#AddAtRuntime">Add a Fragment to an Activity at Runtime</a></li>
+  <li><a href="#Replace">Replace One Fragment with Another</a></li>
+</ol>
+    
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+      <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets and
+Handsets</a></li>
+    </ul>
+
+<h2>Try it out</h2>
+
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+  </div>
+</div>
+
+
+<p>When designing your application to support a wide range of screen sizes, you can reuse your
+fragments in different layout configurations to optimize the user experience based on the available
+screen space.</p>
+
+<p>For example, on a handset device it might be appropriate to display just one fragment at a time
+for a single-pane user interface.  Conversely, you may want to set fragments side-by-side on a
+tablet which has a wider screen size to display more information to the user.</p>
+
+<img src="{@docRoot}images/training/basics/fragments-screen-mock.png" alt="" />
+<p class="img-caption"><strong>Figure 1.</strong> Two fragments, displayed in different
+configurations for the same activity on different screen sizes. On a large screen, both fragment
+fit side by side, but on a handset device, only one fragment fits at a time so the fragments must
+replace each other as the user navigates.</p>
+
+<p>The {@link android.support.v4.app.FragmentManager} class provides methods that allow you to add,
+remove, and replace fragments to an activity at runtime in order to create a dynamic experience.</p>
+
+
+
+<h2 id="AddAtRuntime">Add a Fragment to an Activity at Runtime</h2> 
+
+<p>Rather than defining the fragments for an activity in the layout file&mdash;as shown in the
+<a href="creating.html">previous lesson</a> with the {@code &lt;fragment>} element&mdash;you can add
+a fragment to the activity during the activity runtime. This is necessary
+if you plan to change fragments during the life of the activity.</p>
+
+<p>To perform a transaction such as add or 
+remove a fragment, you must use the {@link android.support.v4.app.FragmentManager} to create a
+{@link android.support.v4.app.FragmentTransaction}, which provides APIs to add, remove, replace,
+and perform other fragment transactions.</p>
+
+<p>If your activity allows the fragments to be removed and replaced, you should add the
+initial fragment(s) to the activity during the activity's
+{@link android.app.Activity#onCreate onCreate()} method.</p>
+
+<p>An important rule when dealing with fragments&mdash;especially those that you add at
+runtime&mdash;is that the fragment must have a container {@link android.view.View} in the layout in
+which the fragment's layout will reside.</p>
+
+<p>The following layout is an alternative to the layout shown in the <a
+href="creating.html">previous lesson</a> that shows only one fragment at a time. In order to replace
+one fragment with another, the activity's layout
+includes an empty {@link android.widget.FrameLayout} that acts as the fragment container.</p>
+
+<p>Notice that the filename is the same as the layout file in the previous lesson, but the layout
+directory does <em>not</em> have the <code>large</code> qualifier, so this layout is used when the
+device screen is smaller than <em>large</em> because the screen does not fit both fragments at
+the same time.</p>
+
+<p><code>res/layout/news_articles.xml:</code></p>
+<pre>
+&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/fragment_container"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent" />
+</pre>
+
+<p>Inside your activity, call {@link
+android.support.v4.app.FragmentActivity#getSupportFragmentManager()} to get a {@link
+android.support.v4.app.FragmentManager} using the Support Library APIs. Then call {@link
+android.support.v4.app.FragmentManager#beginTransaction} to create a {@link
+android.support.v4.app.FragmentTransaction} and call {@link
+android.support.v4.app.FragmentTransaction#add add()} to add a fragment.</p>
+
+<p>You can perform multiple fragment transaction for the activity using the same {@link
+android.support.v4.app.FragmentTransaction}. When you're ready to make the changes, you must call
+{@link android.support.v4.app.FragmentTransaction#commit()}.</p>
+
+<p>For example, here's how to add a fragment to the previous layout:</p>
+
+<pre>
+import android.os.Bundle;
+import android.support.v4.app.FragmentActivity;
+
+public class MainActivity extends FragmentActivity {
+    &#64;Override
+    public void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.news_articles);
+
+        // Check that the activity is using the layout version with
+        // the fragment_container FrameLayout
+        if (findViewById(R.id.fragment_container) != null) {
+
+            // However, if we're being restored from a previous state,
+            // then we don't need to do anything and should return or else
+            // we could end up with overlapping fragments.
+            if (savedInstanceState != null) {
+                return;
+            }
+
+            // Create an instance of ExampleFragment
+            HeadlinesFragment firstFragment = new HeadlinesFragment();
+            
+            // In case this activity was started with special instructions from an Intent,
+            // pass the Intent's extras to the fragment as arguments
+            firstFragment.setArguments(getIntent().getExtras());
+            
+            // Add the fragment to the 'fragment_container' FrameLayout
+            getSupportFragmentManager().beginTransaction()
+                    .add(R.id.fragment_container, firstFragment).commit();
+        }
+    }
+}
+</pre>
+
+<p>Because the fragment has been added to the {@link android.widget.FrameLayout} container at
+runtime&mdash;instead of defining it in the activity's layout with a {@code &lt;fragment>}
+element&mdash;the activity can remove the fragment and replace it with a different one.</p>
+
+
+
+<h2 id="Replace">Replace One Fragment with Another</h2>
+
+<p>The procedure to replace a fragment is similar to adding one, but requires the {@link
+android.support.v4.app.FragmentTransaction#replace replace()} method instead of {@link
+android.support.v4.app.FragmentTransaction#add add()}.</p>
+
+<p>Keep in mind that when you perform fragment transactions, such as replace or remove one, it's
+often appropriate to allow the user to navigate backward and "undo" the change. To allow the user
+to navigate backward through the fragment transactions, you must call {@link
+android.support.v4.app.FragmentTransaction#addToBackStack addToBackStack()} before you commit the
+{@link android.support.v4.app.FragmentTransaction}.</p>
+
+<p class="note"><strong>Note:</strong> When you remove or replace a fragment and add the transaction
+to the back stack, the fragment that is removed is stopped (not destroyed). If the user navigates
+back to restore the fragment, it restarts. If you <em>do not</em> add the transaction to the back
+stack, then the fragment is destroyed when removed or replaced.</p>
+
+<p>Example of replacing one fragment with another:</p>
+
+<pre>
+// Create fragment and give it an argument specifying the article it should show
+ArticleFragment newFragment = new ArticleFragment();
+Bundle args = new Bundle();
+args.putInt(ArticleFragment.ARG_POSITION, position);
+newFragment.setArguments(args);
+
+FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
+
+// Replace whatever is in the fragment_container view with this fragment,
+// and add the transaction to the back stack so the user can navigate back
+transaction.replace(R.id.fragment_container, newFragment);
+transaction.addToBackStack(null);
+
+// Commit the transaction
+transaction.commit();
+</pre>
+
+<p>The {@link android.support.v4.app.FragmentTransaction#addToBackStack addToBackStack()} method
+takes an optional string parameter that specifies a unique name for the transaction. The name isn't
+needed unless you plan to perform advanced fragment operations using the {@link
+android.support.v4.app.FragmentManager.BackStackEntry} APIs.</p>
+
+
+
+
diff --git a/docs/html/training/basics/fragments/index.jd b/docs/html/training/basics/fragments/index.jd
new file mode 100644
index 0000000..dcdcd31
--- /dev/null
+++ b/docs/html/training/basics/fragments/index.jd
@@ -0,0 +1,74 @@
+page.title=Building a Dynamic UI with Fragments
+
+trainingnavtop=true
+startpage=true
+next.title=Using the Android Support Library
+next.link=support-lib.html
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+
+
+<h2>Dependencies and prerequisites</h2>
+<ul>
+  <li>Basic knowledge of the Activity lifecycle (see <a
+href="{@docRoot}training/basics/activity-lifecycle/index.html">Managing the Activity
+Lifecycle</a>)</li>
+  <li>Experience building <a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML
+layouts</a></li>
+</ul>
+
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+  <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets and
+Handsets</a></li>
+</ul>
+
+
+<h2>Try it out</h2>
+
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+</div>
+</div>
+
+<p>To create a dynamic and multi-pane user interface on Android, you need to encapsulate
+UI components and activity behaviors into modules that you can swap into and out of
+your activities. You can create these modules with the {@link android.app.Fragment} class, which
+behaves somewhat like a nested activity that can define its own layout and manage its own
+lifecycle.</p>
+
+<p>When a fragment specifies its own layout, it can be configured in different combinations with
+other fragments inside an activity to modify your layout configuration for different screen
+sizes (a small screen might show one fragment at a time, but a large screen can show two or
+more).</p>
+
+<p>This class shows you how to create a dynamic user experience with fragments and optimize your
+app's user experience for devices with different screen sizes, all while continuing to support
+devices running versions as old as Android 1.6.</p>
+
+<h2>Lessons</h2>
+ 
+<dl>
+  <dt><b><a href="support-lib.html">Using the Android Support Library</a></b></dt>
+    <dd>Learn how to use more recent framework APIs in earlier versions of Android by bundling
+the Android Support Library into your app.</dd>
+  <dt><b><a href="creating.html">Creating a Fragment</a></b></dt>
+    <dd>Learn how to build a fragment and implement basic behaviors within its callback
+methods.</dd>
+  <dt><b><a href="fragment-ui.html">Building a Flexible UI</a></b></dt>
+    <dd>Learn how to build your app with layouts that provide different fragment configurations for
+different screens.</dd>
+  <dt><b><a href="communicating.html">Communicating with Other Fragments</a></b></dt>
+    <dd>Learn how to set up communication paths from a fragment to the activity and other
+fragments.</dd>
+</dl> 
+
diff --git a/docs/html/training/basics/fragments/support-lib.jd b/docs/html/training/basics/fragments/support-lib.jd
new file mode 100644
index 0000000..c26f6c8
--- /dev/null
+++ b/docs/html/training/basics/fragments/support-lib.jd
@@ -0,0 +1,86 @@
+page.title=Using the Support Library
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+next.title=Creating a Fragment
+next.link=creating.html
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb"> 
+    <h2>This lesson teaches you to</h2>
+    <ol>
+      <li><a href="#Setup">Set Up Your Project With the Support Library</a></li>
+      <li><a href="#Apis">Import the Support Library APIs</a></li>
+    </ol>
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}sdk/compatibility-library.html">Support Library</a></li>
+    </ul>
+  </div>
+</div>
+
+<p>The Android <a href="{@docRoot}sdk/compatibility-library.html">Support Library</a> provides a JAR
+file with an API library that allow you to use some of the more recent Android APIs in your app
+while running on earlier versions of Android. For instance, the Support Library provides a version
+of the {@link android.app.Fragment} APIs that you can use on Android 1.6 (API level 4) and
+higher.</p>
+
+<p>This lesson shows how to set up your app to use the Support Library in order to use fragments
+to build a dynamic app UI.</p>
+
+
+<h2 id="Setup">Set Up Your Project With the Support Library</h2>
+
+<div class="figure" style="width:527px">
+<img src="{@docRoot}images/training/basics/sdk-manager.png" alt="" />
+<p class="img-caption"><strong>Figure 1.</strong> The Android SDK Manager with the
+Android Support package selected.</p>
+</div>
+
+<p>To set up your project:</p>
+
+<ol>
+  <li>Downlad the Android Support package using the SDK Manager</li>
+
+  <li>Create a <code>libs</code> directory at the top level of your Android project.</li>
+  <li>Locate the JAR file for the library you want to use and copy it into the <code>libs/</code>
+directory.
+<p>For example, the library that supports API level 4 and up is located at
+<code>&lt;sdk>/extras/android/support/v4/android-support-v4.jar</code>.</p></li>
+  <li>Update your manifest file to set the minimum API level to <code>4</code> and the target
+API level to the latest release:
+  <pre>&lt;uses-sdk android:minSdkVersion="4" android:targetSdkVersion="15" /></pre>
+  </li>
+</ol>
+
+
+<h2 id="Apis">Import the Support Library APIs</h2>
+
+<p>The Support Library includes a variety of APIs that were either added in recent versions of
+Android or don't exist in the platform at all and merely provide additional support to you when
+developing specific application features.</p>
+
+<p>You can find all the API reference documentation for the Support Library included in the
+platform docs in the {@link android.support.v4} package. For which API references are available
+at {@link android.support.v4}.</p>
+
+<div class="warning"><p><strong>Warning:</strong> To be sure that you don't accidentally use new
+APIs on an older system version, be certain that you import the {@link
+android.support.v4.app.Fragment} class and related APIs from the {@link android.support.v4.app}
+package:</p>
+<pre>
+import android.support.v4.app.Fragment;
+import android.support.v4.app.FragmentManager;
+...
+</pre>
+</div>
+
+
+<p>When creating an activity that hosts fragments while using the Support Library, you must also
+extend the {@link android.support.v4.app.FragmentActivity} class instead of the traditional {@link
+android.app.Activity} class. You'll see sample code for the fragment and activity in the next
+lesson.</p>
+