KPdfViewerToolbar: connected toolbar for PDF controls

Add page summary, zoom controls, save, share, and thumbnail toggle to your PDF viewer with KPdfViewerToolbar. Fully customizable via config and style objects.

KPdfViewerToolbar is a horizontally scrollable row of AssistChip controls that connects directly to a KPdfViewerState. It displays a live page summary, zoom percentage, zoom in/out buttons, a save action, a share action, and a thumbnail strip toggle — all driven by the same state instance you pass to KPdfViewer. Every visible element, label, icon, and visual style is replaceable through configuration objects.

Signature

@Composable
fun KPdfViewerToolbar(
    state: KPdfViewerState,
    isThumbnailStripVisible: Boolean,
    onThumbnailToggle: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    onZoomInClick: (() -> Unit)? = { state.zoomIn() },
    onZoomOutClick: (() -> Unit)? = { state.zoomOut() },
    onSaveClick: (() -> Unit)? = { state.requestSave() },
    onShareClick: (() -> Unit)? = null,
    config: KPdfViewerToolbarConfig = KPdfViewerToolbarConfig.defaults(),
    style: KPdfViewerToolbarStyle = KPdfViewerToolbarStyle.defaults(),
)

Parameters

state · KPdfViewerState · required

The shared state holder. The toolbar observes loadState, currentPageIndex, and currentZoom to render live values and enable or disable controls.

isThumbnailStripVisible · Boolean · required

Controls the appearance of the thumbnail toggle chip and is the source of truth for strip visibility. Manage this with a remember { mutableStateOf(true) } in the parent composable.

onThumbnailToggle · (Boolean) -> Unit · required

Called when the user taps the thumbnail toggle chip. The argument is the new desired visibility value. Update your isThumbnailStripVisible state here.

modifier · Modifier · default: "Modifier"

Applied to the outer toolbar container. Use it to set width, padding, or elevation.

onZoomInClick · (() -> Unit)? · default: "{ state.zoomIn() }"

Called when the user taps the zoom-in chip. Disabled automatically when the current zoom equals state.config.maxZoom. Pass null to hide the chip entirely via KPdfViewerToolbarVisibility.

onZoomOutClick · (() -> Unit)? · default: "{ state.zoomOut() }"

Called when the user taps the zoom-out chip. Disabled automatically when the current zoom equals state.config.minZoom. Pass null to hide the chip entirely via KPdfViewerToolbarVisibility.

onSaveClick · (() -> Unit)? · default: "{ state.requestSave() }"

Called when the user taps the save chip. The default triggers the SDK-integrated save/export flow. Pass null to remove the chip.

onShareClick · (() -> Unit)? · default: "null"

Called when the user taps the share chip. No default implementation is provided — supply your own platform-specific share logic. The chip is hidden when this is null unless you set showShare = true in KPdfViewerToolbarVisibility.

config · KPdfViewerToolbarConfig · default: "KPdfViewerToolbarConfig.defaults()"

Controls which chips are visible and what text and icons they display. See KPdfViewerToolbarConfig below.

style · KPdfViewerToolbarStyle · default: "KPdfViewerToolbarStyle.defaults()"

Controls the visual appearance of the toolbar container and its chips. See KPdfViewerToolbarStyle below.

KPdfViewerToolbarConfig

KPdfViewerToolbarConfig groups the three configuration objects that control what the toolbar shows and how it labels its controls.

data class KPdfViewerToolbarConfig(
    val visibility: KPdfViewerToolbarVisibility,
    val strings: KPdfViewerToolbarStrings,
    val icons: KPdfViewerToolbarIcons,
)

Call KPdfViewerToolbarConfig.defaults() to get the default instance, then use .copy(...) to override individual fields.

KPdfViewerToolbarVisibility

Controls which chips render in the toolbar. All fields default to true.

showPageSummary · Boolean · default: "true"

Show the page summary chip (e.g. “Page 3 / 12”).

showZoomOut · Boolean · default: "true"

Show the zoom-out chip.

showZoomPercentage · Boolean · default: "true"

Show the current zoom percentage chip (e.g. “150%”).

showZoomIn · Boolean · default: "true"

Show the zoom-in chip.

showSave · Boolean · default: "true"

Show the save chip.

showShare · Boolean · default: "true"

Show the share chip.

showThumbnailToggle · Boolean · default: "true"

Show the thumbnail strip toggle chip.

KPdfViewerToolbarStrings

Provides the label text for each chip. Lambda fields receive live values from state so you can format strings dynamically.

pageSummaryText · (currentPage: Int, pageCount: Int) -> String

Formats the page summary label. Default: "Page 3 / 12". Receives the 1-based current page number and the total page count.

zoomPercentageText · (zoomPercent: Int) -> String

Formats the zoom percentage label. Default: "150%".

zoomOutText · String · default: "\"Zoom Out\""

Label for the zoom-out chip.

zoomInText · String · default: "\"Zoom In\""

Label for the zoom-in chip.

