1. CS499 – Mobile Application Development
Fall 2013
Fragments

2. Supporting Different Screens
Device orientation changes characteristics of display
Tablets have larger displays than phones
Need ways to support multiple UI panes/user behaviors at the same time
May not need “one activity per screenfull of data””

3. Example - Email On phone – 2 activites:
List messages
View selected message
On tablet – 2 fragments embedded into a single activity

4. Supporting different screens
Can use the resources to deal with this (in limited ways)
In drawables - four generalized densities: low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)
In layouts, can do similar things - four generalized sizes: small, normal, large, xlarge
In layouts, can also differentiate between portrait and landscape orientations

5. Supporting different screens
For example, this project includes a default layout and an alternative layout for large screens:
MyProject/
res/
layout/ main.xml
layout-large/ main.xml
The file name must be exactly the same (main.xml), but their contents are different in order to provide an optimized UI for the corresponding screen size.

6. Supporting different screens

7. Fragments Introduced in 3.0
Represent a behavior/portion of UI within an Activity
Multiple fragments can be embedded in a Activity to create a multi-pane UI
A single fragment can be reused across multiple activities

8. Fragment Lifecycle
Fragments have their own lifecycles and receive their own events
But Activity lifecycle interacts with associated fragment’s lifecycle:
When activity pauses, its fragments are paused.
When activity is destroyed, its fragments are destroyed

9. Fragment Lifecycle Similar to Activity lifecycle states Resumed Paused
Fragment is visible in running activity
Paused
Another activity is in the foreground and has focus
The containing activity is still visible
Stopped
The fragment is not visible

10. Lifecycle callbacks onCreate() onStart() onResume() onPause() onStop()
Initial creation of the fragment
onStart()
Fragment is visible to the user
onResume()
Fragment is visible to the user and actively running
onPause()
Fragment is visible, but does not have focus
onStop()
Fragment is no longer visible
onDestroy()
Fragment is no longer in use

11. Lifecycle callbacks onAttach() onCreateView() onActivityCreated
Fragment is first attached to its activity
onCreateView()
Fragment instantiates its user inteface view
onActivityCreated
Fragment’s activity created and Fragment’s view hierarchy instantiated
onDestroyView()
View previously cretaed by onCreateView() detached from the fragment
onDetatch()
Fragment no longer attached to its activity

12. Fragment & Activity Lifecycles
onCreate()
onStart()
onResume()
onPause()
onStop()
onDestroy()
onAttach()
onCreateView()
onDetach()
onActivityCreated()

13. Fragment Layout Fragments usually, but not always, have a UI
Layout can be inflated/implemented in onCreateView()
onCreateView() must return the View at the root of the Fragment’s layout
The returned View will be added to the containing Activity
Container represented as a ViewGroup within the containing Activities view hierarchy

14. Fragment Layout Two ways to add Fragments to an Activity's layout
Declare statically in the Activity’s layout file
Add it programmatically to a ViewGroup in the Activity's layout

15. Example App: Static Fragments

16. Going to create two versions
Version 1 – create activity with two fragments
Screen will not change with orientation
Version 2 – extend version 1 so that using both fragments in landscape mode but only one (at a time) in portrait

17. Main Activity MainActivity.java activity_main.xml
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); }
MainActivity.java
<LinearLayout xmlns:android="
xmlns:tools="
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation = "horizontal">
<fragment
android:name = "cs499.examples.fragmentstatic.Fragment1"
android:id =
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
android:name = "cs499.examples.fragmentstatic.Fragment2"
android:id =
android:layout_weight="0"
</LinearLayout>
activity_main.xml

18. Fragments fragment1.xml fragment2.xml
<LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent“ android:layout_height="match_parent" android:orientation="vertical" android:background="#0000FF“ > <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:drawSelectorOnTop="false" /> </LinearLayout>
fragment1.xml
<LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent“ android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Please Select a Fruit" /> </LinearLayout>
fragment2.xml

19. Fragment1.java modifies fragment2
public class Fragment1 extends Fragment public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { Context c = getActivity().getApplicationContext(); View vw = inflater.inflate(R.layout.fragment1, container, false); final String[] fruits={"Apple", "Mango", "Orange", "Grapes","Banana" }; ListView fruitsList = (ListView) vw.findViewById(R.id.fruits_list); ArrayAdapter<String> arrayAdpt = new ArrayAdapter<String>(c,android.R.layout.simple_list_item_1,fruits); fruitsList.setAdapter(arrayAdpt); fruitsList.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { TextView selectedOpt = (TextView)getActivity().findViewById(R.id.selectedopt); selectedOpt.setText("You have selected "+ ((TextView)view).getText().toString()); } }); return vw;
modifies fragment2

