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