Fragments

Mobile Computing - Android

Introduction

There are many, many different sized

Android devices, making UI design a
challenge.

Fragments are an attempt to address this

problem. Instead of just a single layout, the
user interface can be divided into parts,
each represented by a Fragment.
Fragments combine to form the entire user
interface, and they are modular. They can
be reused in different Activities, and
swapped in and out of a single Activity
while it is running.

Note that Fragments are always part of an

Activity, and the Activity is still in charge:
while it is running it can add or remove
Fragments as needed.

1 Activity with multiple Fragments

The Fragment Lifecycle

In addition to its own UI, a Fragment have its own

lifecycle, intertwined with the Activity with which it is
associated.

Lifecycle methods include those found in the

Activity:

onCreate(), onStart(), onResume(), onPause(),

onSaveInstanceState(), on Stop() and onDestroy()

In addition, a Fragment has its own unique methods

Fragment Lifecycle
Methods

onAttach(Activity acty) -- called when a Fragment

is attached to an Activity (before onCreate())

onCreateView() - called before the Fragment

enters the resumed state

onViewCreated()

onActivityCreated() -- called when the associated

activity has been created and this Fragment's
view has been instantiated

onDestroyView() -- the counterpart to

onCreateView()

onDetach() -- called after onDestroy(), just before

the Fragment becomes eligible for garbage
collection

Three Famous Fragments

DialogFragment

ListFragment

Displays a dialog box

We will look at some of

these in detail later on

displays a ListView inside a Fragment (like the

ListActivity -- also includes OnListItemClick())

PreferenceFragment

Useful for creating settings for your app

Responsive Design

Often seen with a master/detail interface

Tap on a row and see detailed information about that item. The detailed fragment can
be either in the same activity (on a sufficiently wide screen), or in a different activity.

activity_item_twopane.xml

The ItemListActivity has 2

layouts, depending on the
size of the screen. If width
permits, it uses
activity_item_two_pane.xml,
with a fragment for the list
view and for the detailed view.
Otherwise, it uses
activity_item_list.xml, and a
second activity,
ItemDetailActivity, presents
the same detail Fragment as
above.

Creating A Fragment
1.Make a new Fragment (File >> New File >> Fragment >> Blank)
2.Override onCreateView() to create the Fragment's View
3.Edit the layout xml as needed (we'll just add a Button)
Aside: Android provides 5 Fragment subclasses which we will explore
later. Here the goal is to make our own subclass.

Overriding onCreateView()
public class BlankFragment extends Fragment {
public BlankFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_blank, container, false);
Button btn = (Button) view.findViewById(R.id.clickMeBTN);
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v){ /* .... */ }
});
return view;
}
}

A Fragment's View must be returned by its onCreateView() method

LayoutInflater -- an object capable of taking an xml file, and making a View out of it
ViewGroup -- the ViewGroup (i.e., the activity's view) in which the fragment will be
embedded
Bundle -- data (if the fragment had been previously paused and is now resuming)

The Official Word on the

Subject (aka the API)

Your Fragment must override onCreateView()

Optional? If your Fragment extends ListFragment (discussed later) you

need not implement onCreateView() it will give you a ListView for free :-)

Adding a Fragment to an
Activity Using XML

Each fragment must appear in an activity's layout.

One way to do this is by specifying a fragment in an
activity's layout file with the <fragment> tag,
specifying the Fragments fully qualified name in the
android:name attribute (e.g.,
org.mprogers.SuperduperFragment).

The Fragment's layout will appear in the location

specified by the fragment tag, with the appropriate
size.

An Example
res/layout-large/news_articles.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

Specify fragments
in the activity's
layout file

<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" />

<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" />

</LinearLayout>

Load the layout in

the usual way ...

public class MainActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_articles);
}
}

An Example, Enlarged
HeadlinesFragment

ArticleFragment

Placing Fragments
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<fragment
android:id="@+id/topFRG"
android:name="org.mprogers.fragmento.TopFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="26dp"
android:layout_marginTop="24dp"/>
<fragment
android:id="@+id/bottomFRG"
android:name="org.mprogers.fragmento.BottomFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/fragment1"
android:layout_below="@+id/fragment1"
android:layout_marginTop="31dp"
tools:layout="@layout/bottom_fragment" />
</RelativeLayout>

