MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

29
MobAppDev More on Fragments Vladimir Kulyukin www.vkedco.blogspot.com

description

 

Transcript of MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Page 1: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

MobAppDev

More on Fragments

Vladimir Kulyukin

www.vkedco.blogspot.com

Page 2: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Outline

● Fragments & Activities● Fragment Use● Fragment's Callbacks● Deep Code Dive into Fragments with & w/o

Videos

Page 3: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragments & Activities

Page 4: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment Lifecycle

source image at http://developer.android.com/guide/components/fragments.html

Page 5: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Activity vs Fragment Lifecycles

source image at http://developer.android.com/guide/components/fragments.html

Page 6: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragments As Sub-Activities

● Fragments can be viewed as sub-activities● As the sizes of mobile screens grew larger, mobile

developers wanted to run multiple activities on the same screen

● Running multiple activities on the same screen was the main motivation for the development of fragments

Page 7: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragments & Activities Side by Side

● Fragments are contained within a specific activity● Fragments exists only in the context of a specific activity● Fragments cannot be used without a specific activity● There is NO need to convert all activity widgets into

fragments: fragments can exist with other widgets● Fragments differ from activities in terms of saving and

restoring states

Page 8: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragments & Activities Side By Side● Activity is a subclass of Context● Fragment is not an extension of Activity, it is a subclass

of Object● Fragments can have a view hierarchy to interact with

the user● Fragment's view hierarchy must attach to the view

hierarchy of its activity

Page 9: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragments & Back Button● When the user presses the back button in an activity,

the user is taken out of that activity: onPause() & onStop() are called

● If an activity has fragments, active fragments can pile up on a fragment stack

● When the user presses the back button in a fragment, the user is not taken out of the activity but remains in its context

Page 10: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment Use

● If there is a UI component/functionality that can be used on multiple devices and multiple screen sizes: fragments can be attached to activities on large screens and detached from activities on small screens

● If there is a UI component/functionality that must work in multiple rotation modes, e.g., landscape vs. portrait

● Each fragment may have its own layout

Page 11: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment Construction● Fragments receive Bundle objects as their initialization arguments

● Fragments can be saved and restored by the system automatically: the developer must override onSaveInstanceState(Bundle)

● When the system restores the fragment, it calls the default constructor and then passes the Bundle to the constructed Fragment: this Bundle is passed to onCreate(), onInflate(), onCreateView(), and onActivityCreated()

● It is important to remember that the initialization Bundle (the one used in fragment construction) and the restoration Bundle (the one used in onSaveInstanceState()) are two different objects

Page 12: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Developer's Impertatives● When developing a fragment, the developer must

Define a default constructor: static newInstance() method

Add a bundle of arguments to the constructed fragments

Use the bundle's values in fragment callbacks to restore the fragment's state

Page 13: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment's Parent Activity● Activity uses a FragmentManager to manage its

fragment● Since a Fragment exists only in the context of a specific

Activity, it can get to its FragmentManager● Since a Fragment exists only in the context of a specific

Activity, it can get to its parent Activity's resources (e.g., through the parent Activity's Resources object)

Page 14: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment's Callbacks

Page 15: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment's Callbacks● Constructors: newInstace() & newInstance(Bundle)● onInflate(): layout view inflation if one is specified● onAttach(): is called after fragment is associated with its

parent Activity● onCreate(): code that relies on the existence of the activity's

view hierarchy● onCreateView(): constructs and returns the view of the

fragment

Page 16: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment's Callbacks● onActivityCreated(): called when the parent's activity completes its

onCreate(); activity's view and the fragment's view have now been fully constructed

● onStart(): The fragment is now visible to the user● onPause(): this callback occurs simultaneously with the parent's

onPause()● onSaveInstanceState(): this method takes a Bundle object that is

persisted by Android and passed to a restored Fragment

Page 17: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Fragment's Callbacks● onStop(): this method is tied to the parent's onStop() called when

the parent's activity completes its onCreate(); activity's view and the fragment's view have now been fully constructed

● onDestroyView(): This method is called when the view created in onCreateView() is being destroyed

● onDestroy(): the fragment has no view, but is still findable● onDetach(): this method is called to untie the fragment from the

parent's activity; all its resources should be released

Page 18: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Deep Code Dive

Rumi's Quatrains in Fragments with & without Videos

Page 19: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Application Requirements

● Develop two applications that use fragments to display texts of several quatrains by Rumi

● Both applications should work in two modes: landscape and portrait● In portrait mode, only one quatrain can be displayed● In landscape mode, the user can select the quatrains to display● The second application should, in addition to displaying quatrain

texts, play specific videos

Page 20: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Source Code

● Source code of the first application is at https://github.com/VKEDCO/Fragments/tree/master/RumiQuatrainFragments

● Source code of the second application is at

https://github.com/VKEDCO/Fragments/tree/master/RumiQuatrainVideoFragments

● The repos contain only the source code (Java and XML files) not Eclipse projects; the projects were too large, especially the 2nd one with videos, so I decided not to upload projects to save space

Page 21: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Application Class Contents

● RumiQuatrainMainActivity.java – main activity● QuatrainNumberListFragment.java – ListFragment associated with

main activity● QuatrainTextDisplayActivity.java – host activity for

QuatrainTextDisplayFragment.java● QuatrainTextDisplayFragment.java – fragment to display quatrain

texts● The texts of the quatrains and their numbers are in quatrains.xml

Page 22: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

RumiQuatrainMainActivity.java

● The real workhorse of is displayQuatrainText(int quatrain_index)● It finds a fragment by id and replaces it with a newly created fragment● It also shows how to check the orientation● If the orientation is landscape, then two fragments are displayed● If the orientation is portrait, then a new activity is launched

Page 23: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Sample Screenshots

landscape

portrait

Page 24: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Landscape Mode of RumiQuatrainMainActivity.java

landscape

Page 25: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Landscape Mode in XML<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#555555">

<fragment class="org.vkedco.mobappdev.rumi_quatrain_fragments.QuatrainNumberListFragment"

android:id="@+id/quatrain_number_list" android:layout_weight="1"

android:layout_width="0px"

android:layout_height="match_parent"

android:background="#00550033" />

<FrameLayout

android:id="@+id/quatrain_text" android:layout_weight="2"

android:layout_width="0px"

android:layout_height="match_parent" />

</LinearLayout>

Page 26: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Portrait Mode of RumiQuatrainMainActivity.java

Page 27: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

Portrait Mode in XML<?xml version="1.0" encoding="utf-8"?>

<!-- This file is res/layout/main.xml -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<fragment class="org.vkedco.mobappdev.rumi_quatrain_fragments.QuatrainNumberListFragment"

android:id="@+id/quatrain_number_list"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

Page 28: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

XML Layout of QuatrainTextDisplayFragment <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="match_parent" >

<RelativeLayout

android:layout_width="wrap_content"

android:layout_height="match_parent" >

<ScrollView

android:id="@+id/scvQuatrainText"

android:layout_width="match_parent"

android:layout_height="150dp" >

<TextView

android:id="@+id/tvQuatrainText"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</ScrollView>

</RelativeLayout>

</LinearLayout>

Page 29: MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos

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

● S. Komatineni & D. MaClean. Pro Android 4. APRESS

● R. Meier. Pro Android 4 Application Development. WROX