Main Toolbar: Floating Pill (M3 Expressive)

1
/*
2
 *   Copyright © 2026 PSPDFKit GmbH. All rights reserved.
3
 *
4
 *   The PSPDFKit Sample applications are licensed with a modified BSD license.
5
 *   Please see License for details. This notice may not be removed from this file.
6
 */
7

8
package com.pspdfkit.catalog.examples.kotlin
9

10
import android.content.Context
11
import android.content.Intent
12
import android.net.Uri
13
import android.os.Build
14
import android.os.Bundle
15
import androidx.activity.compose.setContent
16
import androidx.appcompat.app.AppCompatActivity
17
import androidx.compose.animation.AnimatedVisibility
18
import androidx.compose.animation.fadeIn
19
import androidx.compose.animation.fadeOut
20
import androidx.compose.animation.scaleIn
21
import androidx.compose.animation.scaleOut
22
import androidx.compose.foundation.isSystemInDarkTheme
23
import androidx.compose.foundation.layout.Arrangement
24
import androidx.compose.foundation.layout.Box
25
import androidx.compose.foundation.layout.Row
26
import androidx.compose.foundation.layout.fillMaxSize
27
import androidx.compose.foundation.layout.navigationBarsPadding
28
import androidx.compose.foundation.layout.padding
29
import androidx.compose.foundation.layout.statusBarsPadding
30
import androidx.compose.material3.ColorScheme
31
import androidx.compose.material3.MaterialTheme
32
import androidx.compose.material3.Surface
33
import androidx.compose.material3.Switch
34
import androidx.compose.material3.Text
35
import androidx.compose.material3.darkColorScheme
36
import androidx.compose.material3.dynamicDarkColorScheme
37
import androidx.compose.material3.dynamicLightColorScheme
38
import androidx.compose.material3.lightColorScheme
39
import androidx.compose.runtime.Composable
40
import androidx.compose.runtime.collectAsState
41
import androidx.compose.runtime.getValue
42
import androidx.compose.runtime.key
43
import androidx.compose.runtime.mutableStateOf
44
import androidx.compose.runtime.saveable.rememberSaveable
45
import androidx.compose.runtime.setValue
46
import androidx.compose.ui.Alignment
47
import androidx.compose.ui.Modifier
48
import androidx.compose.ui.platform.LocalContext
49
import androidx.compose.ui.res.stringResource
50
import androidx.compose.ui.unit.dp
51
import com.pspdfkit.catalog.R
52
import com.pspdfkit.catalog.SdkExample
53
import com.pspdfkit.catalog.tasks.ExtractAssetTask
54
import com.pspdfkit.catalog.ui.theming.enableConfigurationEdgeToEdge
55
import com.pspdfkit.compose.theme.NutrientTheme
56
import com.pspdfkit.compose.toolbar.composables.FloatingToolbarEdge
57
import com.pspdfkit.compose.toolbar.composables.NutrientFloatingToolbar
58
import com.pspdfkit.compose.toolbar.composables.rememberFloatingToolbarState
59
import com.pspdfkit.configuration.activity.PdfActivityConfiguration
60
import com.pspdfkit.configuration.search.SearchType
61
import com.pspdfkit.jetpack.compose.interactors.rememberDocumentState
62
import com.pspdfkit.jetpack.compose.views.DocumentView
63
import com.pspdfkit.utils.getSupportParcelableExtra
64