1. Drag <fragment> in xml

editor (under Custom)
2. When prompted choose
an existing Fragment
subclass.

public class MainActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Part II: Dynamic Fragments

The fragments that we have placed thus far are

known as static -- they appear where the
<fragment> tag appears in the Activity's layout,
and cannot be altered at runtime.

Building a More Flexible UI

If you place a fragment with the <fragment> tag in

the layout file, it is stuck there: that fragment cannot
be swapped out.

Q: Why would you want to swap out fragments?

A: 1. It is one solution to the problem of designing

multi-pane applications for tablets and single-pane
applications for smaller screens.
2. Swapping out fragments makes it possible to
add customized animations.

When There's Room

On a tablet, fragment A and B can

appear simultaneously

On a smaller device, tapping on

fragment A should lead to fragment B

It could be done with 2 activities, each

one hosting one fragment: tapping on
Fragment A would require an intent to
startActivity() for Fragment B.

This could be done with 1 Activity,

swapping out fragment A for B when
necessary: a concrete example of
Answer 1 on the previous slide.

Adding a Fragment at
Runtime

Ask a FragmentManager to make a FragmentTransaction

Can add(), remove(), replace() an existing fragment

The fragment must have a designated location, a container

view in the activity's layout.

A FrameLayout is a good choice if only 1 fragment will be

visible at a time

Add the initial fragment in the activity's onCreate(),

otherwise the user won't see anything :-0

An Example

Instead of 2 static fragments, just add 1, programmatically, in a FrameLayout, and

replace it when tapping on the article headline

The activity's layout will be considerably simpler

res/layout-large/news_articles.xml (when the layout is large)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">

<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" />

<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" />
</LinearLayout>

/res/layout/news_articles.xml
When the layout isn't so large ...

<FrameLayout xmlns:android="http://.../res/android"
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />

public class MainActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_articles); // something slick is happening here ...

An Example, Continued

// 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 a new Fragment to be placed in the activity layout

HeadlinesFragment firstFragment = new HeadlinesFragment();

The app contains 2

layouts, the one used
depends on the device

// 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
FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.add(R.id.fragment_container, firstFragment);
transaction.commit();

}
}

where to add

what to add

Replacing Fragments
public void onArticleSelected(int position) {
// Create fragment and give it an argument specifying the article it should show
ArticleFragment articleFragment = new ArticleFragment();
Bundle args = new Bundle();
args.putInt(ArticleFragment.ARG_POSITION, position);
articleFragment.setArguments(args);
FragmentTransaction transaction = getFragmentManager().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, articleFragment);
transaction.addToBackStack(null);
// Commit the transaction
transaction.commit();

In Activity - triggered when

user clicks on a ListItem

Fragment => Activity

Communication

Fragments don't communicate directly. Instead, they talk

to the Activity in which they are embedded.

Preferred technique:

interface1

interface2

interface1

interface2

1. Define an interface, in the fragment, that the activity

implements
2. Capture the activity in the fragment's
onAttach(Activity activity) method
3. Invoke the interface method in the activity when
necessary.

Alternatively, to call an activity's public methods directly

(or don't mind continually getting the activity), the
Fragment defines this helpful method:

public Activity getActivity() // a fragment always knows

which activity it belongs to

The Essence of the

Communication
class MyFragment extends Fragment {
interface MyInterface {
void sayHi();}
}
MyInterface myInterface;
public void onAttach(Activity activity){
myInterface = (MyInterface)activity;
}
public void buttonHandler(View v){
myInterface.sayHi();
}
}

class MyActivity extends Activity

implements MyFragment.MyInterface{
void sayHi(){
Debug.Log(Hello);
}
}

Life Without Interfaces

