| 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"> </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>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> |
| <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> |