Split Screen (Compose)

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.Bundle
14
import androidx.activity.compose.setContent
15
import androidx.appcompat.app.AppCompatActivity
16
import androidx.compose.foundation.layout.Row
17
import androidx.compose.foundation.layout.fillMaxHeight
18
import androidx.compose.foundation.layout.fillMaxSize
19
import androidx.compose.foundation.layout.systemBarsPadding
20
import androidx.compose.material3.VerticalDivider
21
import androidx.compose.runtime.Composable
22
import androidx.compose.ui.Modifier
23
import androidx.compose.ui.platform.LocalContext
24
import com.pspdfkit.catalog.R
25
import com.pspdfkit.catalog.SdkExample
26
import com.pspdfkit.catalog.tasks.ExtractAssetTask
27
import com.pspdfkit.catalog.ui.theming.CatalogTheme
28
import com.pspdfkit.configuration.activity.PdfActivityConfiguration
29
import com.pspdfkit.configuration.activity.ThumbnailBarMode
30
import com.pspdfkit.configuration.activity.UserInterfaceViewMode
31
import com.pspdfkit.configuration.page.PageFitMode
32
import com.pspdfkit.configuration.page.PageLayoutMode
33
import com.pspdfkit.configuration.page.PageScrollDirection
34
import com.pspdfkit.configuration.page.PageScrollMode
35
import com.pspdfkit.jetpack.compose.interactors.rememberDocumentState
36
import com.pspdfkit.jetpack.compose.views.DocumentView
37
import com.pspdfkit.utils.getSupportParcelableExtra
38

39
/**
40
 * Shows two documents side by side, each in its own [DocumentView] composable. The two views are fully independent:
41
 * they show different documents and each one is created with its own [PdfActivityConfiguration], so scrolling,
42
 * zooming, searching or annotating in one pane leaves the other untouched.
43
 */
44
class ComposeSplitScreenExample(context: Context) :
45
    SdkExample(context, R.string.composeSplitScreenExampleTitle, R.string.composeSplitScreenExampleDescription) {
46
    override fun launchExample(context: Context, configuration: PdfActivityConfiguration.Builder) {
47
        // Both documents live in the app's assets and need to be extracted to internal storage before they can be
48
        // opened. Each pane gets its own document, so we extract both before launching the activity.
49
        ExtractAssetTask.extract(WELCOME_DOC, title, context) { leadingFile ->
50
            ExtractAssetTask.extract(ANNUAL_REPORT_DOC, title, context) { trailingFile ->
51
                val intent = Intent(context, ComposeSplitScreenActivity::class.java)
52
                intent.putExtra(ComposeSplitScreenActivity.EXTRA_LEADING_URI, Uri.fromFile(leadingFile))
53
                intent.putExtra(ComposeSplitScreenActivity.EXTRA_TRAILING_URI, Uri.fromFile(trailingFile))
54
                context.startActivity(intent)
55
            }
56
        }
57
    }
58

59
    private companion object {
60
        const val ANNUAL_REPORT_DOC = "AnnualReport.pdf"
61
    }
62
}
63

64
class ComposeSplitScreenActivity : AppCompatActivity() {
65
    override fun onCreate(savedInstanceState: Bundle?) {
66
        super.onCreate(savedInstanceState)
67

68
        val leadingUri = intent.getSupportParcelableExtra(EXTRA_LEADING_URI, Uri::class.java)!!
69
        val trailingUri = intent.getSupportParcelableExtra(EXTRA_TRAILING_URI, Uri::class.java)!!
70

71
        setContent {
72
            CatalogTheme {
73
                // A plain Row is all that's needed to place two documents next to each other: each DocumentView
74
                // hosts its own PDF fragment, and Compose keeps both of them alive side by side.
75
                Row(modifier = Modifier.fillMaxSize().systemBarsPadding()) {
76
                    // The leading view scrolls continuously in the vertical direction.
77
                    DocumentView(
78
                        documentState = rememberDocumentState(leadingUri, continuousVerticalConfiguration()),
79
                        modifier = Modifier.weight(1f),
80
                    )
81

82
                    VerticalDivider(modifier = Modifier.fillMaxHeight())
83

84
                    // The trailing view scrolls page by page in the horizontal direction.
85
                    DocumentView(
86
                        documentState = rememberDocumentState(trailingUri, perPageHorizontalConfiguration()),
87
                        modifier = Modifier.weight(1f),
88
                    )
89
                }
90
            }
91
        }
92
    }
93

94
    /**
95
     * Configuration shared by both panes. Each pane is only half as wide as the window, so the thumbnail bar is
96
     * disabled to leave as much room as possible for the page itself.
97
     */
98
    @Composable
99
    private fun splitPaneConfiguration() = PdfActivityConfiguration
100
        .Builder(LocalContext.current)
101
        .layoutMode(PageLayoutMode.SINGLE)
102
        .setThumbnailBarMode(ThumbnailBarMode.THUMBNAIL_BAR_MODE_NONE)
103
        // Keep both toolbars on screen so it's obvious that each pane has its own independent UI.
104
        .setUserInterfaceViewMode(UserInterfaceViewMode.USER_INTERFACE_VIEW_MODE_VISIBLE)
105

106
    @Composable
107
    private fun continuousVerticalConfiguration() = splitPaneConfiguration()
108
        .scrollDirection(PageScrollDirection.VERTICAL)
109
        .scrollMode(PageScrollMode.CONTINUOUS)
110
        .fitMode(PageFitMode.FIT_TO_WIDTH)
111
        .build()
112

113
    @Composable
114
    private fun perPageHorizontalConfiguration() = splitPaneConfiguration()
115
        .scrollDirection(PageScrollDirection.HORIZONTAL)
116
        .scrollMode(PageScrollMode.PER_PAGE)
117
        .fitMode(PageFitMode.FIT_TO_SCREEN)
118
        .build()
119

120
    companion object {
121
        const val EXTRA_LEADING_URI = "ComposeSplitScreenActivity.LeadingDocumentUri"
122
        const val EXTRA_TRAILING_URI = "ComposeSplitScreenActivity.TrailingDocumentUri"
123
    }
124
}