class MyFragment extends Fragment {
//interface MyInterface {
//void sayHi();}
//}
// MyInterface myInterface;
MyActivity myActivity;
public void onAttach(Activity activity){
//myInterface = (MyInterface)activity;
myActivity = activity;
}
public void buttonHandler(View v){
//myInterface.sayHi();
myActivity.sayHi();
}

class MyActivity extends Activity

implements MyInterface{
void sayHi(){
Debug.Log(Hello);
}
}

Activity => Fragment

Communication

If a fragment has been defined with a <fragment>

tag, i.e., it is static, then
1. Access it in the Activity with the
FragmentManager method:

public Fragment findFragmentById(int id)

2. Call its public methods directly

An Example
public class HeadlinesFragment extends ListFragment {
OnHeadlineSelectedListener mCallback;// this will be the Activity
// Container Activity must implement this interface
public interface OnHeadlineSelectedListener {
public void onArticleSelected(int position);
}
@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; // gotcha!
} catch (ClassCastException e) {
throw new ClassCastException(activity.toString()
+ " must implement OnHeadlineSelectedListener");
}
}
...
}
@Override
public void onListItemClick(ListView l, View v, int position, long id) {
// Send the event to the host activity
mCallback.onArticleSelected(position);
}

Fragment Constructors

This sounds vaguely medical ...

Google recommends that a Fragment only use a default

constructor

So how do you initialize a Fragment to get into a particular state?

Embed whatever initial information you need in a Bundle, and

supply that to the Fragment via setArguments()

Retrieve them via getArguments()

In the Android Studio template, this happens in a factory method

called newInstance()

Arguments @ Work
public static BlankFragment newInstance(String param1, String param2) {
BlankFragment fragment = new BlankFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
Log.d("TAG", "Greetings from newInstance()");
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
Log.d("TAG", String.format("Greetings from onCreate() where
params are %s & %s", mParam1, mParam2));
}

An ICE: The Fragments

Template

Create an Android Studio project with a single

Fragment

Add a ListFragment and a BlankFragment

Examine the code ...

ListFragment

ListFragment extends Fragment

Recall how ListActivities worked:

a ListActivity came with a ListView "for free"

used setListAdapter() to establish the adapter (source of the ListView's

child views)

overrode onListItemClick() method to handle clicks

if all we wanted was a ListView, we didn't need to create a layout -- but if we

wanted a custom layout, we had to make it, and

A ListFragment works the same way

We've already used the ListFragment in the FragmentBasics-Gradle project

Exercises

What are Fragments?Why are they necessary? What is the relationship

between a Fragment and an Activity?

Whatis the Fragment hierarchy?

Which comes first, an Activity or a Fragment?

Write a Fragment's onCreateView() method. Assume that its layout is

defined in R.layout.my_fragment.

Describe the Fragment lifecycle.

How is the Fragment lifecycle affected by the Activity lifecycle? What

happens to a Fragment when an Activity is paused? destroyed?

What are the twoways of adding a Fragment to an Activity?

Exercises

Write the code to add a Fragment called SkinnyFragment -- with a layout in

R.layout.skinny_fragment -- to an Activity that uses a FrameLayout with an id of
android:id="@+id/fragment_container". Do so using a <fragment> tag, and

by using a FragmentManager().

What transactions can be performed with a FragmentManager?

Write the code necessary to instantiate a Fragment called FrangoMints and display
it in an activity's FrameLayout (assume the same is as in question 7)

Write the code necessary to instantiate a second Fragment called AndesMintes

and replace the current Fragment with it

Can you use a <fragment> tag with a FragmentManager?

What is the difference between /res/layout and /res/layout-large? Between /res/

layout-port and/res/layout-land?

Exercises

Can you have 2 files, both named my_layout.xml, defined in both /res/layout-port
and /res/layout-land? If so, when would each file be utilized?

What is the purpose of getArguments() and setArguments()?

Describe how ListFragments and WebViewFragments work.

Name the key methods of the WebViewFragment class What does loadUrl() do?
What does setWebClient() do?

What is the purpose of android.permission.INTERNET? Where, exactly is that

placed in an AndroidManifest.xml file?

Describe how Fragments communicate with Activities using interfaces.

What is the advantage of this communication?

Describe how Activities communicate with Fragment using findFragmentById()

Resources

http://developer.android.com/training/basics/fragments/index.html

http://developer.android.com/guide/components/fragments.html

http://developer.android.com/guide/practices/screens_support.html

http://stackoverflow.com/questions/6677136/member-variables-vssetarguments-in-fragments

http://stackoverflow.com/questions/6091194/how-to-handle-button-clicksusing-the-xml-onclick-within-fragments

http://stackoverflow.com/questions/19844244/fragmentbasics-gives-nullpointer-exception

http://stackoverflow.com/questions/26805863/android-studio-directory-creation