Mobile Application

Development
Android Platform

Topic:
Working with Fragments
Dr. Uzair Ahmad
Department of Computer Science
National Textile University
Pakistan

What you will learn

Activity
getFragmentManager()
getResources()
findViewByID()

Resources
getStringArray()

FragmentManager
findFragmentByID()

ListFragment
getActivity()
onAttach(Activity activity)
getListView()
setListAdapter( ArrayAdapter<?>)

ListAdapter, ArrayAdapter<?>

What You are supposed to

Know
Create an array of strings & access
its elements
Java Interfaces
Anonymous Classes
Parameterized Classes
Exception Throwing/Handling

App Project Outline

1. Create a New Android Project
StaticFragmentsDemo

2. Add two String arrays to the

res/values/strings.xml
Contacts
Details

3. MainActivity
4. ContactsFragment
ContactsFragment extends ListFragment

5. DetailsFragment
DetailsFragment extends Fragment

My Contacts App

MainActivity.ja
va
Activity_main.x
ml

ContactsFragment.j
ava
Text_view.xml

ContactDetailsFragment.
java
contact_details_layout.xm
l

Defining String Arrays

Add two String Arrays to

MainActivity
1. Create a New Activity
MainActivity
2.

Open the MainActivity java file

i.

Add two public static String array variables

mContactsArray, mDetailsArray;

Initialize String Arrays to

MainActivity
mContactsArray =
getResources().getStringArray(R.array.Contacts);
mDetailsArray =
getResources().getStringArray(R.array.Details);

Create Layout for MainActivity

1. Open the Layout file of MainActivity
class
i. Set the Layout to Linear Layout
ii. Add Two Fragments to the Layout
i.
ii.

Set appropriate classes

Set layout_weight attribute values

Statically Embedding Fragments in

Activity

ContactsFragment
1. Create a ContactsFragment class
i.

Define a public interface

ii.

public interface ListSelectionInterface{

public void onListItemSelected ( int index)}

Add a member variable typed

ListSelectionInterface

ListSelectionInterface mListener;
ContactFragment
mListener

ListSelectionInterf
ace

ContactsFragment
ContactFragment
mListener

ListSelectionInterf
ace

ListFragment has a default

layout that consists of a
single list view.

MainActivity
1. Open the MainActivity java file
i.
ii.

Add implements ListSelectionInterface to the

class name
Provide implementation of the interface
method. (Keep empty at the moment)

1. Open the ContactsFragment java file

i.

Implement onAttach(Activity activity)

method of FragmentList parent class

ListSelectionInterf
ace
implements

MyMainActivity

mContactsAr
ray
mDetailsArra
y

ContactFragment
mListener

ListSelectionInterf
ace

ContactDetailsFragment
1. Create a ContactDetailsFragment
class
DetailsFragment
mArrayLen
mCurrIdx

mContactDet
ailView

Compose ContactDetailsFragment
into MyMainActivity
1. Open the MyMainActivity java file
i.

Add a member variable

ContactDetailsFragment
mDetailsFragment;

ii. Initialize the mDetailsFragment in

onCreate() method

ntManager frgmntMngr = getFragmentManager();

sFragment = (ContactDetailsFragment) frgmntMngr .findFragmentById(
R.id.contact_details_fragment);

Compose ContactDetailsFragment
into MyMainActivity

entManager frgmntMngr = getFragmentManager();

ilsFragment = (ContactDetailsFragment) frgmntMngr .findFragmentById(
R.id.contact_details_fragment);

ListSelectionInterf
ace
implements

MyMainActivity
mDetailsFragme
nt

DetailsFragment
mArrayLen
mCurrIdx

mContactDet
ailView

mContactsAr
ray
mDetailsArra
y

ContactFragment
mInterface

ListSelectionInterf
ace

Populate

ContactFragment with
Contacts

1. Crate a simple TextView Layout

2. Open the ContactsFragment java file
i.

Implement onActivityCreated() method

Set the List of Values using setListAdapter() method

setListAdapter(
new ArrayAdapter<String>(
getActivity(),
R.layout.textview_layout,
MainActivity.mContactsArray
)
);

NOTE: Dont forget to call

super.onActivityCreated(savedInstanceState);
As the first statement of onActivityCreated(Bundle savedInstanceState) method

ListAdapter
Bridge between
a ListView and the Data

ListView can display any data

provided that it is wrapped in a
ListAdapter.

ArrayAdapter
ArrayAdapter<String>(
getActivity(), Context
R.layout.textview_layout,
int resource id
MainActivity.mContactsArray
Array of Objects
)

Implement ListItemClick Event

Listener
1. Open the ContactsFragment java file
i.

Implement onListItemClick(..)
method
getListView().setItemChecked(position,
true);
mListSelectionInterface.onListItemSelected(
position);

