1 files changed, 149 insertions, 0 deletions
diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd
new file mode 100644
index 0000000..34cdd06
--- /dev/null
+++ b/docs/html/design/get-started/ui-overview.jd
@@ -0,0 +1,149 @@
+page.title=UI Overview
+@jd:body
+
+<p>Android's system UI provides the framework on top of which you build your app. Important aspects
+include the Home screen experience, global device navigation, and notifications.</p>
+<p>Your app will play an important part in keeping the overall Android experience consistent and
+enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
+in your app.</p>
+<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
+
+<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_home_screen.png">
+
+<h4>Home screen</h4>
+<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
+different home screen panels by swiping left and right.</p>
+<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
+regardless of which panel is currently showing.</p>
+<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
+the Favorites Tray.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_all_apps.png">
+
+<h4>All apps screen</h4>
+<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
+device.</p>
+<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
+any Home screen.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_recents.png">
+
+<h4>Recents screen</h4>
+<p>Recents provides an efficient way of switching between recently used applications. It provides a
+clear navigation path between multiple ongoing tasks.</p>
+<p>The Recents button at the right side of the navigation bar displays the apps that the user has
+interacted with most recently. They are organized in reverse chronological order with the most
+recently used app at the bottom.</p>
+<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
+
+  </div>
+</div>
+
+<h2 id="system-bars">System Bars</h2>
+
+<p>The system bars are screen areas dedicated to the display of notifications, communication of device
+status, and device navigation. Typically the system bars are displayed concurrently with your app.
+Apps that display immersive content, such as movies or images, can temporarily hide the system bars
+to allow the user to enjoy full screen content without distraction.</p>
+
+<img src="{@docRoot}design/media/ui_overview_system_ui.png">
+
+<div class="with-callouts">
+
+<ol>
+<li>
+<h4>Status Bar</h4>
+<p>Displays pending notifications on the left and status, such as time, battery level, or signal
+  strength, on the right. Swipe down from the status bar to show notification details.</p>
+</li>
+<li>
+<h4>Navigation Bar</h4>
+<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
+  the traditional hardware keys. It houses the device navigation controls Back, Home, and
+  Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
+</li>
+<li>
+<h4>Combined Bar</h4>
+<p>On tablet form factors the status and navigation bars are combined into a single bar at the
+  bottom of the screen.</p>
+</li>
+</ol>
+
+</div>
+
+<h2 id="notifications">Notifications</h2>
+
+<p>Notifications are brief messages that users can access at any time from the status bar. They
+provide updates, reminders, or information that's important, but not critical enough to warrant
+interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
+notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_notifications.png">
+
+  </div>
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/notifications_dismiss.png">
+
+<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
+notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
+<p>Swiping a notification right or left removes it from the notification drawer.</p>
+
+  </div>
+</div>
+
+
+<h2 id="app">Common App UI</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/ui_overview_app_ui.png">
+
+  </div>
+  <div class="layout-content-col span-6 with-callouts">
+
+<p>A typical Android app consists of action bars and the app content area.</p>
+<ol>
+<li>
+<h4>Main Action Bar</h4>
+<p>The command and control center for your app. The main action bar includes elements for
+  navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
+<p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p>
+</li>
+<li>
+<h4>View Control</h4>
+<p>Allows users to switch between the different views that your app provides. Views typically
+  consist of different arrangements of your data or different functional aspects of your app.</p>
+</li>
+<li>
+<h4>Content Area</h4>
+<p>The space where the content of your app is displayed.</p>
+</li>
+<li>
+<h4>Split Action Bar</h4>
+<p>Split action bars provide a way to distribute actions across additional bars located below
+  the main action bar or at the bottom of the screen. In this example, a split action bar moves
+  important actions that won't fit in the main bar to the bottom.</p>
+</li>
+</ol>
+
+  </div>
+</div>