65
/**
66
 * Renders the main-toolbar model as a **Material 3 Expressive floating toolbar** — a draggable
67
 * pill built with [NutrientFloatingToolbar] on top of the document's
68
 * [com.pspdfkit.compose.toolbar.adapter.ToolbarCoordinator]:
69
 *
70
 *  - Drag the pill by its handle and release: it springs to the nearest window edge, flipping
71
 *    between horizontal (top/bottom) and vertical (start/end) layouts.
72
 *  - All motion (show/hide, orientation flip, drag release, press feedback) runs on the Material 3
73
 *    expressive motion scheme's spring tokens, built into [NutrientFloatingToolbar].
74
 *  - Items and clicks flow through the same coordinator APIs as the regular main toolbar.
75
 *  - The **Collapsible** toggle — a labeled Material 3 [Switch] — switches the pill into
76
 *    its collapsible variant: tapping any item in the expanded menu runs it and collapses the pill
77
 *    down to just that item — the *active* item stays visible as a single floating button, and
78
 *    tapping it springs the menu back open (nothing is dispatched). The pill starts docked at the
79
 *    trailing edge, showing off the vertical layout right away. The toggle rides the top edge
80
 *    whenever that edge is free — with the pill docked at the bottom or vertically at either
81
 *    side — and drops to the bottom, clear of the floating thumbnail bar, once the pill or the
82
 *    inline-search pill takes the top edge. It animates away entirely while a contextual toolbar
83
 *    (annotation creation, content editing, …) is up.
84
 */
85
class MainToolbarFloatingExample(context: Context) :
86
    SdkExample(context, R.string.mainToolbarFloatingExampleTitle, R.string.mainToolbarFloatingExampleDescription) {
87
    override fun launchExample(context: Context, configuration: PdfActivityConfiguration.Builder) {
88
        ExtractAssetTask.extract(WELCOME_DOC, title, context) { documentFile ->
89
            val intent = Intent(context, MainToolbarFloatingActivity::class.java)
90
            intent.putExtra(MainToolbarFloatingActivity.EXTRA_URI, Uri.fromFile(documentFile))
91
            context.startActivity(intent)
92
        }
93
    }
94
}
95

96
class MainToolbarFloatingActivity : AppCompatActivity() {
97
    override fun onCreate(savedInstanceState: Bundle?) {
98
        super.onCreate(savedInstanceState)
99

100
        val uri = intent.getSupportParcelableExtra(EXTRA_URI, Uri::class.java)!!
101
        val configuration = PdfActivityConfiguration.Builder(this)
102
            // The floating toolbar replaces the SDK's edge-to-edge top toolbar entirely.
103
            .defaultToolbarEnabled(false)
104
            .documentTitleOverlayEnabled(false)
105
            // Inline search renders as an expressive search pill at the top edge while active.
106
            .setSearchType(SearchType.INLINE)
107
            .build()
108

109
        enableConfigurationEdgeToEdge(configuration)
110
        setContent {
111
            // The floating toolbar reads its container/button colors from the ambient Material 3
112
            // color scheme; its expressive spring motion is built in.
113
            MaterialTheme(colorScheme = expressiveColorScheme()) {
114
                FloatingToolbarDocument(uri, configuration)
115
            }
116
        }
117
    }
118

119
    companion object {
120
        const val EXTRA_URI = "MainToolbarFloatingActivity.DocumentUri"
121
    }
122
}
123

124
/** Dynamic (Material You) color when available (API 31+), falling back to the baseline schemes. */
125
@Composable
126
private fun expressiveColorScheme(): ColorScheme {
127
    val dark = isSystemInDarkTheme()
128
    return when {
129
        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
130
            val context = LocalContext.current
131
            if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
132
        }
133

134
        dark -> darkColorScheme()
135

136
        else -> lightColorScheme()
137
    }
138
}
139

140
/**
141
 * Vertical room the toggle leaves above the bottom window edge so it clears the SDK's floating
142
 * thumbnail bar: the bar's own height (`pspdf__thumbnail_height`, 28dp, inside
143
 * `pspdf__thumbnail_bar_content_padding` of 6dp top and bottom), plus the 36dp
144
 * `pspdf__floating_thumbnail_bar_margin_bottom` it keeps from the window edge, plus an 8dp gap so
145
 * the two pieces of chrome don't touch.
146
 */
147
private val THUMBNAIL_BAR_CLEARANCE = 28.dp + (6.dp * 2) + 36.dp + 8.dp
148

