Tabbed Documents (Compose)

1
/*
2
 *   Copyright © 2026 PSPDFKit GmbH. All rights reserved.
3
 *
4
 *   The Nutrient 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.Bundle
14
import androidx.activity.compose.BackHandler
15
import androidx.activity.compose.setContent
16
import androidx.appcompat.app.AppCompatActivity
17
import androidx.compose.animation.AnimatedVisibility
18
import androidx.compose.animation.EnterTransition
19
import androidx.compose.animation.ExitTransition
20
import androidx.compose.animation.fadeIn
21
import androidx.compose.animation.fadeOut
22
import androidx.compose.animation.slideInVertically
23
import androidx.compose.animation.slideOutVertically
24
import androidx.compose.foundation.background
25
import androidx.compose.foundation.layout.Box
26
import androidx.compose.foundation.layout.Column
27
import androidx.compose.foundation.layout.PaddingValues
28
import androidx.compose.foundation.layout.Row
29
import androidx.compose.foundation.layout.WindowInsets
30
import androidx.compose.foundation.layout.fillMaxSize
31
import androidx.compose.foundation.layout.fillMaxWidth
32
import androidx.compose.foundation.layout.ime
33
import androidx.compose.foundation.layout.padding
34
import androidx.compose.foundation.layout.statusBarsPadding
35
import androidx.compose.foundation.shape.RoundedCornerShape
36
import androidx.compose.material.icons.Icons
37
import androidx.compose.material.icons.filled.Add
38
import androidx.compose.material3.Icon
39
import androidx.compose.material3.IconButton
40
import androidx.compose.material3.MaterialTheme
41
import androidx.compose.material3.SmallFloatingActionButton
42
import androidx.compose.material3.Surface
43
import androidx.compose.runtime.Composable
44
import androidx.compose.runtime.LaunchedEffect
45
import androidx.compose.runtime.collectAsState
46
import androidx.compose.runtime.getValue
47
import androidx.compose.runtime.mutableIntStateOf
48
import androidx.compose.runtime.mutableStateOf
49
import androidx.compose.runtime.remember
50
import androidx.compose.runtime.saveable.rememberSaveable
51
import androidx.compose.runtime.setValue
52
import androidx.compose.ui.Alignment
53
import androidx.compose.ui.Modifier
54
import androidx.compose.ui.draw.clip
55
import androidx.compose.ui.graphics.Color
56
import androidx.compose.ui.layout.onSizeChanged
57
import androidx.compose.ui.platform.LocalContext
58
import androidx.compose.ui.platform.LocalDensity
59
import androidx.compose.ui.res.stringResource
60
import androidx.compose.ui.unit.dp
61
import com.pspdfkit.catalog.R
62
import com.pspdfkit.catalog.SdkExample
63
import com.pspdfkit.catalog.tasks.ExtractAssetTask
64
import com.pspdfkit.catalog.ui.theming.CatalogTheme
65
import com.pspdfkit.catalog.ui.theming.enableConfigurationEdgeToEdge
66
import com.pspdfkit.catalog.ui.theming.isNightTheme
67
import com.pspdfkit.compose.tabs.composables.NutrientTabBar
68
import com.pspdfkit.compose.tabs.composables.NutrientTabBarDefaults
69
import com.pspdfkit.compose.theme.MainToolbarColors
70
import com.pspdfkit.compose.theme.NutrientTheme
71
import com.pspdfkit.compose.theme.ToolbarPopupColors
72
import com.pspdfkit.compose.theme.UiColorScheme
73
import com.pspdfkit.compose.theme.getUiColors
74
import com.pspdfkit.compose.toolbar.composables.NutrientMainToolbar
75
import com.pspdfkit.configuration.activity.PdfActivityConfiguration
76
import com.pspdfkit.configuration.activity.TabBarHidingMode
77
import com.pspdfkit.jetpack.compose.interactors.rememberDocumentState
78
import com.pspdfkit.jetpack.compose.views.DocumentView
79
import com.pspdfkit.ui.DocumentCoordinator
80
import com.pspdfkit.ui.DocumentDescriptor
81
import com.pspdfkit.ui.tabs.PdfTabBarCloseMode
82
import com.pspdfkit.utils.getSupportParcelableExtra
83
import io.nutrient.ui.theme.getTabBarColors
84

85
/**
86
 * Shows several documents in one [DocumentView] under app-owned chrome that floats over the document: a
87
 * [NutrientMainToolbar] rendered as a pill, and below it a [NutrientTabBar] with rounded, spaced tabs in the app's
88
 * Material colors plus an add button that opens another document in a new tab. Because the chrome overlays the
89
 * document rather than sitting above it, hiding it in immersive mode leaves the page where it is.
90
 *
91
 * Both bars bind to coordinators the [com.pspdfkit.jetpack.compose.interactors.DocumentState] publishes once the
92
 * document UI is ready: the toolbar coordinator and the [DocumentCoordinator]. The SDK's own main toolbar and tab
93
 * bar are disabled through the configuration.
94
 */
