Slide 1
Slide 1 text
Fragments
Why? How? What for?
Slide 2
Slide 2 text
Who Needs Fragments?
Slide 3
Slide 3 text
Who Needs Fragments?
You do!
Slide 4
Slide 4 text
Why?
Slide 5
Slide 5 text
• Smaller View Controllers
Slide 6
Slide 6 text
• Smaller View Controllers
• Reusable UI & Logic Components
Slide 7
Slide 7 text
• Smaller View Controllers
• Reusable UI & Logic Components
• Address device fragmentation
Slide 8
Slide 8 text
• Smaller View Controllers
• Reusable UI & Logic Components
• Address device fragmentation
• Decomposition of application code
Slide 9
Slide 9 text
How do they work?
Slide 10
Slide 10 text
Image Credit: Steve Pomeroy | github.com/xxv/android-lifecycle
Slide 11
Slide 11 text
Image Credit: Lars Vogel | vogella.com
Slide 12
Slide 12 text
onViewCreated() onViewStateRestored()
Slide 13
Slide 13 text
Static vs Dynamic
Slide 14
Slide 14 text
Adding Fragments Statically
Slide 15
Slide 15 text
Dynamically Adding Fragments
Instantiation
Rules you must know
Slide 16
Slide 16 text
public MyFragment() {
// Required empty public constructor
}
Default Constructor
Slide 17
Slide 17 text
public static MyFragment newInstance(int position) {
MyFragment fragment = new MyFragment();
Bundle args = new Bundle();
args.putInt(ARG_POSITION, position);
fragment.setArguments(args);
return fragment;
}
New Instances
Slide 18
Slide 18 text
public static MyFragment newInstance(int position) {
MyFragment fragment = new MyFragment();
Bundle args = new Bundle();
args.putInt(KEY_POSITION, position);
fragment.setArguments(args);
return fragment;
}
New Instances
Slide 19
Slide 19 text
Adding a Fragment
MyFragment fragment = MyFragment.newInstance(args);
getFragmentManager().beginTransaction()
.add(R.id.fragment_container, fragment)
.commit();
Slide 20
Slide 20 text
Adding a Fragment
MyFragment fragment = MyFragment.newInstance(args);
getFragmentManager().beginTransaction()
.add(R.id.fragment_container, fragment)
.commit();
Slide 21
Slide 21 text
Replacing a Fragment
MyFragment fragment = MyFragment.newInstance(args);
getFragmentManager().beginTransaction()
.replace(R.id.fragment_container, fragment)
.commit();
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Destruction
Slide 24
Slide 24 text
Image Credit: Lars Vogel | vogella.com
onSaveInstanceState()
Slide 25
Slide 25 text
setRetainInstance(true)
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Retain this fragment across configuration changes.
setRetainInstance(true);
}
Slide 26
Slide 26 text
Examples
Slide 27
Slide 27 text
Dual / Single Pane Design
aka Master / Detail
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Specifying Layouts Based on
Screen Properties
Slide 30
Slide 30 text
Navigation Layout for Phone
Slide 31
Slide 31 text
Detail Layout for Phone
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
List/Detail Layout for Tablet
Slide 34
Slide 34 text
Determining Which Layout to Display
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Dual or Single Pane?
if (findViewById(R.id.puppy_detail_container) != null) {
// The detail container view will be present only in the
// large-screen layouts (res/values-large and
// res/values-sw600dp). If this view is present, then the
// activity should be in two-pane mode.
mTwoPane = true;
... code specific to two pane layout
}
Slide 40
Slide 40 text
Tabbed ViewPager
Using TabLayout
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
The Parent Activity Layout
Slide 43
Slide 43 text
The Parent Activity Layout
Slide 44
Slide 44 text
Setting up our ViewPager
ViewPagerAdapter adapter =
new ViewPagerAdapter(getSupportFragmentManager());
/* add the Fragments to the ViewPagerAdapter */
for(String title : mPuppyTitles) {
adapter.addFrag(PuppyFragment.newInstance(index++), title);
}
mViewPager.setAdapter(adapter);
Slide 45
Slide 45 text
Creating our PuppyFragment
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mPageNumber = getArguments().getInt(ARG_POSITION);
}
}
Slide 46
Slide 46 text
Loading the UI
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.fragment_puppy, container, false);
int imageId = getResources().getIdentifier(mPuppyImages[mPageNumber],
"drawable", getActivity().getPackageName());
ImageView image = (ImageView) view.findViewById(R.id.puppy_picture);
image.setImageResource(imageId);
return view;
}
Slide 47
Slide 47 text
Loading the UI
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.fragment_puppy, container, false);
int imageId = getResources().getIdentifier(mPuppyImages[mPageNumber],
"drawable", getActivity().getPackageName());
ImageView image = (ImageView) view.findViewById(R.id.puppy_picture);
image.setImageResource(imageId);
return view;
}
Slide 48
Slide 48 text
Navigation Drawer
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Fragment fragment = DetailFragment.newInstance(puppy, position);
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
// do replace and commit operation
transaction.replace(R.id.detail_container, fragment).commit();
Slide 52
Slide 52 text
Fragment fragment = DetailFragment.newInstance(puppy, position);
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
// do replace, add to backstack and commit operation
transaction.replace(R.id.detail_container, fragment)
.addToBackStack(“details”) // optional name for this back stack state, or null
.commit();
Slide 53
Slide 53 text
Going Back
• Fragment: popBackStack()
• Activity: onBackPressed()
Slide 54
Slide 54 text
DialogFragment
Slide 55
Slide 55 text
Constructing a DialogFragment
Two ways:
Slide 56
Slide 56 text
Constructing a DialogFragment
Two ways:
@Override onCreateView()
Slide 57
Slide 57 text
Constructing a DialogFragment
Two ways:
@Override onCreateDialog()
@Override onCreateView()
Slide 58
Slide 58 text
public class SampleDialogFragment extends DialogFragment
implements DialogInterface.OnClickListener {
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
View view = getActivity()
.getLayoutInflater()
.inflate(R.layout.fragment_sample_dialog, null);
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
return(builder
.setView(view)
.setTitle(title)
.setPositiveButton(R.string.close, null)
.create());
}
}
Slide 59
Slide 59 text
public class SampleDialogFragment extends DialogFragment
implements DialogInterface.OnClickListener {
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
View view = getActivity()
.getLayoutInflater()
.inflate(R.layout.fragment_sample_dialog, null);
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
return(builder
.setView(view)
.setTitle(title)
.setPositiveButton(R.string.close, null)
.create());
}
}
Slide 60
Slide 60 text
public class SampleDialogFragment extends DialogFragment
implements DialogInterface.OnClickListener {
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
View view = getActivity()
.getLayoutInflater()
.inflate(R.layout.fragment_sample_dialog, null);
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
return(builder
.setView(view)
.setCustomTitle(title)
.setPositiveButton(R.string.close, null)
.create());
}
}
Slide 61
Slide 61 text
Showing your DialogFragment
SampleDialogFragment frag = SampleDialogFragment.newInstance(args);
frag.show(getFragmentManager(), SampleDialogFragment.TAG);
Slide 62
Slide 62 text
return(builder
.setTitle(title)
.setMessage(“Dialog Message”)
.setPositiveButton(R.string.close, null)
.create());
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
Dismissing a DialogFragment
Slide 65
Slide 65 text
Communicating with the
Parent Activity
Slide 66
Slide 66 text
Define an Interface
public interface OnDialogDismissed {
void onDialogDismissed(String whichSalutation);
}
Slide 67
Slide 67 text
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
mDialogDismissedCallback = (OnDialogDismissed)activity;
} catch (ClassCastException cce) {
Log.e("Error", getClass().getSimpleName()
+ ", calling Activity must implement OnDialogDismissed");
}
}
Slide 68
Slide 68 text
public class MainActivity extends AppCompatActivity implements
SampleDialogFragment.OnDialogDismissed {
// ... other methods and implementation not shown
@Override
public void onDialogDismissed(String whichSalutation) {
if (whichSalutation.equals(SampleDialogFragment.GOODBYE)) {
Toast.makeText(this, "Thank you!", Toast.LENGTH_SHORT).show();
}
}
}
Slide 69
Slide 69 text
@Override
public void onClick(DialogInterface dialog, int which) {
// display a toast when the dialog is dismissed for GOODBYE only
if (mSalutation.equals(GOODBYE)) {
mDialogDismissedCallback.onDialogDismissed(GOODBYE);
}
}
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
Thank you
Source Code: github.com/kenodoggy/
Slides: speakerdeck.com/kenodoggy/
Twitter @kenodoggy
g+ +BrendaCook_kenodoggy