1 page.title=Phones & Tablets 2 @jd:body 3 4 <p> 5 Android's system UI provides the framework on top of which you build your app, 6 whether you're designing for phones, tablets, watches, or other form factors. 7 Aspects of UI that are especially important for phones and tablets include 8 the Home screen experience, global device navigation, and notifications. 9 </p> 10 11 <p> 12 Your app will play an important part in keeping the overall Android experience 13 consistent and enjoyable to use. This page introduces some of the main elements 14 that can help you achieve this goal. The main Android Design topics listed on 15 the left, after the Devices sections, provide detailed guidelines for phones 16 and tablets. 17 </p> 18 19 <h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2> 20 21 <div class="vspace size-1"> </div> 22 23 <div class="cols"> 24 <div class="col-4"> 25 26 <img src="{@docRoot}design/media/ui_overview_home_screen.png"> 27 28 <h4>Home screen</h4> 29 <p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between 30 different home screen panels by swiping left and right.</p> 31 <p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view 32 regardless of which panel is currently showing.</p> 33 <p>Access the entire collection of apps and widgets by touching the All Apps button at the center of 34 the Favorites Tray.</p> 35 36 </div> 37 <div class="col-4"> 38 39 <img src="{@docRoot}design/media/ui_overview_all_apps.png"> 40 41 <h4>All apps screen</h4> 42 <p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your 43 device.</p> 44 <p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on 45 any Home screen.</p> 46 47 </div> 48 <div class="col-4"> 49 50 <img src="{@docRoot}design/media/ui_overview_recents.png"> 51 52 <h4>Recents screen</h4> 53 <p>Recents provides an efficient way of switching between recently used applications. It provides a 54 clear navigation path between multiple ongoing tasks.</p> 55 <p>The Recents button at the right side of the navigation bar displays the apps that the user has 56 interacted with most recently. They are organized in reverse chronological order with the most 57 recently used app at the bottom.</p> 58 <p>Switch to an app by touching it. Remove an item by swiping left or right.</p> 59 60 </div> 61 </div> 62 63 <h2 id="system-bars">System Bars</h2> 64 65 <p>The system bars are screen areas dedicated to the display of notifications, communication of device 66 status, and device navigation. Typically the system bars are displayed concurrently with your app. 67 Apps that display immersive content, such as movies or images, can temporarily hide the system bars 68 to allow the user to enjoy full screen content without distraction.</p> 69 70 <img src="{@docRoot}design/media/ui_overview_system_ui.png"> 71 72 <div class="with-callouts"> 73 74 <ol> 75 <li> 76 <h4>Status Bar</h4> 77 <p>Displays pending notifications on the left and status, such as time, battery level, or signal 78 strength, on the right. Swipe down from the status bar to show notification details.</p> 79 </li> 80 <li> 81 <h4>Navigation Bar</h4> 82 <p>The navigation bar is present only on devices that don't have 83 the traditional hardware keys. It houses the device navigation controls Back, Home, and 84 Recents.</p> 85 </li> 86 </ol> 87 88 </div> 89 90 <h2 id="notifications">Notifications</h2> 91 92 <p>Notifications are brief messages that users can access at any time from the status bar. They 93 provide updates, reminders, or information that's important, but not critical enough to warrant 94 interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a 95 notification opens the associated app. <a 96 href="https://material.google.com/patterns/notifications.html">More on Notifications</a></p> 97 98 <div class="cols"> 99 <div class="col-4"> 100 101 <img src="{@docRoot}design/media/ui_overview_notifications.png"> 102 103 </div> 104 <div class="col-9"> 105 106 <img src="{@docRoot}design/media/notifications_dismiss.png"> 107 108 <p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications 109 have a one-line title and a one-line message.The recommended layout for a notification includes two lines. 110 If necessary, you can add a third line.</p> 111 <p>Swiping a notification right or left removes it from the notification drawer.</p> 112 113 </div> 114 </div> 115 116 117 <h2 id="app">Common App UI</h2> 118 119 120 <div class="cols"> 121 <div class="col-7"> 122 123 <img src="{@docRoot}design/media/app_structure_drawer.png"> 124 125 </div> 126 <div class="col-6 with-callouts"> 127 128 <p>A typical Android app uses action bars, and many apps will include a navigation drawer.</p> 129 <ol> 130 <li> 131 <h4>Action Bar</h4> 132 <p>The command and control center for your app. The action bar surfaces the most important actions 133 for the current view, and may include simple controls for switching between views.</p> 134 <p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p> 135 </li> 136 <li> 137 <h4>Navigation Drawer</h4> 138 <p>If your app's structure is more complex, the navigation drawer can display the main navigation 139 options. The navigation drawer expands from the left edge of the screen, overlaying the content 140 area but not the action bar.</p> 141 <p><a href="{@docRoot}design/patterns/navigation-drawer.html">More on the Navigation Drawer</a></p> 142 </li> 143 <li> 144 <h4>Content Area</h4> 145 <p>The space where the content of your app is displayed.</p> 146 </li> 147 </ol> 148 149 </div> 150 </div> 151