member mListSelectionInterface holds an Object of MainActiv

Set the Layout of

DetailsFragment
1. Create a simple LinearLayout
details_layout, add a TextView
contactDetails to the layout
2. Open the DetailsFragment java file
i.

Implement onCreateView(..) method

return inflater.inflate(R.layout.details_layout, container);

Initialize the TextView of

DetailsFragment
1. Open the DetailsFragment java file
i.

Add a TextView member variable

mTextView
ii. Implement onActivityCreated(..)
method
mTextView = (TextView)
getActivity().findViewById(R.id.contactDetails);

Add showContactDetails() to
DetailsFragment
1. Open the DetailsFragment java file
i.

Add a showContactDetails() method

public void showContactDetails(int

index){
mTextView.setText(MyActivity.mDetailsArray[in
dex]);

} showContactDetails() will be called by MainActivity

member

Implement onListItemSelected() in
MainActivity
onListItemSelected(int index){
??

My Contacts App

MainActivity.ja
va
Activity_main.x
ml

ContactsFragment.j
ava
Text_view.xml

ContactDetailsFragment.
java
contact_details_layout.xm
l

ContactsFragment
MainActivity
mDetailsFragm
ent
onCreate(){
setContentView(activity_main);
}

onAttach(){}
onCreate(){}
onCreateView()
{}
onActivityCreate
d(){}
ContactDetailsFragment

mContactsAr
ray
mDetailsArra
y

mCurrIdx

mArrayLen

mContactDet
ailView

ListSelectionListen
er

FragmentL
ist

Activit
y

ContactsFragment

MainActivity
mDetailsFragm
ent
onCreate(){
setContentView(activity_main);
mDetailsFragment= FragmentManager.

}
mContactsAr
ray
mDetailsArra
y

onAttach(){}
onCreate(){}
onCreateView()
{}
onActivityCreate
d(){}

Fragmen
t

ContactDetailsFragment

mContactDet
ailView

mCurrIdx

mArrayLen

FragmentList

ContactsFragme
nt

Interface
ListSelectionListener {onListSelection();}

ListSelectionListen
er

ListSelectionListener
mListener

Activity

onAttach(){}
onCreate(){}
onCreateView(){}
onActivityCreated()
{}

MainActivity
mDetailsFragm
ent
onCreate(){
setContentView(activity_main);
mDetailsFragment= FragmentManager.
}

mListener = (ListSelectionListener)
activity;
super.onCreate(sta
te);

inflater.inflate(R.layout.contact_details_layout,
container, false);
setListAdapter(new
ArrayAdapter<String>(getActivity(),
R.layout.text_view,
MainActivity.contactsArray));

onListSelection(){}

if (mDetailsFragment.getShownIndex() !=
index) {
mDetailsFragment.showContactAtIndex(index);
}

Fragment

ContactDetailsFragme
nt
ListSelectionListen
er
Activity

mArrayLen mCurrIdx

mContactDet
ailView
onActivityCreated()
{}

MainActivity
mDetailsFragm
ent
onCreate(){
setContentView(activity_main);
mDetailsFragment= FragmentManager.
}

onListSelection(int
index){}

super.onActivityCreated(savedInstanceState);
mContactDetailView = (TextView)
getActivity().findViewById(R.id.textView);
mArrayLen = MainActivity.contactsArray.length;
showContactAtInde
x(i){}

mContactDetailView.setText(MainActivity.contactDetailsArra
y[mCurrIdx]);

getShownIndex(i){}
return mCurrIdx;

if (mDetailsFragment.getShownIndex() !=
index) {
mDetailsFragment.showContactAtIndex(index);
}

FragmentList

ListSelectionListen
er
Activity

ContactsFragme
nt
ListSelectionListener
mListener

onAttach(){}
onCreate(){}

MainActivity
mDetailsFragm
ent

onCreateView(){}
onActivityCreated()
{}

onCreate(){
setContentView(activity_main);
mDetailsFragment= FragmentManager.
}

Interface
ListSelectionListener

mListener = (ListSelectionListener)
activity;
super.onCreate(sta
te);

inflater.inflate(R.layout.contact_details_layout,
container, false);
setListAdapter(new
ArrayAdapter<String>(getActivity(),
R.layout.text_view,
MainActivity.contactsArray));

Fragment

super.onAttach(activity
);
ContactDetailsFragme
nt mContactDetailView;
mQuoteArrayLen;

super.onCreate(sta
te);

onAttach(){}
onCreate(){}
onCreateView(){}
onActivityCreated()
{}

return
inflater.inflate(R.layout.contact_details_layout,
container, false);

super.onActivityCreated(savedInstanceState);
mContactDetailView = (TextView)
getActivity().findViewById(R.id.textView);
mQuoteArrayLen = MainActivity.contactsArray.length;