guide/components/fragments.jd

page.title=
parent.title=
parent.link=activities.html
@jd:body

<div id="qv-wrapper">
<div id="qv">
  <h2></h2>
  <ol>
    <li><a href="#Design"></a></li>
    <li><a href="#Creating"></a>
      <ol>
        <li><a href="#UI"> </a></li>
        <li><a href="#Adding"></a></li>
      </ol>
    </li>
    <li><a href="#Managing"></a></li>
    <li><a href="#Transactions"></a></li>
    <li><a href="#CommunicatingWithActivity"></a>
      <ol>
        <li><a href="#EventCallbacks"> </a></li>
        <li><a href="#ActionBar"></a></li>
      </ol>
    </li>
    <li><a href="#Lifecycle"></a>
      <ol>
        <li><a href="#CoordinatingWithActivity"></a></li>
      </ol>
    </li>
    <li><a href="#Example"></a></li>
  </ol>

  <h2></h2>
  <ol>
    <li>{@link android.app.Fragment}</li>
    <li>{@link android.app.FragmentManager}</li>
    <li>{@link android.app.FragmentTransaction}</li>
  </ol>

  <h2></h2>
  <ol>
    <li><a href="{@docRoot}training/basics/fragments/index.html">Building a Dynamic UI with Fragments</a></li>
    <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets
and Handsets</a></li>
  </ol>
</div>
</div>

<p>{@link android.app.Fragment} {@link android.app.Activity}
1  UI


</p>

<p>

<a href="{@docRoot}guide/components/activities.html#Lifecycle"></a><em></em>


&mdash;
[<em></em>]
</p>

<p> {@link
android.view.ViewGroup}    {@code &lt;fragment&gt;}   {@link android.view.ViewGroup}


 UI

</p>

<p>


</p>


<h2 id="Design"></h2>

<p>Android  UI Android 3.0API  11
UI


</p>

<p>1  1
&mdash;

1  1  1

</p>

<p>  1 1


 2  UI

</p>

<img src="{@docRoot}images/fundamentals/fragments.png" alt="" />
<p class="img-caption"><strong> 1.</strong> 1  2  UI

</p>

<p>   2 <em> A</em> &mdash;&mdash;
 <em> A</em>  2 <em> B</em>


 1

</p>

<p><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets and Handsets</a>
</p>


<h2 id="Creating"></h2>

<div class="figure" style="width:327px">
<img src="{@docRoot}images/fragment_lifecycle.png" alt="" />
<p class="img-caption"><strong> 2.</strong>
</p>
</div>

