Fragments allow modular sections to be added and removed from an activity at runtime. A fragment has its own layout and lifecycle methods similar to an activity. The document discusses how to create and manage fragments, communicate between fragments through the activity, and dynamically change the UI based on device configuration using different layouts for portrait, landscape, and larger screens. Fragments provide a flexible way to customize the user interface on different devices.

1. Building
a
Dynamic
UI
with
Fragments
Jussi
Pohjolainen

2. About
Fragments
• Fragments
are
“subac'vity”;
modular
sec>on
inside
the
ac>vity.
• You
can
add
and
remove
fragments
at
run>me
• Fragment
has
it’s
own
UI
(.xml
file)
• Feature
that
came
in
API
Level
11
-­‐>
need
to
have
support
library
if
targe>ng
older
devices

3. Design
Philosophy

4. Crea>ng
a
Fragment
• Subclass
of
Fragment
• Implement
lifecycle
methods
that
are
similar
to
Ac>vity’s.
– onCreate, onStart, onPause, onStop..
• Implement
at
least
– onCreate
• Ini>alize
essen>al
components
– onCreateView
• Return
View
–
object
that
is
the
root
of
your
fragment’s
layout
– onPause
• User
is
leaving
the
fragment

5. Example
Fragment:
MainActivity.java
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle b) {
super.onCreate(b);
setContentView(R.layout.main);
}
}

6. Example
Fragment:
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<fragment
android:id="@+id/fragment1"
android:name="com.example.fragmentexample.LeftFragment"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="match_parent" />
<fragment
android:id="@+id/fragment2"
android:name="com.example.fragmentexample.RightFragment"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="match_parent" />
</LinearLayout>

7. Example
Fragment:
LeftFragment.java
public class LeftFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
Button tv = new Button(getActivity());
tv.setText("left!");
return tv;
}
}

8. Example
Fragment:
RightFragment.java
public class RightFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
Button tv = new Button(getActivity());
tv.setText("right!");
return tv;
}
}

10. Fragment
may
hold
XML
too!
public class RightFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Let’s remove these
// Button tv = new Button(getActivity());
// tv.setText("right!");
// return tv;
// Creates Java object from the given XML file.
View view = inflater.inflate(R.layout.right_fragment, // The xml file
container,
false);
return view;
}
}

11. FragmentManager
• FragmentManager
class
provides
methods
that
allow
you
to
add,
remove
and
replace
fragments
to
on
ac>vity
at
run>me.
• Don’t
add
fragments
to
.xml,
but
perform
transac>on
in
Java
• See:
– https://developer.android.com/training/basics/
fragments/fragment-ui.html

12. FragmentManager:
GeYng
reference
to
fragments
// Activity has getFragmentManager() – method!
FragmentManager fragmentManager = getFragmentManager();
ChooseTitleFragment ctf =
(ChooseTitleFragment)
fragmentManager.findFragmentById(R.id.choose);

13. Communica>on
Between
Fragments
• Build
each
Fragment
UI
as
separate!
• Do
Fragment
-­‐>
Fragment
communica>on
through
Ac>vity
• Fragment
A
-­‐>
Ac8vity
– Use
your
own
interface,
ac>vity
can
be
whatever
• Ac8vity
-­‐>
Fragment
B
– Use
FragmentManager
to
get
a
reference
to
Fragment
B
and
call
it’s
public
methods

14. public class ButtonFragment extends Fragment {
// Helper interface for communicating with Activity
public interface OnButtonClickedListener {
public void buttonClicked();
}
// Host Activity is here
private OnButtonClickedListener callback;
// When creating this fragment, host activity must be given and it must
// implement OnButtonClickedListener interface. Method is called when fragment has
// been associated with activity. The Activity is passed here!
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
callback = (OnButtonClickedListener) activity;
}
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Creates Java object from the given XML file.
View view = inflater.inflate(R.layout.button_fragment, // The xml file
container,
false);
Button sent = (Button) view.findViewById(R.id.button1);
// When button is clicked, call activity's buttonClicked method
sent.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
callback.buttonClicked();
}
});
return view;
}
}

15. Ac>vity
public class MainActivity extends Activity implements
ButtonFragment.OnButtonClickedListener {
@Override
public void onCreate(Bundle b) {
super.onCreate(b);
// Holds ButtonFragment
setContentView(R.layout.main);
}
// This is called when button is pressed in the fragment!
@Override
public void buttonClicked() {
}
}

16. Basic
Idea:
How?

17. Use
layout/
directories
• layout/main.xml
– One
dim
layout
(holds
Fragment
A)
• layout-­‐land/main.xml
– Two
dim
layout
(holds
Fragment
A
+
B)
• layout-­‐large/main.xml
– Two
dim
layout
(holds
Fragment
A
+
B)

18. public class MainActivity extends Activity implements ButtonFragment.OnButtonClickedListener {
@Override
public void onCreate(Bundle b) {
super.onCreate(b);
// Holds either two-dim or on-dim layout! hold either
// 1) left-pane or
// 2) left-pane and right-pane
setContentView(R.layout.main);
}
// This is called when button is pressed in the fragment!
@Override
public void buttonClicked() {
// Let's get a reference to the right fragment
RightPaneFragment rightPaneFragment = (RightPaneFragment) getFragmentManager()
.findFragmentById(R.id.right_fragment);
// If it's not accessible, we are in one-dim layout
if (rigthPaneFragment == null) {
startNewActivity();
} else {
updateRightPane();
}
}
private void startNewActivity() {
Intent showContent = new Intent(this, RightActivityPane.class); // This activity holds RightPaneFragment
startActivity(showContent);
}
private void updateRightPane(RightPaneFragment rightPaneFragment) {
rightPaneFragment.doSomething();
}
}