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