95
class DocumentTabsComposeExample(context: Context) :
96
    SdkExample(context, R.string.documentTabsComposeExampleTitle, R.string.documentTabsComposeExampleDescription) {
97
    override fun launchExample(context: Context, configuration: PdfActivityConfiguration.Builder) {
98
        ExtractAssetTask.extract(WELCOME_DOC, title, context) { documentFile ->
99
            val intent = Intent(context, DocumentTabsComposeActivity::class.java)
100
            intent.putExtra(DocumentTabsComposeActivity.EXTRA_URI, Uri.fromFile(documentFile))
101
            context.startActivity(intent)
102
        }
103
    }
104
}
105

106
class DocumentTabsComposeActivity : AppCompatActivity() {
107
    override fun onCreate(savedInstanceState: Bundle?) {
108
        super.onCreate(savedInstanceState)
109

110
        val uri = intent.getSupportParcelableExtra(EXTRA_URI, Uri::class.java)!!
111
        val configuration = PdfActivityConfiguration.Builder(this)
112
            // The activity renders its own main toolbar and tab bar above the document, so the SDK's stay hidden.
113
            .defaultToolbarEnabled(false)
114
            .setTabBarHidingMode(TabBarHidingMode.HIDE)
115
            // Keep the pill to a single row: no document title overlay strip below the toolbar items.
116
            .documentTitleOverlayEnabled(false)
117
            .build()
118

119
        enableConfigurationEdgeToEdge(configuration)
120
        setContent {
121
            CatalogTheme(darkTheme = configuration.isNightTheme) {
122
                TabbedDocuments(uri, configuration)
123
            }
124
        }
125
    }
126

127
    companion object {
128
        const val EXTRA_URI = "DocumentTabsComposeActivity.DocumentUri"
129
    }
130
}
131

