Merge "docs: for AU basic training on fragments including ZIP for sample app" into ics-mr1

13 files changed, 1538 insertions, 0 deletions

diff --git a/docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Preview.pdf b/docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Preview.pdf
new file mode 100644
index 0000000..19ccd0f
--- /dev/null
+++ b/docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Preview.pdf
diff --git a/docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Thumbnail.tiff b/docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Thumbnail.tiff
new file mode 100644
index 0000000..8d5c9c6
--- /dev/null
+++ b/docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Thumbnail.tiff
diff --git a/docs/html/images/training/basics/fragments-screen-mock.graffle/data.plist b/docs/html/images/training/basics/fragments-screen-mock.graffle/data.plist
new file mode 100644
index 0000000..5602c16
--- /dev/null
+++ b/docs/html/images/training/basics/fragments-screen-mock.graffle/data.plist
@@ -0,0 +1,848 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>ActiveLayerIndex</key>
+	<integer>0</integer>
+	<key>ApplicationVersion</key>
+	<array>
+		<string>com.omnigroup.OmniGrafflePro</string>
+		<string>138.9.0.117994</string>
+	</array>
+	<key>AutoAdjust</key>
+	<true/>
+	<key>BackgroundGraphic</key>
+	<dict>
+		<key>Bounds</key>
+		<string>{{0, 0}, {1152, 733}}</string>
+		<key>Class</key>
+		<string>SolidGraphic</string>
+		<key>ID</key>
+		<integer>2</integer>
+		<key>Style</key>
+		<dict>
+			<key>shadow</key>
+			<dict>
+				<key>Draws</key>
+				<string>NO</string>
+			</dict>
+			<key>stroke</key>
+			<dict>
+				<key>Draws</key>
+				<string>NO</string>
+			</dict>
+		</dict>
+	</dict>
+	<key>CanvasOrigin</key>
+	<string>{0, 0}</string>
+	<key>ColumnAlign</key>
+	<integer>1</integer>
+	<key>ColumnSpacing</key>
+	<real>36</real>
+	<key>CreationDate</key>
+	<string>2012-03-20 17:38:46 -0700</string>
+	<key>Creator</key>
+	<string>Billy Rutledge</string>
+	<key>DisplayScale</key>
+	<string>1 0/72 in = 1.0000 in</string>
+	<key>GraphDocumentVersion</key>
+	<integer>6</integer>
+	<key>GraphicsList</key>
+	<array>
+		<dict>
+			<key>Class</key>
+			<string>LineGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Font</key>
+				<string>DroidSans</string>
+				<key>Size</key>
+				<real>11</real>
+			</dict>
+			<key>Head</key>
+			<dict>
+				<key>ID</key>
+				<integer>1205</integer>
+			</dict>
+			<key>ID</key>
+			<integer>196</integer>
+			<key>OrthogonalBarAutomatic</key>
+			<false/>
+			<key>OrthogonalBarPosition</key>
+			<real>4.1290435791015625</real>
+			<key>Points</key>
+			<array>
+				<string>{457.98, 171.696}</string>
+				<string>{490.023, 171.696}</string>
+			</array>
+			<key>Style</key>
+			<dict>
+				<key>stroke</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>a</key>
+						<string>0.7</string>
+						<key>b</key>
+						<string>0</string>
+						<key>g</key>
+						<string>0</string>
+						<key>r</key>
+						<string>0</string>
+					</dict>
+					<key>CornerRadius</key>
+					<real>4</real>
+					<key>HeadArrow</key>
+					<string>FilledArrow</string>
+					<key>LineType</key>
+					<integer>2</integer>
+					<key>TailArrow</key>
+					<string>0</string>
+				</dict>
+			</dict>
+			<key>Tail</key>
+			<dict>
+				<key>ID</key>
+				<integer>1202</integer>
+				<key>Info</key>
+				<integer>3</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{500.158, 103.347}, {73.0685, 120.722}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>b</key>
+					<string>0</string>
+					<key>g</key>
+					<string>0</string>
+					<key>r</key>
+					<string>0</string>
+				</dict>
+				<key>Font</key>
+				<string>DroidSans-Bold</string>
+				<key>Size</key>
+				<real>10</real>
+			</dict>
+			<key>ID</key>
+			<integer>1206</integer>
+			<key>Magnets</key>
+			<array>
+				<string>{1, 1}</string>
+				<string>{1, -1}</string>
+				<string>{-1, -1}</string>
+				<string>{-1, 1}</string>
+				<string>{0, 1}</string>
+				<string>{0, -1}</string>
+				<string>{1, 0}</string>
+				<string>{-1, 0}</string>
+				<string>{-0.5, -0.233518}</string>
+				<string>{-0.491442, 0.260063}</string>
+				<string>{0.507118, -0.224086}</string>
+				<string>{0.507118, 0.267179}</string>
+				<string>{-0.27431, -0.474028}</string>
+				<string>{0.27978, -0.478478}</string>
+				<string>{0.293938, 0.543044}</string>
+				<string>{-0.286232, 0.553804}</string>
+			</array>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.628571</string>
+						<key>g</key>
+						<string>0.768599</string>
+						<key>r</key>
+						<string>1</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.236788</string>
+						<key>g</key>
+						<string>0.532236</string>
+						<key>r</key>
+						<string>0.990271</string>
+					</dict>
+				</dict>
+				<key>shadow</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>a</key>
+						<string>0.35</string>
+						<key>b</key>
+						<string>0</string>
+						<key>g</key>
+						<string>0</string>
+						<key>r</key>
+						<string>0</string>
+					</dict>
+					<key>Fuzziness</key>
+					<real>2.3972222805023193</real>
+					<key>ShadowVector</key>
+					<string>{0, 1}</string>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.131021</string>
+						<key>g</key>
+						<string>0.363196</string>
+						<key>r</key>
+						<string>0.725948</string>
+					</dict>
+					<key>CornerRadius</key>
+					<real>3</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
+{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
+
+\f0\fs24 \cf0 Fragment B}</string>
+				<key>VerticalPad</key>
+				<integer>0</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{490.023, 82.3917}, {93.3371, 178.608}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>ID</key>
+			<integer>1205</integer>
+			<key>ImageID</key>
+			<integer>2</integer>
+			<key>Magnets</key>
+			<array>
+				<string>{0, 1}</string>
+				<string>{0, -1}</string>
+				<string>{1, 0}</string>
+				<string>{-1, 0}</string>
+			</array>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+				<key>shadow</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{99.4737, 58.4729}, {223.971, 183.465}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>b</key>
+					<string>0</string>
+					<key>g</key>
+					<string>0</string>
+					<key>r</key>
+					<string>0</string>
+				</dict>
+				<key>Font</key>
+				<string>DroidSans-Bold</string>
+				<key>Size</key>
+				<real>10</real>
+			</dict>
+			<key>ID</key>
+			<integer>200</integer>
+			<key>Magnets</key>
+			<array>
+				<string>{1, 1}</string>
+				<string>{1, -1}</string>
+				<string>{-1, -1}</string>
+				<string>{-1, 1}</string>
+				<string>{0, 1}</string>
+				<string>{0, -1}</string>
+				<string>{1, 0}</string>
+				<string>{-1, 0}</string>
+				<string>{-0.5, -0.233518}</string>
+				<string>{-0.491442, 0.260063}</string>
+				<string>{0.507118, -0.224086}</string>
+				<string>{0.507118, 0.267179}</string>
+				<string>{-0.27431, -0.474028}</string>
+				<string>{0.27978, -0.478478}</string>
+				<string>{0.293938, 0.543044}</string>
+				<string>{-0.286232, 0.553804}</string>
+			</array>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.628571</string>
+						<key>g</key>
+						<string>0.768599</string>
+						<key>r</key>
+						<string>1</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.236788</string>
+						<key>g</key>
+						<string>0.532236</string>
+						<key>r</key>
+						<string>0.990271</string>
+					</dict>
+				</dict>
+				<key>shadow</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>a</key>
+						<string>0.35</string>
+						<key>b</key>
+						<string>0</string>
+						<key>g</key>
+						<string>0</string>
+						<key>r</key>
+						<string>0</string>
+					</dict>
+					<key>Fuzziness</key>
+					<real>2.3972222805023193</real>
+					<key>ShadowVector</key>
+					<string>{0, 1}</string>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.131021</string>
+						<key>g</key>
+						<string>0.363196</string>
+						<key>r</key>
+						<string>0.725948</string>
+					</dict>
+					<key>CornerRadius</key>
+					<real>3</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
+{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
+
+\f0\fs24 \cf0 Fragment B}</string>
+				<key>VerticalPad</key>
+				<integer>0</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{24.8166, 58.4729}, {73.0685, 183.465}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>b</key>
+					<string>0</string>
+					<key>g</key>
+					<string>0</string>
+					<key>r</key>
+					<string>0</string>
+				</dict>
+				<key>Font</key>
+				<string>DroidSans-Bold</string>
+				<key>Size</key>
+				<real>10</real>
+			</dict>
+			<key>ID</key>
+			<integer>1203</integer>
+			<key>Magnets</key>
+			<array>
+				<string>{1, 1}</string>
+				<string>{1, -1}</string>
+				<string>{-1, -1}</string>
+				<string>{-1, 1}</string>
+				<string>{0, 1}</string>
+				<string>{0, -1}</string>
+				<string>{1, 0}</string>
+				<string>{-1, 0}</string>
+				<string>{-0.5, -0.233518}</string>
+				<string>{-0.491442, 0.260063}</string>
+				<string>{0.507118, -0.224086}</string>
+				<string>{0.507118, 0.267179}</string>
+				<string>{-0.27431, -0.474028}</string>
+				<string>{0.27978, -0.478478}</string>
+				<string>{0.293938, 0.543044}</string>
+				<string>{-0.286232, 0.553804}</string>
+			</array>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.874135</string>
+						<key>r</key>
+						<string>0.71718</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.662438</string>
+						<key>r</key>
+						<string>0.464468</string>
+					</dict>
+				</dict>
+				<key>shadow</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>a</key>
+						<string>0.35</string>
+						<key>b</key>
+						<string>0</string>
+						<key>g</key>
+						<string>0</string>
+						<key>r</key>
+						<string>0</string>
+					</dict>
+					<key>Fuzziness</key>
+					<real>2.3972222805023193</real>
+					<key>ShadowVector</key>
+					<string>{0, 1}</string>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.93512</string>
+						<key>g</key>
+						<string>0.472602</string>
+						<key>r</key>
+						<string>0.333854</string>
+					</dict>
+					<key>CornerRadius</key>
+					<real>3</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
+{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
+
+\f0\fs24 \cf0 Fragment A}</string>
+				<key>VerticalPad</key>
+				<integer>0</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{374.205, 103.347}, {73.0685, 120.722}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>b</key>
+					<string>0</string>
+					<key>g</key>
+					<string>0</string>
+					<key>r</key>
+					<string>0</string>
+				</dict>
+				<key>Font</key>
+				<string>DroidSans-Bold</string>
+				<key>Size</key>
+				<real>10</real>
+			</dict>
+			<key>ID</key>
+			<integer>157</integer>
+			<key>Magnets</key>
+			<array>
+				<string>{1, 1}</string>
+				<string>{1, -1}</string>
+				<string>{-1, -1}</string>
+				<string>{-1, 1}</string>
+				<string>{0, 1}</string>
+				<string>{0, -1}</string>
+				<string>{1, 0}</string>
+				<string>{-1, 0}</string>
+				<string>{-0.5, -0.233518}</string>
+				<string>{-0.491442, 0.260063}</string>
+				<string>{0.507118, -0.224086}</string>
+				<string>{0.507118, 0.267179}</string>
+				<string>{-0.27431, -0.474028}</string>
+				<string>{0.27978, -0.478478}</string>
+				<string>{0.293938, 0.543044}</string>
+				<string>{-0.286232, 0.553804}</string>
+			</array>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.874135</string>
+						<key>r</key>
+						<string>0.71718</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.662438</string>
+						<key>r</key>
+						<string>0.464468</string>
+					</dict>
+				</dict>
+				<key>shadow</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>a</key>
+						<string>0.35</string>
+						<key>b</key>
+						<string>0</string>
+						<key>g</key>
+						<string>0</string>
+						<key>r</key>
+						<string>0</string>
+					</dict>
+					<key>Fuzziness</key>
+					<real>2.3972222805023193</real>
+					<key>ShadowVector</key>
+					<string>{0, 1}</string>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.93512</string>
+						<key>g</key>
+						<string>0.472602</string>
+						<key>r</key>
+						<string>0.333854</string>
+					</dict>
+					<key>CornerRadius</key>
+					<real>3</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
+{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
+
+\f0\fs24 \cf0 Fragment A}</string>
+				<key>VerticalPad</key>
+				<integer>0</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{364.643, 82.3917}, {93.3371, 178.608}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>ID</key>
+			<integer>1202</integer>
+			<key>ImageID</key>
+			<integer>2</integer>
+			<key>Magnets</key>
+			<array>
+				<string>{0, 1}</string>
+				<string>{0, -1}</string>
+				<string>{1, 0}</string>
+				<string>{-1, 0}</string>
+			</array>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+				<key>shadow</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{6.54947, 41}, {335.776, 220}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>ID</key>
+			<integer>1201</integer>
+			<key>ImageID</key>
+			<integer>1</integer>
+			<key>Magnets</key>
+			<array>
+				<string>{0, 1}</string>
+				<string>{0, -1}</string>
+				<string>{1, 0}</string>
+				<string>{-1, 0}</string>
+			</array>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+				<key>shadow</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Draws</key>
+					<string>NO</string>
+				</dict>
+			</dict>
+		</dict>
+	</array>
+	<key>GridInfo</key>
+	<dict/>
+	<key>GuidesLocked</key>
+	<string>NO</string>
+	<key>GuidesVisible</key>
+	<string>YES</string>
+	<key>HPages</key>
+	<integer>2</integer>
+	<key>ImageCounter</key>
+	<integer>3</integer>
+	<key>ImageLinkBack</key>
+	<array>
+		<dict/>
+		<dict/>
+	</array>
+	<key>ImageList</key>
+	<array>
+		<string>image2.png</string>
+		<string>image1.png</string>
+	</array>
+	<key>KeepToScale</key>
+	<false/>
+	<key>Layers</key>
+	<array>
+		<dict>
+			<key>Lock</key>
+			<string>NO</string>
+			<key>Name</key>
+			<string>Layer 1</string>
+			<key>Print</key>
+			<string>YES</string>
+			<key>View</key>
+			<string>YES</string>
+		</dict>
+	</array>
+	<key>LayoutInfo</key>
+	<dict>
+		<key>Animate</key>
+		<string>NO</string>
+		<key>circoMinDist</key>
+		<real>18</real>
+		<key>circoSeparation</key>
+		<real>0.0</real>
+		<key>layoutEngine</key>
+		<string>dot</string>
+		<key>neatoSeparation</key>
+		<real>0.0</real>
+		<key>twopiSeparation</key>
+		<real>0.0</real>
+	</dict>
+	<key>LinksVisible</key>
+	<string>NO</string>
+	<key>MagnetsVisible</key>
+	<string>NO</string>
+	<key>MasterSheets</key>
+	<array/>
+	<key>ModificationDate</key>
+	<string>2012-04-17 18:01:13 -0700</string>
+	<key>Modifier</key>
+	<string>Scott Main</string>
+	<key>NotesVisible</key>
+	<string>NO</string>
+	<key>Orientation</key>
+	<integer>2</integer>
+	<key>OriginVisible</key>
+	<string>NO</string>
+	<key>PageBreaks</key>
+	<string>YES</string>
+	<key>PrintInfo</key>
+	<dict>
+		<key>NSBottomMargin</key>
+		<array>
+			<string>float</string>
+			<string>41</string>
+		</array>
+		<key>NSLeftMargin</key>
+		<array>
+			<string>float</string>
+			<string>18</string>
+		</array>
+		<key>NSPaperSize</key>
+		<array>
+			<string>size</string>
+			<string>{612, 792}</string>
+		</array>
+		<key>NSRightMargin</key>
+		<array>
+			<string>float</string>
+			<string>18</string>
+		</array>
+		<key>NSTopMargin</key>
+		<array>
+			<string>float</string>
+			<string>18</string>
+		</array>
+	</dict>
+	<key>PrintOnePage</key>
+	<false/>
+	<key>ReadOnly</key>
+	<string>NO</string>
+	<key>RowAlign</key>
+	<integer>1</integer>
+	<key>RowSpacing</key>
+	<real>36</real>
+	<key>SheetTitle</key>
+	<string>Canvas 1</string>
+	<key>SmartAlignmentGuidesActive</key>
+	<string>YES</string>
+	<key>SmartDistanceGuidesActive</key>
+	<string>YES</string>
+	<key>UniqueID</key>
+	<integer>1</integer>
+	<key>UseEntirePage</key>
+	<false/>
+	<key>VPages</key>
+	<integer>1</integer>
+	<key>WindowInfo</key>
+	<dict>
+		<key>CurrentSheet</key>
+		<integer>0</integer>
+		<key>ExpandedCanvases</key>
+		<array>
+			<dict>
+				<key>name</key>
+				<string>Canvas 1</string>
+			</dict>
+		</array>
+		<key>Frame</key>
+		<string>{{189, -8}, {1214, 874}}</string>
+		<key>ListView</key>
+		<true/>
+		<key>OutlineWidth</key>
+		<integer>142</integer>
+		<key>RightSidebar</key>
+		<false/>
+		<key>ShowRuler</key>
+		<true/>
+		<key>Sidebar</key>
+		<true/>
+		<key>SidebarWidth</key>
+		<integer>120</integer>
+		<key>VisibleRegion</key>
+		<string>{{0, 2}, {1065, 705}}</string>
+		<key>Zoom</key>
+		<real>1</real>
+		<key>ZoomValues</key>
+		<array>
+			<array>
+				<string>Canvas 1</string>
+				<real>1</real>
+				<real>1</real>
+			</array>
+		</array>
+	</dict>
+	<key>saveQuickLookFiles</key>
+	<string>YES</string>
+</dict>
+</plist>
diff --git a/docs/html/images/training/basics/fragments-screen-mock.graffle/image1.png b/docs/html/images/training/basics/fragments-screen-mock.graffle/image1.png
new file mode 100644
index 0000000..80baf14
--- /dev/null
+++ b/docs/html/images/training/basics/fragments-screen-mock.graffle/image1.png
diff --git a/docs/html/images/training/basics/fragments-screen-mock.graffle/image2.png b/docs/html/images/training/basics/fragments-screen-mock.graffle/image2.png
new file mode 100644
index 0000000..f478d16
--- /dev/null
+++ b/docs/html/images/training/basics/fragments-screen-mock.graffle/image2.png
diff --git a/docs/html/images/training/basics/fragments-screen-mock.png b/docs/html/images/training/basics/fragments-screen-mock.png
new file mode 100644
index 0000000..b170921
--- /dev/null
+++ b/docs/html/images/training/basics/fragments-screen-mock.png
diff --git a/docs/html/images/training/basics/sdk-manager.png b/docs/html/images/training/basics/sdk-manager.png
new file mode 100644
index 0000000..282318d
--- /dev/null
+++ b/docs/html/images/training/basics/sdk-manager.png
diff --git a/docs/html/shareables/training/FragmentBasics.zip b/docs/html/shareables/training/FragmentBasics.zip
new file mode 100644
index 0000000..ff5b7f1
--- /dev/null
+++ b/docs/html/shareables/training/FragmentBasics.zip
diff --git a/docs/html/training/basics/fragments/communicating.jd b/docs/html/training/basics/fragments/communicating.jd
new file mode 100644
index 0000000..b2292b1
--- /dev/null
+++ b/docs/html/training/basics/fragments/communicating.jd
@@ -0,0 +1,179 @@
+page.title=Communicating with Other Fragments
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+previous.title=Building a Flexible UI
+previous.link=fragment-ui.html 
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb"> 
+    <h2>This lesson teaches you to</h2>
+<ol>
+  <li><a href="#DefineInterface">Define an Interface</a></li>
+  <li><a href="#Implement">Implement the Interface</a></li>
+  <li><a href="#Deliver">Deliver a Message to a Fragment</a></li>
+</ol>
+    
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+    </ul>
+
+<h2>Try it out</h2>
+
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+  </div>
+</div>
+
+<p>In order to reuse the Fragment UI components, you should build each as a completely 
+self-contained, modular component that defines its own layout and behavior.  Once you 
+have defined these reusable Fragments, you can associate them with an Activity and 
+connect them with the application logic to realize the overall composite UI.</p>
+
+<p>Often you will want one Fragment to communicate with another, for example to change 
+the content based on a user event.  All Fragment-to-Fragment communication is done 
+through the associated Activity.  Two Fragments should never communicate directly.</p>
+
+
+<h2 id="DefineInterface">Define an Interface</h2>
+
+<p>To allow a Fragment to communicate up to its Activity, you can define an interface 
+in the Fragment class and implement it within the Activity.  The Fragment captures 
+the interface implementation during its onAttach() lifecycle method and can then call 
+the Interface methods in order to communicate with the Activity.</p>
+
+<p>Here is an example of Fragment to Activity communication:</p>
+
+<pre>
+public class HeadlinesFragment extends ListFragment {
+    OnHeadlineSelectedListener mCallback;
+
+    // Container Activity must implement this interface
+    public interface OnHeadlineSelectedListener {
+        public void onArticleSelected(int position);
+    }
+
+    &#64;Override
+    public void onAttach(Activity activity) {
+        super.onAttach(activity);
+        
+        // This makes sure that the container activity has implemented
+        // the callback interface. If not, it throws an exception
+        try {
+            mCallback = (OnHeadlineSelectedListener) activity;
+        } catch (ClassCastException e) {
+            throw new ClassCastException(activity.toString()
+                    + " must implement OnHeadlineSelectedListener");
+        }
+    }
+    
+    ...
+}
+</pre>
+
+<p>Now the fragment can deliver messages to the activity by calling the {@code
+onArticleSelected()} method (or other methods in the interface) using the {@code mCallback}
+instance of the {@code OnHeadlineSelectedListener} interface.</p>
+
+<p>For example, the following method in the fragment is called when the user clicks on a list
+item. The fragment uses the callback interface to deliver the event to the parent activity.</p>
+
+<pre>
+    &#64;Override
+    public void onListItemClick(ListView l, View v, int position, long id) {
+        // Send the event to the host activity
+        mCallback.onArticleSelected(position);
+    }
+</pre>
+
+
+
+<h2 id="Implement">Implement the Interface</h2>
+
+<p>In order to receive event callbacks from the fragment, the activity that hosts it must
+implement the interface defined in the fragment class.</p>
+
+<p>For example, the following activity implements the interface from the above example.</p>
+
+<pre>
+public static class MainActivity extends Activity
+        implements HeadlinesFragment.OnHeadlineSelectedListener{
+    ...
+    
+    public void onArticleSelected(Uri articleUri) {
+        // The user selected the headline of an article from the HeadlinesFragment
+        // Do something here to display that article
+    }
+}
+</pre>
+
+
+
+<h2 id="Deliver">Deliver a Message to a Fragment</h2>
+
+<p>The host activity can deliver messages to a fragment by capturing the {@link
+android.support.v4.app.Fragment} instance 
+with {@link android.support.v4.app.FragmentManager#findFragmentById findFragmentById()}, then
+directly call the fragment's public methods.</p>
+
+<p>For instance, imagine that the activity shown above may contain another fragment that's used to
+display the item specified by the data returned in the above callback method. In this case, 
+the activity can pass the information received in the callback method to the other fragment that
+will display the item:</p>
+
+<pre>
+public static class MainActivity extends Activity
+        implements HeadlinesFragment.OnHeadlineSelectedListener{
+    ...
+
+    public void onArticleSelected(int position) {
+        // The user selected the headline of an article from the HeadlinesFragment
+        // Do something here to display that article
+
+        ArticleFragment articleFrag = (ArticleFragment)
+                getSupportFragmentManager().findFragmentById(R.id.article_fragment);
+
+        if (articleFrag != null) {
+            // If article frag is available, we're in two-pane layout...
+
+            // Call a method in the ArticleFragment to update its content
+            articleFrag.updateArticleView(position);
+        } else {
+            // Otherwise, we're in the one-pane layout and must swap frags...
+
+            // Create fragment and give it an argument for the selected article
+            ArticleFragment newFragment = new ArticleFragment();
+            Bundle args = new Bundle();
+            args.putInt(ArticleFragment.ARG_POSITION, position);
+            newFragment.setArguments(args);
+        
+            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
+
+            // Replace whatever is in the fragment_container view with this fragment,
+            // and add the transaction to the back stack so the user can navigate back
+            transaction.replace(R.id.fragment_container, newFragment);
+            transaction.addToBackStack(null);
+
+            // Commit the transaction
+            transaction.commit();
+        }
+    }
+}
+</pre>
+
+
+
+
+
+
+
+
+
diff --git a/docs/html/training/basics/fragments/creating.jd b/docs/html/training/basics/fragments/creating.jd
new file mode 100644
index 0000000..9f3ed06
--- /dev/null
+++ b/docs/html/training/basics/fragments/creating.jd
@@ -0,0 +1,155 @@
+page.title=Creating a Fragment
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+previous.title=Using the Android Support Library
+previous.link=support-lib.html
+next.title=Building a Flexible UI
+next.link=fragment-ui.html 
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb">
+    
+    <h2>This lesson teaches you to</h2>
+<ol>
+  <li><a href="#Create">Create a Fragment Class</a></li>
+  <li><a href="#AddInLayout">Add a Fragment to an Activity using XML</a></li>
+</ol>
+
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+    </ul>
+
+<h2>Try it out</h2>
+    
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+  </div>
+</div>
+
+<p>You can think of a fragment as a modular section of an activity, which has its own lifecycle,
+receives its own input events, and which you can add or remove while the activity is running (sort
+of like a "sub activity" that you can reuse in different activities). This lesson shows how to
+extend the {@link android.support.v4.app.Fragment} class using the Support Library so your app
+remains compatible with devices running system versions as old as Android 1.6.</p>
+
+<p class="note"><strong>Note:</strong> If you decide for other reasons that the minimum
+API level your app requires is 11 or higher, you don't need to use the Support
+Library and can instead use the framework's built in {@link android.app.Fragment} class and related
+APIs. Just be aware that this lesson is focused on using the APIs from the Support Library, which
+use a specific package signature and sometimes slightly different API names than the versions
+included in the platform.</p>
+
+
+
+<h2 id="Create">Create a Fragment Class</h2>
+
+<p>To create a fragment, extend the {@link android.support.v4.app.Fragment} class, then override 
+key lifecycle methods to insert your app logic, similar to the way you would with an {@link
+android.app.Activity} class.</p>
+
+<p>One difference when creating a {@link android.support.v4.app.Fragment} is that you must use the
+{@link android.support.v4.app.Fragment#onCreateView onCreateView()} callback to define the layout.
+In fact, this is the only callback you need in order to get a fragment running. For
+example, here's a simple fragment that specifies its own layout:</p>
+
+<pre>
+import android.os.Bundle;
+import android.support.v4.app.Fragment;
+import android.view.LayoutInflater;
+import android.view.ViewGroup;
+
+public class ArticleFragment extends Fragment {
+    &#64;Override
+    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
+        Bundle savedInstanceState) {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.article_view, container, false);
+    }
+}
+</pre>
+
+<p>Just like an activity, a fragment should implement other lifecycle callbacks that allow you to
+manage its state as it is added or removed from the activity and as the activity transitions
+between its lifecycle states. For instance, when the activity's {@link
+android.app.Activity#onPause()} method is called, any fragments in the activity also receive a call
+to {@link android.support.v4.app.Fragment#onPause()}.</p>
+
+<p>More information about the fragment lifecycle and callback methods is available in the <a
+href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a> developer guide.</p>
+
+
+
+<h2 id="AddInLayout">Add a Fragment to an Activity using XML</h2> 
+
+<p>While fragments are reusable, modular UI components, each instance of a {@link
+android.support.v4.app.Fragment} class must be associated with a parent {@link
+android.support.v4.app.FragmentActivity}. You can achieve this association by defining each
+fragment within your activity layout XML file.</p>
+
+<p class="note"><strong>Note:</strong> {@link android.support.v4.app.FragmentActivity} is a
+special activity provided in the Support Library to handle fragments on system versions older than
+API level 11. If the lowest system version you support is API level 11 or higher, then you can use a
+regular {@link android.app.Activity}.</p>
+
+<p>Here is an example layout file that adds two fragments to an activity when the device
+screen is considered "large" (specified by the <code>large</code> qualifier in the directory
+name).</p>
+
+<p><code>res/layout-large/news_articles.xml:</code></p>
+<pre>
+&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="horizontal"
+    android:layout_width="fill_parent"
+    android:layout_height="fill_parent">
+
+    &lt;fragment android:name="com.example.android.fragments.HeadlinesFragment"
+              android:id="@+id/headlines_fragment"
+              android:layout_weight="1"
+              android:layout_width="0dp"
+              android:layout_height="match_parent" />
+
+    &lt;fragment android:name="com.example.android.fragments.ArticleFragment"
+              android:id="@+id/article_fragment"
+              android:layout_weight="2"
+              android:layout_width="0dp"
+              android:layout_height="match_parent" />
+
+&lt;/LinearLayout>
+</pre>
+
+<p class="note"><strong>Tip:</strong> For more information about creating layouts for different
+screen sizes, read <a href="{@docRoot}training/multiscreen/screensizes.html">Supporting Different
+Screen Sizes</a>.</p>
+
+<p>Here's how an activity applies this layout:</p>
+
+<pre>
+import android.os.Bundle;
+import android.support.v4.app.FragmentActivity;
+
+public class MainActivity extends FragmentActivity {
+    &#64;Override
+    public void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.news_articles);
+    }
+}
+</pre>
+
+
+<p class="note"><strong>Note:</strong> When you add a fragment to an activity layout by defining
+the fragment in the layout XML file, you <em>cannot</em> remove the fragment at runtime. If you plan
+to swap your fragments in and out during user interaction, you must add the fragment to the activity
+when the activity first starts, as shown in the next lesson.</p>
+
+
+
diff --git a/docs/html/training/basics/fragments/fragment-ui.jd b/docs/html/training/basics/fragments/fragment-ui.jd
new file mode 100644
index 0000000..f906f46
--- /dev/null
+++ b/docs/html/training/basics/fragments/fragment-ui.jd
@@ -0,0 +1,196 @@
+page.title=Building a Flexible UI
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+previous.title=Create a Fragment
+previous.link=creating.html
+next.title=Communicating with Other Fragments
+next.link=communicating.html
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb"> 
+    <h2>This lesson teaches you to</h2>
+<ol>
+  <li><a href="#AddAtRuntime">Add a Fragment to an Activity at Runtime</a></li>
+  <li><a href="#Replace">Replace One Fragment with Another</a></li>
+</ol>
+    
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+      <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets and
+Handsets</a></li>
+    </ul>
+
+<h2>Try it out</h2>
+
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+  </div>
+</div>
+
+
+<p>When designing your application to support a wide range of screen sizes, you can reuse your
+fragments in different layout configurations to optimize the user experience based on the available
+screen space.</p>
+
+<p>For example, on a handset device it might be appropriate to display just one fragment at a time
+for a single-pane user interface.  Conversely, you may want to set fragments side-by-side on a
+tablet which has a wider screen size to display more information to the user.</p>
+
+<img src="{@docRoot}images/training/basics/fragments-screen-mock.png" alt="" />
+<p class="img-caption"><strong>Figure 1.</strong> Two fragments, displayed in different
+configurations for the same activity on different screen sizes. On a large screen, both fragment
+fit side by side, but on a handset device, only one fragment fits at a time so the fragments must
+replace each other as the user navigates.</p>
+
+<p>The {@link android.support.v4.app.FragmentManager} class provides methods that allow you to add,
+remove, and replace fragments to an activity at runtime in order to create a dynamic experience.</p>
+
+
+
+<h2 id="AddAtRuntime">Add a Fragment to an Activity at Runtime</h2> 
+
+<p>Rather than defining the fragments for an activity in the layout file&mdash;as shown in the
+<a href="creating.html">previous lesson</a> with the {@code &lt;fragment>} element&mdash;you can add
+a fragment to the activity during the activity runtime. This is necessary
+if you plan to change fragments during the life of the activity.</p>
+
+<p>To perform a transaction such as add or 
+remove a fragment, you must use the {@link android.support.v4.app.FragmentManager} to create a
+{@link android.support.v4.app.FragmentTransaction}, which provides APIs to add, remove, replace,
+and perform other fragment transactions.</p>
+
+<p>If your activity allows the fragments to be removed and replaced, you should add the
+initial fragment(s) to the activity during the activity's
+{@link android.app.Activity#onCreate onCreate()} method.</p>
+
+<p>An important rule when dealing with fragments&mdash;especially those that you add at
+runtime&mdash;is that the fragment must have a container {@link android.view.View} in the layout in
+which the fragment's layout will reside.</p>
+
+<p>The following layout is an alternative to the layout shown in the <a
+href="creating.html">previous lesson</a> that shows only one fragment at a time. In order to replace
+one fragment with another, the activity's layout
+includes an empty {@link android.widget.FrameLayout} that acts as the fragment container.</p>
+
+<p>Notice that the filename is the same as the layout file in the previous lesson, but the layout
+directory does <em>not</em> have the <code>large</code> qualifier, so this layout is used when the
+device screen is smaller than <em>large</em> because the screen does not fit both fragments at
+the same time.</p>
+
+<p><code>res/layout/news_articles.xml:</code></p>
+<pre>
+&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/fragment_container"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent" />
+</pre>
+
+<p>Inside your activity, call {@link
+android.support.v4.app.FragmentActivity#getSupportFragmentManager()} to get a {@link
+android.support.v4.app.FragmentManager} using the Support Library APIs. Then call {@link
+android.support.v4.app.FragmentManager#beginTransaction} to create a {@link
+android.support.v4.app.FragmentTransaction} and call {@link
+android.support.v4.app.FragmentTransaction#add add()} to add a fragment.</p>
+
+<p>You can perform multiple fragment transaction for the activity using the same {@link
+android.support.v4.app.FragmentTransaction}. When you're ready to make the changes, you must call
+{@link android.support.v4.app.FragmentTransaction#commit()}.</p>
+
+<p>For example, here's how to add a fragment to the previous layout:</p>
+
+<pre>
+import android.os.Bundle;
+import android.support.v4.app.FragmentActivity;
+
+public class MainActivity extends FragmentActivity {
+    &#64;Override
+    public void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.news_articles);
+
+        // Check that the activity is using the layout version with
+        // the fragment_container FrameLayout
+        if (findViewById(R.id.fragment_container) != null) {
+
+            // However, if we're being restored from a previous state,
+            // then we don't need to do anything and should return or else
+            // we could end up with overlapping fragments.
+            if (savedInstanceState != null) {
+                return;
+            }
+
+            // Create an instance of ExampleFragment
+            HeadlinesFragment firstFragment = new HeadlinesFragment();
+            
+            // In case this activity was started with special instructions from an Intent,
+            // pass the Intent's extras to the fragment as arguments
+            firstFragment.setArguments(getIntent().getExtras());
+            
+            // Add the fragment to the 'fragment_container' FrameLayout
+            getSupportFragmentManager().beginTransaction()
+                    .add(R.id.fragment_container, firstFragment).commit();
+        }
+    }
+}
+</pre>
+
+<p>Because the fragment has been added to the {@link android.widget.FrameLayout} container at
+runtime&mdash;instead of defining it in the activity's layout with a {@code &lt;fragment>}
+element&mdash;the activity can remove the fragment and replace it with a different one.</p>
+
+
+
+<h2 id="Replace">Replace One Fragment with Another</h2>
+
+<p>The procedure to replace a fragment is similar to adding one, but requires the {@link
+android.support.v4.app.FragmentTransaction#replace replace()} method instead of {@link
+android.support.v4.app.FragmentTransaction#add add()}.</p>
+
+<p>Keep in mind that when you perform fragment transactions, such as replace or remove one, it's
+often appropriate to allow the user to navigate backward and "undo" the change. To allow the user
+to navigate backward through the fragment transactions, you must call {@link
+android.support.v4.app.FragmentTransaction#addToBackStack addToBackStack()} before you commit the
+{@link android.support.v4.app.FragmentTransaction}.</p>
+
+<p class="note"><strong>Note:</strong> When you remove or replace a fragment and add the transaction
+to the back stack, the fragment that is removed is stopped (not destroyed). If the user navigates
+back to restore the fragment, it restarts. If you <em>do not</em> add the transaction to the back
+stack, then the fragment is destroyed when removed or replaced.</p>
+
+<p>Example of replacing one fragment with another:</p>
+
+<pre>
+// Create fragment and give it an argument specifying the article it should show
+ArticleFragment newFragment = new ArticleFragment();
+Bundle args = new Bundle();
+args.putInt(ArticleFragment.ARG_POSITION, position);
+newFragment.setArguments(args);
+
+FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
+
+// Replace whatever is in the fragment_container view with this fragment,
+// and add the transaction to the back stack so the user can navigate back
+transaction.replace(R.id.fragment_container, newFragment);
+transaction.addToBackStack(null);
+
+// Commit the transaction
+transaction.commit();
+</pre>
+
+<p>The {@link android.support.v4.app.FragmentTransaction#addToBackStack addToBackStack()} method
+takes an optional string parameter that specifies a unique name for the transaction. The name isn't
+needed unless you plan to perform advanced fragment operations using the {@link
+android.support.v4.app.FragmentManager.BackStackEntry} APIs.</p>
+
+
+
+
diff --git a/docs/html/training/basics/fragments/index.jd b/docs/html/training/basics/fragments/index.jd
new file mode 100644
index 0000000..dcdcd31
--- /dev/null
+++ b/docs/html/training/basics/fragments/index.jd
@@ -0,0 +1,74 @@
+page.title=Building a Dynamic UI with Fragments
+
+trainingnavtop=true
+startpage=true
+next.title=Using the Android Support Library
+next.link=support-lib.html
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+
+
+<h2>Dependencies and prerequisites</h2>
+<ul>
+  <li>Basic knowledge of the Activity lifecycle (see <a
+href="{@docRoot}training/basics/activity-lifecycle/index.html">Managing the Activity
+Lifecycle</a>)</li>
+  <li>Experience building <a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML
+layouts</a></li>
+</ul>
+
+
+<h2>You should also read</h2>
+<ul>
+  <li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
+  <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets and
+Handsets</a></li>
+</ul>
+
+
+<h2>Try it out</h2>
+
+<div class="download-box">
+ <a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
+class="button">Download the sample</a>
+ <p class="filename">FragmentBasics.zip</p>
+</div>
+
+</div>
+</div>
+
+<p>To create a dynamic and multi-pane user interface on Android, you need to encapsulate
+UI components and activity behaviors into modules that you can swap into and out of
+your activities. You can create these modules with the {@link android.app.Fragment} class, which
+behaves somewhat like a nested activity that can define its own layout and manage its own
+lifecycle.</p>
+
+<p>When a fragment specifies its own layout, it can be configured in different combinations with
+other fragments inside an activity to modify your layout configuration for different screen
+sizes (a small screen might show one fragment at a time, but a large screen can show two or
+more).</p>
+
+<p>This class shows you how to create a dynamic user experience with fragments and optimize your
+app's user experience for devices with different screen sizes, all while continuing to support
+devices running versions as old as Android 1.6.</p>
+
+<h2>Lessons</h2>
+ 
+<dl>
+  <dt><b><a href="support-lib.html">Using the Android Support Library</a></b></dt>
+    <dd>Learn how to use more recent framework APIs in earlier versions of Android by bundling
+the Android Support Library into your app.</dd>
+  <dt><b><a href="creating.html">Creating a Fragment</a></b></dt>
+    <dd>Learn how to build a fragment and implement basic behaviors within its callback
+methods.</dd>
+  <dt><b><a href="fragment-ui.html">Building a Flexible UI</a></b></dt>
+    <dd>Learn how to build your app with layouts that provide different fragment configurations for
+different screens.</dd>
+  <dt><b><a href="communicating.html">Communicating with Other Fragments</a></b></dt>
+    <dd>Learn how to set up communication paths from a fragment to the activity and other
+fragments.</dd>
+</dl> 
+
diff --git a/docs/html/training/basics/fragments/support-lib.jd b/docs/html/training/basics/fragments/support-lib.jd
new file mode 100644
index 0000000..c26f6c8
--- /dev/null
+++ b/docs/html/training/basics/fragments/support-lib.jd
@@ -0,0 +1,86 @@
+page.title=Using the Support Library
+parent.title=Building a Dynamic UI with Fragments
+parent.link=index.html
+
+trainingnavtop=true
+next.title=Creating a Fragment
+next.link=creating.html
+
+@jd:body
+
+<div id="tb-wrapper">
+  <div id="tb"> 
+    <h2>This lesson teaches you to</h2>
+    <ol>
+      <li><a href="#Setup">Set Up Your Project With the Support Library</a></li>
+      <li><a href="#Apis">Import the Support Library APIs</a></li>
+    </ol>
+    <h2>You should also read</h2>
+    <ul>
+      <li><a href="{@docRoot}sdk/compatibility-library.html">Support Library</a></li>
+    </ul>
+  </div>
+</div>
+
+<p>The Android <a href="{@docRoot}sdk/compatibility-library.html">Support Library</a> provides a JAR
+file with an API library that allow you to use some of the more recent Android APIs in your app
+while running on earlier versions of Android. For instance, the Support Library provides a version
+of the {@link android.app.Fragment} APIs that you can use on Android 1.6 (API level 4) and
+higher.</p>
+
+<p>This lesson shows how to set up your app to use the Support Library in order to use fragments
+to build a dynamic app UI.</p>
+
+
+<h2 id="Setup">Set Up Your Project With the Support Library</h2>
+
+<div class="figure" style="width:527px">
+<img src="{@docRoot}images/training/basics/sdk-manager.png" alt="" />
+<p class="img-caption"><strong>Figure 1.</strong> The Android SDK Manager with the
+Android Support package selected.</p>
+</div>
+
+<p>To set up your project:</p>
+
+<ol>
+  <li>Downlad the Android Support package using the SDK Manager</li>
+
+  <li>Create a <code>libs</code> directory at the top level of your Android project.</li>
+  <li>Locate the JAR file for the library you want to use and copy it into the <code>libs/</code>
+directory.
+<p>For example, the library that supports API level 4 and up is located at
+<code>&lt;sdk>/extras/android/support/v4/android-support-v4.jar</code>.</p></li>
+  <li>Update your manifest file to set the minimum API level to <code>4</code> and the target
+API level to the latest release:
+  <pre>&lt;uses-sdk android:minSdkVersion="4" android:targetSdkVersion="15" /></pre>
+  </li>
+</ol>
+
+
+<h2 id="Apis">Import the Support Library APIs</h2>
+
+<p>The Support Library includes a variety of APIs that were either added in recent versions of
+Android or don't exist in the platform at all and merely provide additional support to you when
+developing specific application features.</p>
+
+<p>You can find all the API reference documentation for the Support Library included in the
+platform docs in the {@link android.support.v4} package. For which API references are available
+at {@link android.support.v4}.</p>
+
+<div class="warning"><p><strong>Warning:</strong> To be sure that you don't accidentally use new
+APIs on an older system version, be certain that you import the {@link
+android.support.v4.app.Fragment} class and related APIs from the {@link android.support.v4.app}
+package:</p>
+<pre>
+import android.support.v4.app.Fragment;
+import android.support.v4.app.FragmentManager;
+...
+</pre>
+</div>
+
+
+<p>When creating an activity that hosts fragments while using the Support Library, you must also
+extend the {@link android.support.v4.app.FragmentActivity} class instead of the traditional {@link
+android.app.Activity} class. You'll see sample code for the fragment and activity in the next
+lesson.</p>
+