{"id":578,"date":"2011-03-22T02:12:10","date_gmt":"2011-03-22T09:12:10","guid":{"rendered":"http:\/\/wiebe-elsinga.com\/blog\/?p=578"},"modified":"2011-10-20T21:16:05","modified_gmt":"2011-10-21T04:16:05","slug":"android-fragment","status":"publish","type":"post","link":"http:\/\/wiebe-elsinga.com\/blog\/android-fragment\/","title":{"rendered":"How-To: Android Fragments"},"content":{"rendered":"
\n<\/div>\n\n

Typically, an Android user interface is composed of views within layouts, such as a ListView within a LinearLayout. A hierarchy of View objects gets loaded or created when an Activity is started. On small screens, this is fine.
\nBut when you spread a UI out over the surface of a tablet’s screen, it calls for a different style of interaction. Some parts of the screen should remain constant over longer durations than others<\/p>\n

While developers can implement interactions where parts of the screen change by showing and hiding views, Android’s developers decided they needed more than just convention to encourage better large screen UIs and consistent implementation of the feel of the UI. Now, in order to facilitate this new kind of interaction, as part of the Android 3.0 SDK, we get a class called Fragment.
\n
\nA Fragment object is something between a View and and Activity: It can be part of a layout, but it isn’t a subclass of View.
\nIt implements the ComponentCallbacks interface, and it has a lifecycle, but that lifecycle is dependent on the Activity the Fragment object belongs to.
\nLet’s see what it can do in a tablet-sized user interface.<\/p>\n

Here are the contents of the main.xml<\/em> file that describes a screen layout for our application. In a list on the left of the screen some numbers will appear. Selecting a number from that list will create that many Android icons, displayed in a Fragment instance on the right.<\/p>\n

<!--?xml version="1.0" encoding="utf-8"?--><\/span>
\nxmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"
\nandroid:orientation="horizontal"
\nandroid:layout_width="match_parent"
\nandroid:layout_height="match_parent"
\nandroid:id="@+id\/frags">
\n
\nandroid:id="@+id\/number_list"
\nandroid:layout_width="250dip"
\nandroid:layout_height="match_parent" \/>
\n
\nandroid:id="@+id\/the_frag"
\nandroid:layout_width="match_parent"
\nandroid:layout_height="match_parent" \/><\/div><\/div>\n

The code for the Fragment subclass referred to in the layout in main.xml<\/em> is below.<\/p>\n

package<\/span> com.my<\/span>;<\/span>
\n
\nimport<\/span> android.app.Fragment<\/span>;<\/span>
\nimport<\/span> android.content.Context<\/span>;<\/span>
\nimport<\/span> android.os.Bundle<\/span>;<\/span>
\nimport<\/span> android.view.LayoutInflater<\/span>;<\/span>
\nimport<\/span> android.view.View<\/span>;<\/span>
\nimport<\/span> android.view.ViewGroup<\/span>;<\/span>
\nimport<\/span> android.widget.ImageView<\/span>;<\/span>
\nimport<\/span> android.widget.LinearLayout<\/span>;<\/span>
\n
\npublic<\/span> class<\/span> FragmentExample extends<\/span> Fragment {<\/span>
\nprivate<\/span> int<\/span> nAndroids;<\/span>
\n
\npublic<\/span> FragmentExample(<\/span>)<\/span> {<\/span>
\n}<\/span>
\n
\n\/**
\n* Constructor for being created explicitly
\n*\/<\/span>
\npublic<\/span> FragmentExample(<\/span>int<\/span> nAndroids)<\/span> {<\/span>
\nthis<\/span>.nAndroids<\/span> =<\/span> nAndroids;<\/span>
\n}<\/span>
\n
\n\/**
\n* If we are being created with saved state, restore our state
\n*\/<\/span>
\n@Override
\npublic<\/span> void<\/span> onCreate(<\/span>Bundle saved)<\/span> {<\/span>
\nsuper<\/span>.onCreate<\/span>(<\/span>saved)<\/span>;<\/span>
\nif<\/span> (<\/span>null<\/span> !=<\/span> saved)<\/span> {<\/span>
\nnAndroids =<\/span> saved.getInt<\/span>(<\/span>"nAndroids"<\/span>)<\/span>;<\/span>
\n}<\/span>
\n}<\/span>
\n
\n\/**
\n* Save the number of Androids to be displayed
\n*\/<\/span>
\n@Override
\npublic<\/span> void<\/span> onSaveInstanceState(<\/span>Bundle toSave)<\/span> {<\/span>
\ntoSave.putInt<\/span>(<\/span>"nAndroids"<\/span>, nAndroids)<\/span>;<\/span>
\n}<\/span>
\n
\n\/**
\n* Make a grid and fill it with n Androids
\n*\/<\/span>
\n@Override
\npublic<\/span> View<\/span><\/a> onCreateView(<\/span>LayoutInflater inflater, ViewGroup container, Bundle saved)<\/span> {<\/span>
\nint<\/span> n;<\/span>
\nContext<\/span><\/a> c =<\/span> getActivity(<\/span>)<\/span>.getApplicationContext<\/span>(<\/span>)<\/span>;<\/span>
\nLinearLayout l =<\/span> new<\/span> LinearLayout(<\/span>c)<\/span>;<\/span>
\nfor<\/span> (<\/span>n =<\/span> 0<\/span>;<\/span> n <<\/span> nAndroids;<\/span> n++<\/span>)<\/span> {<\/span>
\nImageView i =<\/span> new<\/span> ImageView(<\/span>c)<\/span>;<\/span>
\ni.setImageResource<\/span>(<\/span>R.drawable<\/span>.android<\/span>)<\/span>;<\/span>
\nl.addView<\/span>(<\/span>i)<\/span>;<\/span>
\n}<\/span>
\nreturn<\/span> l;<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n
package<\/span> com.my<\/span>;<\/span>
\n
\nimport<\/span> android.app.Activity<\/span>;<\/span>
\nimport<\/span> android.app.Fragment<\/span>;<\/span>
\nimport<\/span> android.app.FragmentTransaction<\/span>;<\/span>
\nimport<\/span> android.os.Bundle<\/span>;<\/span>
\nimport<\/span> android.view.View<\/span>;<\/span>
\nimport<\/span> android.widget.AdapterView<\/span>;<\/span>
\nimport<\/span> android.widget.ArrayAdapter<\/span>;<\/span>
\nimport<\/span> android.widget.ListView<\/span>;<\/span>
\nimport<\/span> android.widget.AdapterView.OnItemClickListener<\/span>;<\/span>
\n
\npublic<\/span> class<\/span> FragmentExampleActivity extends<\/span> Activity implements<\/span>
\nOnItemClickListener {<\/span>
\n\/** Called when the activity is first created. *\/<\/span>
\n@Override
\npublic<\/span> void<\/span> onCreate(<\/span>Bundle savedInstanceState)<\/span> {<\/span>
\nsuper<\/span>.onCreate<\/span>(<\/span>savedInstanceState)<\/span>;<\/span>
\nsetContentView(<\/span>R.layout<\/span>.main<\/span>)<\/span>;<\/span>
\n
\nListView<\/span><\/a> l =<\/span> (<\/span>ListView<\/span><\/a>)<\/span> findViewById(<\/span>R.id<\/span>.number_list<\/span>)<\/span>;<\/span>
\nArrayAdapter numbers =<\/span> new<\/span> ArrayAdapter(<\/span>
\ngetApplicationContext(<\/span>)<\/span>, android.R<\/span>.layout<\/span>.simple_list_item_1<\/span>,
\nnew<\/span> String<\/span><\/a>[<\/span>]<\/span> {<\/span> "one"<\/span>, "two"<\/span>, "three"<\/span>, "four"<\/span>, "five"<\/span>, "six"<\/span> }<\/span>)<\/span>;<\/span>
\nl.setAdapter<\/span>(<\/span>numbers)<\/span>;<\/span>
\nl.setOnItemClickListener<\/span>(<\/span>this<\/span>)<\/span>;<\/span>
\n}<\/span>
\n
\n\/**
\n* Add a Fragment to our stack with n Androids in it
\n*\/<\/span>
\nprivate<\/span> void<\/span> stackAFragment(<\/span>int<\/span> nAndroids)<\/span> {<\/span>
\nFragment f =<\/span> new<\/span> FragmentExample(<\/span>nAndroids)<\/span>;<\/span>
\n
\nFragmentTransaction ft =<\/span> getFragmentManager(<\/span>)<\/span>.beginTransaction<\/span>(<\/span>)<\/span>;<\/span>
\nft.replace<\/span>(<\/span>R.id<\/span>.the_frag<\/span>, f)<\/span>;<\/span>
\nft.setTransition<\/span>(<\/span>FragmentTransaction.TRANSIT_FRAGMENT_OPEN<\/span>)<\/span>;<\/span>
\nft.addToBackStack<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
\nft.commit<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span>
\n
\n\/**
\n* Called when a number gets clicked
\n*\/<\/span>
\npublic<\/span> void<\/span> onItemClick(<\/span>AdapterView<!--?--><\/span> parent, View<\/span><\/a> view, int<\/span> position, long<\/span> id)<\/span> {<\/span>
\nstackAFragment(<\/span>position +<\/span> 1<\/span>)<\/span>;<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n

This is what you see when you when you run the program: Initially, you see a list of numbers, and a blank area to the right.<\/p>\n

\"\"<\/a><\/p>\n

Touch a number, and a new Fragment is created, with the specified number of Android icons. If you keep touching numbers in the list on the left, the corresponding number of Android icons appears in the Fragment instance on the right. Now try the back button. Instead of returning to an instance of the Activity that was on the screen before this application launched, you see the previous Fragment instance on the right. That is, the Fragment objects have been integrated into the task’s back stack.<\/p>\n

\"\"<\/a><\/p>\n

Fragments are a new feature of Android, and this brief example only scratches the surface of how Fragment will change the way Android UIs are implemented. You can see from this example that using Fragments is efficient and expressive.
\nYou can read more about Fragment, and how it can be used alongside starting Activity objects to drill into detail views in an Android UI in an article by Dianne Hackborn, here<\/a>.<\/p>\n

Download source code FragmentExample<\/a> [19kB]<\/p>\n","protected":false},"excerpt":{"rendered":"

Typically, an Android user interface is composed of views within layouts, such as a ListView within a LinearLayout. A hierarchy of View objects gets loaded or created when an Activity is started. On small screens, this is fine. But when you spread a UI out over the surface of a tablet’s screen, it calls for a different style of interaction. Some parts of the screen should remain constant over longer durations than others While developers can implement interactions where parts of the screen change by showing and hiding views, Android’s developers decided they needed more than just convention to encourage better large screen UIs and consistent implementation of the feel of the UI. Now, in order to facilitate this new kind of interaction, as part of the Android 3.0 SDK, we get a class called Fragment.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[7,95],"tags":[154,57,56],"_links":{"self":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/posts\/578"}],"collection":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":0,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/posts\/578\/revisions"}],"wp:attachment":[{"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/media?parent=578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/categories?post=578"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wiebe-elsinga.com\/blog\/wp-json\/wp\/v2\/tags?post=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}