20. Fragment2.java
public class Fragment2 extends Fragment public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment2, container, false); }

21. No change on orientation change

22. Version 2 When in landscape mode, show both fragments.
When in portrait mode, show fragment 1. Selecting an item starts a new activity that shows fragment 2.
Want to move seamlessly between these modes.

23. Modify activity_main.xml:
When a device switches to landscape mode, the layout file from res/layout-land is used to display view. So,
Create folder in /res/layout-land
Copy activity_main.xml (with two fragments) in new folder
Remove second fragment from activity_main in /res/layout

24. in Fragments1.java:
fruitsList.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) { TextView selectedOpt = (TextView)getActivity().findViewById(R.id.selectedopt); selectedOpt.setText("You have selected "+ ((TextView)view).getText().toString()); } else { Intent intent = new Intent(getActivity().getApplicationContext(), ShowItemActivity.class); intent.putExtra("item", ((TextView)view).getText().toString()); startActivity(intent); } });

25. ShowItemActivity.java Be sure to add this activity to manifest
public class ShowItemActivity extends Activity protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) { finish(); return; } setContentView(R.layout.fragment2); Bundle extras = getIntent().getExtras(); if (extras != null) { String selectedItem = extras.getString("item"); TextView textView = (TextView) findViewById(R.id.selectedopt); textView.setText("You have selected "+selectedItem);
Be sure to add this activity to manifest

26. Creating/Managing Fragments in Java
Uses a FragmentManager
access to the fragments available in an activity
perform FragmentTransaction – required to add, remove and replace fragments
FragmentManager fm = getFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
if (null==fm.findFragmentByTag(TAG1)) {
Frag1Activity fragment1 = new Frag1Activity();
ft.add(R.id.fragment_container,fragment,”TAG1”); }
ft.commit();

27. Create same app Use Fragment1.xml and Fragment2.xml
Change activity_main.xml:
<LinearLayout xmlns:android="
xmlns:tools="
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
/>
android:layout_weight="0"
</LinearLayout>

28. public class Fragment1 extends Fragment { protected static final String FRAG2 = public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { Context c = getActivity().getApplicationContext(); View vw = inflater.inflate(R.layout.fragment1, container, false); final String[] fruits={"Apple", "Mango", "Orange", "Grapes","Banana" }; ListView fruitsList = (ListView) vw.findViewById(R.id.fruits_list); ArrayAdapter<String> arrayAdpt = new ArrayAdapter<String>(c,android.R.layout.simple_list_item_1,fruits); fruitsList.setAdapter(arrayAdpt); final FragmentManager fragmentManager = getFragmentManager(); fruitsList.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if (null != fragmentManager.findFragmentByTag(FRAG2)) { TextView selectedOpt = (TextView)getActivity().findViewById(R.id.selectedopt); selectedOpt.setText("You have selected "+((TextView)view).getText().toString()); } else { Intent intent = new Intent(getActivity().getApplicationContext(),ShowItemActivity.class); intent.putExtra("item", ((TextView) view).getText().toString()); startActivity(intent); } } }); return vw; }
Fragment1.java

29. MainActivity.java Use same Fragment2.java and
public class MainActivity extends Activity { private static final String FRAG1 = "1"; private static final String FRAG2 = protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FragmentManager fm = getFragmentManager(); FragmentTransaction ft = fm.beginTransaction(); if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){ ft.add(R.id.fragment1, new Fragment1(),FRAG1); ft.add(R.id.fragment2,new Fragment2(),FRAG2); } else { if (null != fm.findFragmentByTag(FRAG2)) ft.remove(fm.findFragmentByTag(FRAG2)); } ft.commit();
Use same Fragment2.java and
ShowItemActivity.java as static version

30. Dynamic UIs
Can replace fragments (in addition to add/delete) to react.
To allow the user to navigate backward through the fragment transactions, you must call addToBackStack() before you commit theFragmentTransaction.

31. Updating Fragments
// 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();

32. Special Fragment ListFragment – builtin listview DialogFragment
PreferenceFragment