Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

The Fragment Transition Workshop

Created for my workshops at AnDevCon Boston, May 2013 and San Francisco, November 2013.
by

Corey Latislaw

on 8 October 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of The Fragment Transition Workshop

Android
Magic
Get XML
Form factor?
Tablet
main.xml
ListFragment
DetailFragment
main.xml
ListFragment
MainActivity::
onCreate()
DetailActivity::
onCreate()
MainActivity::
showDetail()
MainActivity::
update()
No
Yes
Phone
Multi pane?
A History
Legacy code
Landscape
Why?
Busine$$ Case
Why not?
Engineering
Case

bit rot
Obsolete
Start from here
DetailFragment::
onClick()
Note: Default detail view
Multiple Fragments,
Multiple Activities
Fragments
Home Sweet Home
Fragment
Must have a host
@corey_latislaw
Corey Leigh Latislaw
<3
Android
Comcast Interactive Media
...
<
fragment
android:id="@+id/outside_fragment"
android:name="com.colabug.TardisLab.OutsideTardisFragment"
    android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"/>

<
fragment
android:id="@+id/inside_fragment"
android:name="com.colabug.TardisLab.InsideTardisFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"/>
...
Code!
Declare
"phone"
layout
Extend
FragmentActivity
public class HelloTardisActivity
extends FragmentActivity
{
@Override
public void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView(
R.layout.hello_tardis
);
}
}
public class OutsideTardisFragment
extends Fragment
{
@Override
public View onCreateView (LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState)
{
View layout = inflater.inflate(
R.layout.outside_tardis
, container, false);
return layout;
}
}
layout-sw600dp/hello_tardis.xml
<?xml version="1.0" encoding="utf-8"?>

<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/outside_fragment"
android:name="com.colabug.TardisLab.OutsideTardisFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
layout/hello_tardis.xml
HelloTardisActivity.java
3
2
5
Write
fragments
OutsideTardisFragment.java
DetailFragment::
onClick()
1
2
1
2.isInLayout()
Config changes
Back stack
Idea
2 fragments
1
Activity
New
Activity
Update
Start
Add
Remove
"Sub activity"
Replace
Transaction
Transition
Record
Honeycomb
Manager
sevaeunplugged.wordpress.com/2011/09/13/ostrich-therapy
Lead or follow?
3.0
API 11
Fragment1
Fragment2
Independent
Modular
Flexible
Combine
Reuse
form factors
Remix
Investment
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/outside_tardis"/>
outside_tardis.xml
setContentView(R.layout.main);
main.xml
MyActivity.java
WelcomeFragment.java
welcome.xml
inflater.inflate(R.layout.welcome, container, false);
<TextView/>
<fragment
android:name="com.example.WelcomeFragment"/>
Fragments
Activity
Technical debt
Training
Schedule
New
Refactor
Opportunity
Low Risk
It ain't broke
million activations
downloaded
900
48
Tablets won't catch on
stackoverflow.com/questions/5695408/so-what-are-the-exact-advantages-of-fragments-in-android-3-0
The Fragment
Idea
Top Android Developer
~5 million downloads
Upgrading
Extend
FragmentActivity
Create new fragments and copy activity code
3
4
5
onCreate() ->
onCreateView()
6
11
-import android.app.Activity;
+import android.support.v4.app.FragmentActivity;

public class HelloTardisActivity
- extends Activity {...}
+ extends FragmentActivity {...}
HelloTardisActivity.java
+import android.support.v4.app.Fragment;

+public class InsideTardisFragment extends Fragment
+{

// Activity's code
+}
InsideTardisFragment.java
-public void onCreate( Bundle bundle )
+public View onCreateView( LayoutInflater inflater,
+ ViewGroup container,
+ Bundle savedInstanceState )
{
- super.onCreate( savedInstanceState );
}
OutsideTardisFragment.java
InsideTardisFragment.java
Fix compile
errors &
other issues
Inflate XML and return layout
OutsideTardisFragment.java
How?
Use layout to get access to view
Add empty public constructors
Prepend getActivity()
Great time for a refactor!
Rethink UI
Disentangle logic
-setContentView( R.layout.outside_tardis );
+setContentView( R.layout.hello_tardis );

