1 page.title=UI Overview 2 @jd:body 3 4 <p>Android's system UI provides the framework on top of which you build your app. Important aspects 5 include the Home screen experience, global device navigation, and notifications.</p> 6 <p>Your app will play an important part in keeping the overall Android experience consistent and 7 enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal 8 in your app.</p> 9 <p>Read on for a quick overview of the most important aspects of the Android user interface.</p> 10 11 <h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2> 12 13 <div class="vspace size-1"> </div> 14 15 <div class="layout-content-row"> 16 <div class="layout-content-col span-4"> 17 18 <img src="{@docRoot}design/media/ui_overview_home_screen.png"> 19 20 <h4>Home screen</h4> 21 <p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between 22 different home screen panels by swiping left and right.</p> 23 <p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view 24 regardless of which panel is currently showing.</p> 25 <p>Access the entire collection of apps and widgets by touching the All Apps button at the center of 26 the Favorites Tray.</p> 27 28 </div> 29 <div class="layout-content-col span-4"> 30 31 <img src="{@docRoot}design/media/ui_overview_all_apps.png"> 32 33 <h4>All apps screen</h4> 34 <p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your 35 device.</p> 36 <p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on 37 any Home screen.</p> 38 39 </div> 40 <div class="layout-content-col span-4"> 41 42 <img src="{@docRoot}design/media/ui_overview_recents.png"> 43 44 <h4>Recents screen</h4> 45 <p>Recents provides an efficient way of switching between recently used applications. It provides a 46 clear navigation path between multiple ongoing tasks.</p> 47 <p>The Recents button at the right side of the navigation bar displays the apps that the user has 48 interacted with most recently. They are organized in reverse chronological order with the most 49 recently used app at the bottom.</p> 50 <p>Switch to an app by touching it. Remove an item by swiping left or right.</p> 51 52 </div> 53 </div> 54 55 <h2 id="system-bars">System Bars</h2> 56 57 <p>The system bars are screen areas dedicated to the display of notifications, communication of device 58 status, and device navigation. Typically the system bars are displayed concurrently with your app. 59 Apps that display immersive content, such as movies or images, can temporarily hide the system bars 60 to allow the user to enjoy full screen content without distraction.</p> 61 62 <img src="{@docRoot}design/media/ui_overview_system_ui.png"> 63 64 <div class="with-callouts"> 65 66 <ol> 67 <li> 68 <h4>Status Bar</h4> 69 <p>Displays pending notifications on the left and status, such as time, battery level, or signal 70 strength, on the right. Swipe down from the status bar to show notification details.</p> 71 </li> 72 <li> 73 <h4>Navigation Bar</h4> 74 <p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have 75 the traditional hardware keys. It houses the device navigation controls Back, Home, and 76 Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p> 77 </li> 78 <li> 79 <h4>Combined Bar</h4> 80 <p>On tablet form factors the status and navigation bars are combined into a single bar at the 81 bottom of the screen.</p> 82 </li> 83 </ol> 84 85 </div> 86 87 <h2 id="notifications">Notifications</h2> 88 89 <p>Notifications are brief messages that users can access at any time from the status bar. They 90 provide updates, reminders, or information that's important, but not critical enough to warrant 91 interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a 92 notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p> 93 94 <div class="layout-content-row"> 95 <div class="layout-content-col span-4"> 96 97 <img src="{@docRoot}design/media/ui_overview_notifications.png"> 98 99 </div> 100 <div class="layout-content-col span-9"> 101 102 <img src="{@docRoot}design/media/notifications_dismiss.png"> 103 104 <p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, 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.</p> 105 <p>Swiping a notification right or left removes it from the notification drawer.</p> 106 107 </div> 108 </div> 109 110 111 <h2 id="app">Common App UI</h2> 112 113 114 <div class="layout-content-row"> 115 <div class="layout-content-col span-7"> 116 117 <img src="{@docRoot}design/media/ui_overview_app_ui.png"> 118 119 </div> 120 <div class="layout-content-col span-6 with-callouts"> 121 122 <p>A typical Android app consists of action bars and the app content area.</p> 123 <ol> 124 <li> 125 <h4>Main Action Bar</h4> 126 <p>The command and control center for your app. The main action bar includes elements for 127 navigating your app's hierarchy and views, and also surfaces the most important actions.</p> 128 <p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p> 129 </li> 130 <li> 131 <h4>View Control</h4> 132 <p>Allows users to switch between the different views that your app provides. Views typically 133 consist of different arrangements of your data or different functional aspects of your app.</p> 134 </li> 135 <li> 136 <h4>Content Area</h4> 137 <p>The space where the content of your app is displayed.</p> 138 </li> 139 <li> 140 <h4>Split Action Bar</h4> 141 <p>Split action bars provide a way to distribute actions across additional bars located below 142 the main action bar or at the bottom of the screen. In this example, a split action bar moves 143 important actions that won't fit in the main bar to the bottom.</p> 144 </li> 145 </ol> 146 147 </div> 148 </div> 149