saveText · String · default: "\"Save\""

Label for the save chip.

shareText · String · default: "\"Share\""

Label for the share chip.

thumbnailToggleText · (isVisible: Boolean) -> String

Formats the thumbnail toggle label based on current strip visibility. Default: "Hide Thumbnails" when visible, "Show Thumbnails" when hidden.

KPdfViewerToolbarIcons

Supplies a leading icon composable for each chip. All fields are optional — pass null to render a chip with no icon.

pageSummaryIcon · (@Composable () -> Unit)?

Icon shown in the page summary chip.

zoomPercentageIcon · (@Composable () -> Unit)?

Icon shown in the zoom percentage chip.

zoomOutIcon · (@Composable () -> Unit)?

Icon shown in the zoom-out chip.

zoomInIcon · (@Composable () -> Unit)?

Icon shown in the zoom-in chip.

saveIcon · (@Composable () -> Unit)?

Icon shown in the save chip.

shareIcon · (@Composable () -> Unit)?

Icon shown in the share chip.

thumbnailVisibleIcon · (@Composable () -> Unit)?

Icon shown in the thumbnail toggle chip when the strip is currently visible.

thumbnailHiddenIcon · (@Composable () -> Unit)?

Icon shown in the thumbnail toggle chip when the strip is currently hidden.

KPdfViewerToolbarStyle

Controls the visual appearance of the toolbar container and every chip variant. Call KPdfViewerToolbarStyle.defaults() for a Material3-matched default, then .copy(...) to override individual fields.

minChipWidth · Dp · default: "88.dp"

Minimum width applied to every chip. Increase this to keep chips a consistent size when labels vary in length.

containerShape · Shape · default: "RoundedCornerShape(24.dp)"

Shape of the toolbar background container.

chipShape · Shape · default: "RoundedCornerShape(18.dp)"

Shape applied to every chip.

containerGradientColors · List<Color>

Horizontal gradient colors for the toolbar background. Defaults to a surface-to-surfaceVariant gradient derived from MaterialTheme.colorScheme.

containerBorderColor · Color

Color of the 1 dp border around the toolbar container.

chipColor · Color

Background color for default-appearance chips (interactive action chips).

tonalChipColor · Color

Background color for tonal chips (the zoom percentage display).

accentChipColor · Color

Background color for accent chips (the page summary and active thumbnail toggle).

contentPadding · Dp · default: "14.dp"

Padding inside the toolbar container, around the chip row.

itemSpacing · Dp · default: "10.dp"

Horizontal spacing between chips.

Default usage

@Composable
fun PdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)
    var thumbnailsVisible by remember { mutableStateOf(true) }

    Column(modifier = Modifier.fillMaxSize()) {
        KPdfViewerToolbar(
            state = viewerState,
            isThumbnailStripVisible = thumbnailsVisible,
            onThumbnailToggle = { thumbnailsVisible = it },
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
        )

        KPdfViewer(
            state = viewerState,
            modifier = Modifier.fillMaxWidth().weight(1f),
        )
    }
}

onShareClick defaults to null, so the share chip is not interactive unless you provide a handler. The chip still renders when showShare = true in KPdfViewerToolbarVisibility. To implement sharing, call viewerState.exportPdf() and pass the resulting bytes to your platform share sheet.

Full customization example

Override labels, icons, visibility, and style in a single call using .copy(...) on the defaults.

KPdfViewerToolbar(
    state = viewerState,
    isThumbnailStripVisible = thumbnailsVisible,
    onThumbnailToggle = { thumbnailsVisible = it },
    onShareClick = { sharePdf() },
    config = KPdfViewerToolbarConfig.defaults().copy(
        visibility = KPdfViewerToolbarVisibility(
            showPageSummary = true,
            showZoomOut = true,
            showZoomPercentage = true,
            showZoomIn = true,
            showSave = true,
            showShare = true,
            showThumbnailToggle = true,
        ),
        strings = KPdfViewerToolbarStrings.defaults().copy(
            zoomOutText = "Smaller",
            zoomInText = "Bigger",
            saveText = "Export",
            shareText = "Send",
            thumbnailToggleText = { visible ->
                if (visible) "Close Strip" else "Open Strip"
            },
        ),
        icons = KPdfViewerToolbarIcons.defaults().copy(
            zoomOutIcon = { Icon(Icons.Default.ZoomOut, contentDescription = "Zoom out") },
            zoomInIcon = { Icon(Icons.Default.ZoomIn, contentDescription = "Zoom in") },
            saveIcon = { Icon(Icons.Default.Save, contentDescription = "Save") },
            shareIcon = { Icon(Icons.Default.Share, contentDescription = "Share") },
        ),
    ),
    style = KPdfViewerToolbarStyle.defaults().copy(
        minChipWidth = 96.dp,
    ),
)

Replace the default text glyphs ("+", "-", "S") with Material Icons by overriding KPdfViewerToolbarIcons. The icon composable type is @Composable () -> Unit, so you can pass any composable content.