<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.colabug.TardisNoFragments.OutsideTardisFragment"/>
hello_tardis.xml
HelloTardisActivity.java
7
Create layout files and set activity views
We are
here!
detail.xml
DetailFragment
Start from scratch
Full renovation
2.5
billion apps
downloaded monthly
Leadership
droiddog.com/android-blog/2011/03/2011-the-year-of-fierce-competition/honeycomb-bee-550x550-e1296765261166/
Code reuse
Manage multiple screens
No monolithic activities
Best Practice
Fragment
Approaches
public showDetail() {
    // Update current view
if (isMultiPane())
{
update();
}
// Start new activity
else
{
startDetailActivity();
}
}
  public boolean isMultiPaneLayout()
{
FragmentManager fragmentManager =
getSupportFragmentManager();
Fragment detailFragment = fragmentManager.
findFragmentById
( R.id.detail_fragment );
return detailFragment != null &&
detailFragment.
isInLayout
() &&
detailFragment.
isVisible
()
}
ListFragment::
onClick()
MainActivity::
startDetail()
Alliance
Transition
HowAboutWe
WXPN
May 93.8%
Pre-Honeycomb
28.0%
androidpolice.com/tags/comcast
play.google.com/store/apps/details?id=com.xfinity.tv
Philly ETE
Nov 72.6%
Lab: https://github.com/colabug/TardisNoFragments
1
2
Integrate
support
library
Change
Target
SDK
http://developer.android.com/tools/extras/support-library.html
Make libs/ directory
which android #Use basename
cp <sdk>/extras/android/support/v4/android-support-v4.jar libs
Eclipse: Right-click the JAR file in the Package Explorer
Select Build Path > Add to Build Path.
Integrate
Copy jar
Build path
Upgrade Lab
https://github.com/colabug/TardisNoFragments
Lab: Fresh
Lab: https://github.com/colabug/TardisLab
Install
-<uses-sdk android:minSdkVersion="4"/>
+<uses-sdk
+ android:minSdkVersion="4"
+ android:targetSdkVersion="11"/>
AndroidManifest.xml
InsideTardisActivty.java
TardisPreFragmentsActivity.java
+import android.support.v4.app.Fragment;

+public class OutsideTardisFragment extends Fragment
+{

// Activity's code
+}
OutsideTardisFragment.java
-import android.app.Activity;
+import android.support.v4.app.FragmentActivity;