149
@Composable
150
private fun FloatingToolbarDocument(uri: Uri, configuration: PdfActivityConfiguration) {
151
    val documentState = rememberDocumentState(uri, configuration)
152

153
    // The DocumentView publishes its fragment-scoped toolbar coordinator here once the UI is ready.
154
    val coordinator by documentState.toolbarCoordinator.collectAsState()
155
    var collapsible by rememberSaveable { mutableStateOf(false) }
156

157
    Box(modifier = Modifier.fillMaxSize()) {
158
        DocumentView(
159
            documentState = documentState,
160
            modifier = Modifier.fillMaxSize(),
161
        )
162

163
        coordinator?.let { c ->
164
            NutrientTheme {
165
                // Hoisted out of the `key` below on purpose: the pill's docked edge survives the
166
                // variant flip (a drag to the bottom edge stays put when the user toggles), and
167
                // the toggle's own placement reads `edge` to stay out from under the pill. It
168
                // starts docked at the trailing edge, showing the vertical layout right away.
169
                val toolbarState = rememberFloatingToolbarState(initialEdge = FloatingToolbarEdge.End)
170
                // Re-seed the pill's *internal* state (expanded/collapsed, active item) when the
171
                // variant flips, so each variant starts from a clean pill.
172
                key(collapsible) {
173
                    NutrientFloatingToolbar(
174
                        coordinator = c,
175
                        state = toolbarState,
176
                        vibrant = true,
177
                        draggable = true,
178
                        collapsible = collapsible,
179
                    )
180
                }
181

182
                // Deliberately outside the `key`: the toggle drives `collapsible`, so re-keying it
183
                // on its own tap would rebuild the Switch mid-gesture and snap the thumb instead
184
                // of animating it.
185
                //
186
                // Keep the toggle out from under the toolbar. The pill docks centered on an
187
                // edge, so the toggle rides the top edge for every dock except the top one:
188
                // docked at the bottom or vertically at either side, the top edge is free.
189
                // The top edge is taken while the pill docks there, and also while inline
190
                // search is active — the pill hides and a full-width search pill takes its
191
                // place — so the toggle drops to the bottom, lifted clear of the floating
192
                // thumbnail bar that lives there.
193
                val searchActive = c.searchSession.collectAsState().value?.isActive?.collectAsState()?.value == true
194
                val topEdgeTaken = searchActive || toolbarState.edge == FloatingToolbarEdge.Top
195

196
                // A contextual toolbar (annotation creation, content editing, …) owns the
197
                // screen while it is up, so the toggle springs away until it is dismissed.
198
                val contextualToolbar by c.contextualToolbar.collectAsState()
199
                // The pill itself honors `frame.isVisible`, so the toggle that drives it has to
200
                // as well: tapping the document into immersive mode takes the pill away, and a
201
                // switch for a toolbar that is not on screen would be left floating alone.
202
                val frame by c.frame.collectAsState()
203
                AnimatedVisibility(
204
                    visible = contextualToolbar == null && frame.isVisible,
205
                    enter = fadeIn() + scaleIn(),
206
                    exit = fadeOut() + scaleOut(),
207
                    modifier = Modifier
208
                        .align(if (topEdgeTaken) Alignment.BottomCenter else Alignment.TopCenter)
209
                        .statusBarsPadding()
210
                        .navigationBarsPadding()
211
                        .padding(
212
                            top = 8.dp,
213
                            bottom = if (topEdgeTaken) THUMBNAIL_BAR_CLEARANCE else 8.dp,
214
                        ),
215
                ) {
216
                    Surface(
217
                        onClick = { collapsible = !collapsible },
218
                        shape = MaterialTheme.shapes.extraLarge,
219
                        color = MaterialTheme.colorScheme.surfaceContainer,
220
                        shadowElevation = 4.dp,
221
                    ) {
222
                        Row(
223
                            verticalAlignment = Alignment.CenterVertically,
224
                            horizontalArrangement = Arrangement.spacedBy(8.dp),
225
                            modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
226
                        ) {
227
                            Text(
228
                                text = stringResource(R.string.mainToolbarFloatingCollapsibleToggle),
229
                                style = MaterialTheme.typography.labelLarge,
230
                            )
231
                            Switch(checked = collapsible, onCheckedChange = { collapsible = it })
232
                        }
233
                    }
234
                }
235
            }
236
        }
237
    }
238
}