132
@Composable
133
private fun TabbedDocuments(uri: Uri, configuration: PdfActivityConfiguration) {
134
    val context = LocalContext.current
135
    val documentState = rememberDocumentState(uri, configuration)
136

137
    // The DocumentView publishes both coordinators once its UI is ready. They are null until then, so the bars are
138
    // rendered only once they are non-null.
139
    val toolbarCoordinator by documentState.toolbarCoordinator.collectAsState()
140
    val documentCoordinator by documentState.documentCoordinator.collectAsState()
141

142
    // Let the SDK handle back the layered way: close an overlay view (outline, page grid, ...) first.
143
    val overlayViewShown by documentState.viewWithOverlappingToolbarShown.collectAsState()
144
    val imeVisible = WindowInsets.ime.getBottom(LocalDensity.current) > 0
145
    BackHandler(enabled = overlayViewShown && !imeVisible) {
146
        documentState.handleBackPress()
147
    }
148

149
    // Cycles through the extra documents the add button opens.
150
    var nextDocument by rememberSaveable { mutableIntStateOf(0) }
151

152
    // The toolbar frame's visibility flips with immersive mode (tap-to-hide chrome). The SDK's own toolbar animates
153
    // on it; here the whole chrome, pill and tab bar, follows it so that both leave together.
154
    val chromeVisible = toolbarCoordinator?.let { it.frame.collectAsState().value.isVisible } ?: true
155

156
    // Overlay views (outline, page grid, ...) are laid out by the SDK inside the DocumentView, which the chrome
157
    // covers. Push their content below the chrome while one is shown; the document itself stays put.
158
    var chromeHeightPx by remember { mutableStateOf(0) }
159
    LaunchedEffect(overlayViewShown, chromeHeightPx) {
160
        documentState.setContentViewTopPadding(if (overlayViewShown) chromeHeightPx else 0)
161
    }
162

163
    val chromeColor = MaterialTheme.colorScheme.surfaceContainer
164
    Box(Modifier.fillMaxSize()) {
165
        // The document fills the screen and sits behind the chrome, so showing or hiding the chrome never moves it.
166
        DocumentView(
167
            documentState = documentState,
168
            modifier = Modifier.fillMaxSize(),
169
        )
170
        AnimatedVisibility(
171
            visible = chromeVisible,
172
            enter = slideInVertically { -it } + fadeIn(),
173
            exit = slideOutVertically { -it } + fadeOut(),
174
            modifier = Modifier.align(Alignment.TopCenter).background(Color.Transparent),
175
        ) {
176
            Column(
177
                Modifier
178
                    .fillMaxWidth()
179
                    .background(Color.Transparent)
180
                    .statusBarsPadding()
181
                    .onSizeChanged { chromeHeightPx = it.height },
182
            ) {
183
                toolbarCoordinator?.let { coordinator ->
184
                    // The floating, rounded, elevated main toolbar. NutrientTheme provides the pill's color scheme
185
                    // to the toolbar items, the title and the overflow popup.
186
                    NutrientTheme(colorScheme = pillToolbarColors()) {
187
                        Surface(
188
                            shape = RoundedCornerShape(PILL_CORNER_RADIUS),
189
                            shadowElevation = 8.dp,
190
                            color = Color.Transparent,
191
                            modifier = Modifier
192
                                .fillMaxWidth()
193
                                .padding(horizontal = 12.dp, vertical = 8.dp)
194
                                .clip(RoundedCornerShape(PILL_CORNER_RADIUS)),
195
                        ) {
196
                            NutrientMainToolbar(
197
                                coordinator = coordinator,
198
                                // The chrome already offsets the status bar, so the toolbar must not add its own inset.
199
                                windowInsets = WindowInsets(0, 0, 0, 0),
200
                                // The chrome animates as a whole, so the toolbar must not animate on its own too.
201
                                enter = EnterTransition.None,
202
                                exit = ExitTransition.None,
203
                            )
204
                        }
205
                    }
206
                }
207
                documentCoordinator?.let { coordinator ->
208
                    Row(verticalAlignment = Alignment.CenterVertically) {
209
                        NutrientTabBar(
210
                            documentCoordinator = coordinator,
211
                            modifier = Modifier.weight(1f).padding(top = 5.dp),
212
                            closeMode = PdfTabBarCloseMode.CLOSE_ONLY_SELECTED_TAB,
213
                            colors = getTabBarColors(
214
                                backgroundColor = Color.Transparent,
215
                                tabColor = MaterialTheme.colorScheme.surface,
216
                                selectedTabColor = MaterialTheme.colorScheme.primary,
217
                                selectedTextColor = MaterialTheme.colorScheme.onPrimary,
218
                            ),
219
                            dimensions = NutrientTabBarDefaults.dimensions(height = 52.dp, tabMinWidth = 96.dp),
220
                            tabShape = RoundedCornerShape(PILL_CORNER_RADIUS),
221
                            tabSpacing = 8.dp,
222
                            contentPadding = PaddingValues(start = 12.dp, top = 4.dp, end = 4.dp, bottom = 8.dp),
223
                        )
224
                        SmallFloatingActionButton({
225
                            val assetName = MORE_DOCUMENTS[nextDocument % MORE_DOCUMENTS.size]
226
                            nextDocument++
227
                            ExtractAssetTask.extract(assetName, assetName, context) { documentFile ->
228
                                openInNewTab(coordinator, Uri.fromFile(documentFile))
229
                            }
230
                        }) {
231
                            Icon(Icons.Default.Add, contentDescription = stringResource(R.string.documentTabsComposeExampleAddTab))
232
                        }
233
                    }
234
                }
235
            }
236
        }
237
    }
238
}
239

240
/** The pill's color scheme: the app's primary color with white content, for items, title and the overflow popup. */
241
@Composable
242
private fun pillToolbarColors(): UiColorScheme {
243
    val background = MaterialTheme.colorScheme.primary
244
    return getUiColors().copy(
245
        mainToolbar = MainToolbarColors(
246
            backgroundColor = background,
247
            textColor = Color.White,
248
            popup = ToolbarPopupColors(backgroundColor = background),
249
            titleTextColor = Color.White,
250
        ),
251
    )
252
}
253

254
/** Adds the document at [uri] to [coordinator] and switches to it, which selects its tab. */
255
private fun openInNewTab(coordinator: DocumentCoordinator, uri: Uri) {
256
    val descriptor = DocumentDescriptor.fromUri(uri)
257
    coordinator.addDocument(descriptor)
258
    coordinator.setVisibleDocument(descriptor)
259
}
260

261
private val MORE_DOCUMENTS = listOf("Classbook.pdf", "Aviation.pdf", "Annotations.pdf")
262
private val PILL_CORNER_RADIUS = 28.dp