public class InsideTardisActivity
- extends Activity {...}
+ extends FragmentActivity {...}
InsideTardisActivity.java
2
Update target SDK
-setContentView( R.layout.inside_tardis );
+View layout = inflater.inflate( R.layout.inside_tardis,
+ container,
+ false );
+return layout;
InsideTardisFragment.java
-setContentView( R.layout.outside_tardis );
+View layout = inflater.inflate( R.layout.outside_tardis,
+ container,
+ false );
+return layout;
OutsideTardisFragment.java
-View tardisImage = findViewById( R.id.tardis_image );
-tardisImage.setOnClickListener( new View.OnClickListener() { ... }
-private void enterTardis() {...}
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">

<fragment
android:name="com.colabug.TardisNoFragments.OutsideTardisFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"/>

<fragment
android:name="com.colabug.TardisNoFragments.IndsideTardisFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
hello_tardis.xml
Create res/layout-sw600dp folder
Use same file name (hello_tardis) to create tablet layout
steps->
What?
What + Why + How?
1
Integrate
support
library
http://developer.android.com/tools/extras/support-library.html
Make libs/ directory
which android #Use basename
cp <sdk>/extras/android/support/v4/android-support-v4.jar libs
Eclipse: Right-click the JAR file in the Package Explorer
Select Build Path > Add to Build Path.
Integrate
Copy jar
Build path
Install
Declare
"tablet"
layout
4
Add
click
listener
6
public class InsideTardisFragment
extends Fragment
{
@Override
public View onCreateView (LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState)
{
View layout = inflater.inflate(
R.layout.inside_tardis
, container, false);
return layout;
}
}
InsideTardisFragment.java
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/inside_tardis"/>
inside_tardis.xml
Create
phone-only
activity
7
Behave
properly
8
...
public void onClick() {
// "Tablet"
if (
isMultiPaneLayout
() )
{
// Toast
}
// "Phone"
else
{
startActivity( InsideTardisActivity.createIntent( HelloTardisActivity.this ) );
} ...

private boolean isMultiPaneLayout()
{
Fragment insideFragment =
getSupportFragmentManager()
.findFragmentById( R.id.inside_fragment )
;
return insideFragment != null &&

insideFragment.isInLayout()
&&

insideFragment.isVisible()
;
}
HelloTardisActivity.java
public class InsideTardisActivity extends
FragmentActivity
{
@Override
protected void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView(
R.layout.inside_tardis_single_pane
);
}

public static Intent
createIntent(
Context context )
{
return new Intent( context, InsideTardisActivity.class );
}
}
InsideTardisActivity.java
Options
v4 supports API 4+ (Donut, 1.6+)
v13 support API 13+ (Honeycomb, 3.2+)
Framework only API 11+ (Honeycomb, 3.0+)
http://developer.android.com/reference/android/support/v4/app/package-summary.html
http://developer.android.com/reference/android/support/v13/app/package-summary.html
http://developer.android.com/about/dashboards/index.html
+ Fragment fragment = getSupportFragmentManager().findFragmentById( R.id.outside_fragment );
+ fragment.getView().setOnClickListener( generateOutsideClickListener() );
HelloTardisActivity.java
Idea
2 fragments
1
Activity
New
Activity
Update
Start
Use Holo
9
<uses-sdk
android:minSdkVersion="4"

android:targetSdkVersion="11"
/>
AndroidManifest.xml
-setContentView( R.layout.inside_tardis );
+setContentView( R.layout.inside_tardis_single_pane );
InsideTardisActivity.java

<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.colabug.TardisNoFragments.InsideTardisFragment"/>
inside_tardis_single_pane.xml
8
Clean up
9
Make tablet layout
Handle clicking
10
public class HelloTardisActivity extends FragmentActivity
{
@Override
public void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView( R.layout.hello_tardis );

View tardisImage = findViewById( R.id.tardis_image );
tardisImage.setOnClickListener( generateOutsideClickListener() );
}

private View.OnClickListener generateOutsideClickListener()
{
return new View.OnClickListener()
{
@Override
public void onClick( View view )
{
// "Tablet"
if (
isMultiPaneLayout
() )
{
Toast.makeText( HelloTardisActivity.this,
"PARADOX",
Toast.LENGTH_SHORT ).show();
}
// "Phone"
else
{
startActivity( InsideTardisActivity.createIntent( HelloTardisActivity.this ) );
}
}
};
}

private boolean isMultiPaneLayout()
{
Fragment insideFragment = getSupportFragmentManager().findFragmentById(
R.id.inside_fragment );
return insideFragment != null &&
insideFragment.isInLayout() &&
insideFragment.isVisible();
}
}
InsideTardisFragment.java
-public static Intent createIntent( Context context )
-{
- return new Intent( context, InsideTardisActivity.class );
-}
<?xml version="1.0" encoding="utf-8"?>

<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/inside_fragment"
android:name="com.colabug.TardisLab.InsideTardisFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
layout/inside_tardis_single_pane.xml
Snippets: http://tinyurl.com/FragmentTransitionSnippets
Snippets: http://tinyurl.com/FragmentTransitionSnippets
Boston: http://tinyurl.com/fragment-transition
billionapps
http://thenextweb.com/insider/2013/05/15/everything-announced-at-the-google-io-2013-keynote-in-one-handy-list/
Grassroots Unwired
grassrootsunwired.com
Music Choice
Who are you?
May '13 44.0%
Prediction: ~70% global tablet users will be Android by 2016
http://marketingland.com/study-android-tablet-users-surpass-ipad-users-by-34m-in-q1-with-tablet-usage-up-282-since-2011-2-47740
http://coreylatislaw.com/andevcon-san-francisco-2013/
http://tinyurl.com/fragment-transition-sfo
Full transcript