<p>{@link android.app.Fragment}
{@link android.app.Fragment} {@link android.app.Activity}
{@link android.app.Fragment#onCreate onCreate()}{@link android.app.Fragment#onStart onStart()}{@link android.app.Fragment#onPause onPause()}{@link android.app.Fragment#onStop onStop()}

 Android


</p>

<p> </p>

<dl>
  <dt>{@link android.app.Fragment#onCreate onCreate()}</dt>
  <dd>

</dd>
  <dt>{@link android.app.Fragment#onCreateView onCreateView()}</dt>
  <dd>
 UI  {@link android.view.View}
 UI null
</dd>
  <dt>{@link android.app.Activity#onPause onPause()}</dt>
  <dd>


</dd>
</dl>

<p> 3

  <a href="#Lifecycle"></a>
</p>


<p> {@link
android.app.Fragment} </p>

<dl>
  <dt>{@link android.app.DialogFragment}</dt>
  <dd> {@link android.app.Activity}


</dd>

  <dt>{@link android.app.ListFragment}</dt>
  <dd>{@link android.app.ListActivity} {@link
android.widget.SimpleCursorAdapter}   {@link
android.app.ListFragment#onListItemClick(ListView,View,int,long) onListItemClick()}

</dd>

  <dt>{@link android.preference.PreferenceFragment}</dt>
  <dd>{@link android.preference.PreferenceActivity} {@link android.preference.Preference}

</dd>
</dl>


<h3 id="UI"> </h3>

<p>
</p>

<p>{@link
android.app.Fragment#onCreateView onCreateView()}   Android
 {@link android.view.View}
</p>

<p class="note"><strong>:</strong>  {@link
android.app.ListFragment}  {@link android.widget.ListView} {@link android.app.Fragment#onCreateView onCreateView()}
</p>

<p>{@link
android.app.Fragment#onCreateView onCreateView()} XML <a href="{@docRoot}guide/topics/resources/layout-resource.html"> </a>{@link android.app.Fragment#onCreateView onCreateView()}  {@link android.view.LayoutInflater}

</p>

<p> {@link android.app.Fragment}  {@code example_fragment.xml}
</p>

<pre>
public static class ExampleFragment extends Fragment {
    &#64;Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.example_fragment, container, false);
    }
}
</pre>

<div class="sidebox-wrapper">
<div class="sidebox">
  <h3></h3>
  <p>{@code R.layout.example_fragment}   {@code example_fragment.xml}
XML <a href="{@docRoot}guide/topics/ui/index.html"> </a>

</p>
</div>
</div>

<p>{@link android.app.Fragment#onCreateView
onCreateView()}  {@code container}  {@link android.view.ViewGroup}

{@code savedInstanceState}  {@link android.os.Bundle} <a href="#Lifecycle"></a>


</p>

<p>{@link android.view.LayoutInflater#inflate(int,ViewGroup,boolean) inflate()}  3
</p>
<ul>
  <li> ID</li>
  <li> {@link android.view.ViewGroup} {@code
container}
</li>
  <li> {@link
android.view.ViewGroup}2  {@code
container} false true
&mdash;</li>
</ul>

<p>
</p>


<h3 id="Adding"></h3>

<p>  UI
 2
</p>

<ul>
  <li><b> </b>
<p>
2
</p>
<pre>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"&gt;
    &lt;fragment android:name="com.example.news.ArticleListFragment"
            android:id="@+id/list"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent" /&gt;
    &lt;fragment android:name="com.example.news.ArticleReaderFragment"
            android:id="@+id/viewer"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="match_parent" /&gt;
&lt;/LinearLayout&gt;
</pre>
  <p>{@code &lt;fragment&gt;}  {@code android:name} {@link
android.app.Fragment} </p>

<p>  {@link android.app.Fragment#onCreateView onCreateView()}

{@link android.view.View}  {@code &lt;fragment&gt;}
</p>

<div class="note">
  <p><strong>:</strong>

 ID  3
</p>
  <ul>
    <li>{@code android:id}  ID </li>
    <li>{@code android:tag} </li>
    <li> ID
</li>
  </ul>
</div>
  </li>

  <li><b> {@link android.view.ViewGroup} </b>
<p>  {@link
android.view.ViewGroup}
</p>
  <p>{@link android.app.FragmentTransaction}  API
{@link android.app.FragmentTransaction} {@link android.app.Activity}
</p>

<pre>
FragmentManager fragmentManager = {@link android.app.Activity#getFragmentManager()}
FragmentTransaction fragmentTransaction = fragmentManager.{@link android.app.FragmentManager#beginTransaction()};
</pre>

<p>{@link
android.app.FragmentTransaction#add(int,Fragment) add()}
</p>

<pre>
ExampleFragment fragment = new ExampleFragment();
fragmentTransaction.add(R.id.fragment_container, fragment);
fragmentTransaction.commit();
</pre>

  <p>{@link android.app.FragmentTransaction#add(int,Fragment) add()}  {@link android.view.ViewGroup}  ID 2

</p>
  <p>{@link android.app.FragmentTransaction} {@link android.app.FragmentTransaction#commit}

</p>
  </li>
</ul>


<h4 id="AddingWithoutUI">UI </h4>

<p>UI UI

</p>

<p>UI {@link
android.app.FragmentTransaction#add(Fragment,String)}  ID
 {@link
android.app.Fragment#onCreateView onCreateView()}
</p>

<p> UI UI UI &mdash;
&mdash;
 {@link android.app.FragmentManager#findFragmentByTag
findFragmentByTag()}
</p>

<p> UI  SDK Android SDK {@code
FragmentRetainInstance.java}  <code>&lt;sdk_root&gt;/APIDemos/app/src/main/java/com/example/android/apis/app/FragmentRetainInstance.java</code>

</p>


<h2 id="Managing"></h2>

<p>{@link android.app.FragmentManager}  {@link android.app.Activity#getFragmentManager()}
</p>

<p>{@link android.app.FragmentManager} </p>

<ul>
  <li>{@link
android.app.FragmentManager#findFragmentById findFragmentById()}  UI  {@link android.app.FragmentManager#findFragmentByTag
findFragmentByTag()}UI
</li>
  <li>{@link
android.app.FragmentManager#popBackStack()}  [<em></em>] </li>
  <li>{@link
android.app.FragmentManager#addOnBackStackChangedListener addOnBackStackChangedListener()} </li>
</ul>

<p>{@link
android.app.FragmentManager} </p>

<p>{@link android.app.FragmentManager}  {@link android.app.FragmentTransaction}

</p>


<h2 id="Transactions"></h2>

<p>
 1 {@link
android.app.FragmentTransaction}  API


</p>

<p>{@link android.app.FragmentTransaction}  {@link
android.app.FragmentManager} </p>

<pre>
FragmentManager fragmentManager = {@link android.app.Activity#getFragmentManager()};
FragmentTransaction fragmentTransaction = fragmentManager.{@link android.app.FragmentManager#beginTransaction()};
</pre>

<p>{@link
android.app.FragmentTransaction#add add()}{@link android.app.FragmentTransaction#remove remove()}{@link android.app.FragmentTransaction#replace replace()}

{@link android.app.FragmentTransaction#commit()}
</p>
</dl>

<p>{@link
android.app.FragmentTransaction#commit()} {@link
android.app.FragmentTransaction#addToBackStack addToBackStack()}
 [<em></em>]
</p>

<p>
</p>

<pre>
// Create new fragment and transaction
Fragment newFragment = new ExampleFragment();
FragmentTransaction transaction = getFragmentManager().beginTransaction();

// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);

// Commit the transaction
transaction.commit();
</pre>

<p>{@code R.id.fragment_container} ID   {@code newFragment} {@link
android.app.FragmentTransaction#addToBackStack addToBackStack()} [<em></em>]


</p>

<p>{@link
android.app.FragmentTransaction#add add()}  {@link android.app.FragmentTransaction#remove
remove()} {@link
android.app.FragmentTransaction#addToBackStack addToBackStack()} {@link android.app.FragmentTransaction#commit commit()}  1 [<em></em>]

</p>

<p>{@link android.app.FragmentTransaction}
</p>
<ul>
  <li>{@link android.app.FragmentTransaction#commit()} </li>
  <li>
</li>
</ul>

<p> {@link android.app.FragmentTransaction#addToBackStack(String)
addToBackStack()}
 {@link android.app.FragmentTransaction#addToBackStack(String) addToBackStack()} <em></em>


</p>

<p class="note"><strong>:</strong>  {@link android.app.FragmentTransaction#setTransition setTransition()}

</p>

<p>{@link android.app.FragmentTransaction#commit()}
 UI
 UI  {@link
android.app.FragmentManager#executePendingTransactions()} {@link android.app.FragmentTransaction#commit()}

</p>

<p class="caution"><strong>:</strong> {@link
android.app.FragmentTransaction#commit commit()} <a href="{@docRoot}guide/components/activities.html#SavingActivityState"></a>


{@link
android.app.FragmentTransaction#commitAllowingStateLoss()} </p>


<h2 id="CommunicatingWithActivity"></h2>

<p>{@link android.app.Fragment}  {@link android.app.Activity}

</p>

<p> {@link
android.app.Fragment#getActivity()}  {@link android.app.Activity}
</p>

<pre>
View listView = {@link android.app.Fragment#getActivity()}.{@link android.app.Activity#findViewById findViewById}(R.id.list);
</pre>

<p> {@link
android.app.FragmentManager#findFragmentById findFragmentById()}  {@link
android.app.FragmentManager#findFragmentByTag findFragmentByTag()}  {@link android.app.FragmentManager}  {@link android.app.Fragment}
</p>

<pre>
ExampleFragment fragment = (ExampleFragment) getFragmentManager().findFragmentById(R.id.example_fragment);
</pre>


<h3 id="EventCallbacks"> </h3>

<p>


</p>

<p> A B 2  B  A &mdash;
&mdash;
{@code OnArticleSelectedListener}  A
</p>

<pre>
public static class FragmentA extends ListFragment {
    ...
    // Container Activity must implement this interface
    public interface OnArticleSelectedListener {
        public void onArticleSelected(Uri articleUri);
    }
    ...
}
</pre>

<p> {@code OnArticleSelectedListener}  {@code onArticleSelected()}  B  A   A  {@link
android.app.Fragment#onAttach onAttach()}  {@link android.app.Fragment#onAttach
onAttach()}  {@link android.app.Activity}  {@code OnArticleSelectedListener}


</p>

<pre>
public static class FragmentA extends ListFragment {
    OnArticleSelectedListener mListener;
    ...
    &#64;Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        try {
            mListener = (OnArticleSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString() + " must implement OnArticleSelectedListener");
        }
    }
    ...
}
</pre>

<p> {@link java.lang.ClassCastException} {@code mListener}  {@code OnArticleSelectedListener}  A  {@code OnArticleSelectedListener}


 A  {@link android.app.ListFragment}  {@link android.app.ListFragment#onListItemClick
onListItemClick()} {@code onArticleSelected()}


</p>

<pre>
public static class FragmentA extends ListFragment {
    OnArticleSelectedListener mListener;
    ...
    &#64;Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        // Append the clicked item's row ID with the content provider Uri
        Uri noteUri = ContentUris.{@link android.content.ContentUris#withAppendedId withAppendedId}(ArticleColumns.CONTENT_URI, id);
        // Send the event and Uri to the host activity
        mListener.onArticleSelected(noteUri);
    }
    ...
}
</pre>

<p>{@link
android.app.ListFragment#onListItemClick onListItemClick()}  {@code id}  ID  {@link
android.content.ContentProvider}
</p>

<p><!--To see a complete implementation of this kind of callback interface, see the <a
href="{@docRoot}resources/samples/NotePad/index.html">NotePad sample</a>. --> <a href="{@docRoot}guide/topics/providers/content-providers.html"> </a>
</p>


<h3 id="ActionBar"></h3>

<p>{@link android.app.Fragment#onCreateOptionsMenu(Menu,MenuInflater) onCreateOptionsMenu()} <a href="{@docRoot}guide/topics/ui/menus.html#options-menu"> </a><a href="{@docRoot}guide/topics/ui/actionbar.html"> </a>
{@link
android.app.Fragment#onCreate(Bundle) onCreate()}  {@link
android.app.Fragment#setHasOptionsMenu(boolean) setHasOptionsMenu()}   {@link android.app.Fragment#onCreateOptionsMenu onCreateOptionsMenu()}


</p>

<p>
  {@link
android.app.Fragment#onOptionsItemSelected(MenuItem) onOptionsItemSelected()}
</p>

<p>{@link
android.app.Fragment#registerForContextMenu(View) registerForContextMenu()}    {@link
android.app.Fragment#onCreateContextMenu(ContextMenu,View,ContextMenu.ContextMenuInfo)
onCreateContextMenu()}
 {@link
android.app.Fragment#onContextItemSelected(MenuItem) onContextItemSelected()} </p>

<p class="note"><strong>:</strong>   on-item-selected

 on-item-selected

</p>

<p> <a href="{@docRoot}guide/topics/ui/menus.html"></a><a href="{@docRoot}guide/topics/ui/actionbar.html"></a></p>


<h2 id="Lifecycle"></h2>

<div class="figure" style="width:350px">
<img src="{@docRoot}images/activity_fragment_lifecycle.png" alt="" />
<p class="img-caption"><strong> 3.</strong>
</p>
</div>

<p> 3
</p>

<dl>
  <dt><i></i></dt>
    <dd></dd>

  <dt><i></i></dt>
    <dd>

</dd>

  <dt><i></i></dt>
    <dd>


</dd>
</dl>

<p> {@link
android.os.Bundle}
 {@link
android.app.Fragment#onSaveInstanceState onSaveInstanceState()} {@link android.app.Fragment#onCreate onCreate()}{@link
android.app.Fragment#onCreateView onCreateView()}{@link
android.app.Fragment#onActivityCreated onActivityCreated()}
<a href="{@docRoot}guide/components/activities.html#SavingActivityState">Activities</a>

</p>

<p>
<a href="{@docRoot}guide/components/tasks-and-back-stack.html"></a>  [<em></em>]  {@link
android.app.FragmentTransaction#addToBackStack(String) addToBackStack()}


</p>

<p>
<a href="{@docRoot}guide/components/activities.html#Lifecycle"></a>
 1
</p>

<p class="caution"><strong>:</strong> {@link android.app.Fragment}  {@link android.content.Context} {@link android.app.Fragment#getActivity()} {@link android.app.Fragment#getActivity()}


{@link android.app.Fragment#getActivity()}  null
</p>


<h3 id="CoordinatingWithActivity"></h3>

<p>

 {@link android.app.Activity#onPause}  {@link android.app.Fragment#onPause}
</p>

<p> UI

</p>

<dl>
  <dt>{@link android.app.Fragment#onAttach onAttach()}</dt>
    <dd> {@link
android.app.Activity} </dd>
  <dt>{@link android.app.Fragment#onCreateView onCreateView()}</dt>
    <dd></dd>
  <dt>{@link android.app.Fragment#onActivityCreated onActivityCreated()}</dt>
    <dd> {@link android.app.Activity#onCreate
onCreate()} </dd>
  <dt>{@link android.app.Fragment#onDestroyView onDestroyView()}</dt>
    <dd></dd>
  <dt>{@link android.app.Fragment#onDetach onDetach()}</dt>
    <dd></dd>
</dl>

<p> 3

 {@link
android.app.Activity#onCreate onCreate()}  {@link android.app.Fragment#onActivityCreated onActivityCreated()}
</p>

<p>

</p>

<p>
</p>


<h2 id="Example"></h2>

<p>2  2


</p>

<p class="note"><strong>:</strong>  <a href="{@docRoot}resources/samples/ApiDemos/src/com/example/android/apis/app/FragmentLayout.html">{@code
FragmentLayout.java}</a>
</p>

<p>  {@link
android.app.Activity#onCreate onCreate()} </p>

{@sample development/samples/ApiDemos/src/com/example/android/apis/app/FragmentLayout.java main}

<p> {@code fragment_layout.xml} </p>

{@sample development/samples/ApiDemos/res/layout-land/fragment_layout.xml layout}

<p> {@code TitlesFragment}{@link android.widget.FrameLayout}


 {@link android.widget.FrameLayout}
</p>

<p>
{@code res/layout-land/fragment_layout.xml}
</p>

<p> {@code res/layout/fragment_layout.xml}
</p>

{@sample development/samples/ApiDemos/res/layout/fragment_layout.xml layout}

<p>{@code TitlesFragment}
 2

</p>

<p>{@code
TitlesFragment}   {@link
android.app.ListFragment}  </p>

<p> 2 2 {@link
android.widget.FrameLayout}

</p>

{@sample development/samples/ApiDemos/src/com/example/android/apis/app/FragmentLayout.java titles}

<p>2  {@code DetailsFragment} {@code TitlesFragment}
</p>

{@sample development/samples/ApiDemos/src/com/example/android/apis/app/FragmentLayout.java details}

<p>{@code TitlesFragment} {@code R.id.details} {@code DetailsFragment} <em></em> {@code DetailsActivity}


</p>

<p> {@code DetailsActivity}  {@code DetailsFragment}
</p>

{@sample development/samples/ApiDemos/src/com/example/android/apis/app/FragmentLayout.java
details_activity}

<p>  {@code DetailsFragment}  {@code TitlesFragment}  {@code DetailsActivity}


</p>


<p> <a href="{@docRoot}resources/samples/ApiDemos/src/com/example/android/apis/app/index.html#Fragment">ApiDemos</a><a href="{@docRoot}resources/samples/get.html">SDK </a> API

</p>