1 page.title=Full Screen 2 page.tags="full screen","immersive", "leanback" 3 @jd:body 4 5 <p> 6 Some content is best experienced full screen, like videos, games, image 7 galleries, books, and slides in a presentation. You can engage users more 8 deeply with content in full screen by minimizing visual distraction from app 9 controls and protecting users from escaping the app accidentally. 10 </p> 11 12 <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;"> 13 14 <p> 15 In version 4.4, Android offers two approaches for making your app go full 16 screen: Lean Back and Immersive. In both approaches, all persistent system 17 bars are hidden. The difference between them is how the user brings the bars 18 back into view. 19 </p> 20 21 <div class="layout-content-row"> 22 <div class="layout-content-col span-6"> 23 <h4>Lean Back</h4> 24 <p>Touch the screen anywhere to bring back system bars. </p> 25 <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> 26 </div> 27 <div class="layout-content-col span-6"> 28 <h4>Immersive</h4> 29 <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> 30 <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> 31 <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> 32 </div> 33 </div> 34 35 <h2 id="leanback"> 36 Lean Back 37 </h2> 38 39 <p> 40 The Lean Back approach is for full-screen experiences in which users won't be 41 interacting heavily with the screen while consuming content, like while 42 watching a video. 43 </p> 44 45 <p> 46 In this type of experience, users are leaning back and watching the screen. 47 Then, when they need to bring back the bars, they simply touch anywhere. This 48 gesture is easy and intuitive. 49 </p> 50 51 <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> 52 53 <h2 id="immersive"> 54 Immersive 55 </h2> 56 57 <p> 58 The Immersive approach is mainly intended for apps in which the user will be 59 heavily interacting with the full screen as part of the primary experience. 60 Examples are games, viewing images in a gallery, or reading paginated 61 content, like a book or slides in a presentation. 62 </p> 63 64 <p> 65 In this type of experience, when users need to bring back the system bars, 66 they swipe from any edge where a system bar is hidden. By requiring this more 67 deliberate gesture, the user's deep engagement with your app won't be 68 interrupted by accidental touches and swipes. 69 </p> 70 71 <div class="layout-content-row"> 72 <div class="layout-content-col span-6"> 73 <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> 74 <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> 75 </div> 76 </div> 77 78 <p> 79 The user learns about the gesture to bring back the system bars through a 80 message that appears the first time the app goes full screen. 81 </p> 82 83 <p> 84 If your app has its own controls that aren't needed when a user is immersed 85 in content, make them disappear and reappear in sync with the system bars. 86 This rule also applies to any app-specific gestures you might have for hiding 87 and showing app controls. For example, if touching anywhere on the screen 88 toggles the appearance of an action bar or a palette, then it must also 89 toggle the appearance of system bars. 90 </p> 91 92 <p> 93 You might be tempted to use this approach just to maximize screen real 94 estate. But be mindful of how often users jump in and out of apps to check 95 notifications, do impromptu searches, and more. This approach will cause 96 users to lose easy access to system navigation, so a little extra space 97 should not be the only benefit they're getting in return. 98 </p> 99 100 <h2 id="variation_using_edges"> 101 Variation: Swiping from edges with bars also affects the app 102 </h2> 103 104 <p> 105 In the Immersive approach, any time a user swipes from an edge with a system 106 bar, the Android framework takes care of revealing the system bars. Your app 107 won't even be aware that this gesture occurred. 108 </p> 109 110 <p> 111 But in some apps, the user might occasionally need to swipe from the edge as 112 <strong>part of the primary app experience</strong>. Examples are games and 113 drawing applications. 114 </p> 115 116 <p> 117 For apps with this requirement, you can use a variation on the Immersive 118 approach: when a user swipes from an edge with a system bar, system bars are 119 shown and the gesture is passed to the app so the app can respond to the 120 gesture. 121 </p> 122 123 <p> 124 For example, in a drawing app that uses this approach, if a user wants to 125 draw a line that begins at the very edge of the screen, swiping from the edge 126 would reveal the system bars and also start drawing a line that begins at the 127 very edge. 128 </p> 129 130 <p> 131 In this approach, to minimize disruption while a user is deeply engaged in 132 the app, the system bars are semi-transparent. The bars automatically 133 disappear after a few seconds of no interaction or as soon as the user 134 touches or gestures anywhere outside the system bars. 135 </p> 136 137 <h2 id="lightsout">What About Lights Out Mode?</h2> 138 139 <p> 140 Before Android 4.4, the design guideline was to use Lights Out mode, a mode 141 in which the Action Bar and Status Bar fades away and becomes unavailable 142 after a few seconds of inactivity. The Navigation Bar is still available and 143 responds to touches but appears dimmed. 144 </p> 145 146 <p> 147 Replace previous implementations of Lights Out mode with the Lean Back or 148 Immersive approaches. Continue to use Lights Out mode for implementations of 149 your app targeted for earlier releases. 150 </p>
