Customize your Jetpack Compose toolbar easily

Since Nutrient Android SDK 2024.2, our SDK provides a Toolbar that’s made entirely with Jetpack Compose. This toolbar is fully customizable and can be used with DocumentView. It’s an alternative version of our default toolbar that’s specifically designed to be used more flexibly with Jetpack Compose.

Just like top app bars(opens in a new tab), our MainToolbar has modifier, title, navigationIcon, and actions as parameters, as well as the documentState:

@Composable
fun MainToolbar(
    modifier: Modifier = Modifier,
    documentState: DocumentState,
    title: @Composable ((String) -> Unit)? = null,
    navigationIcon: @Composable (tintColor: Color) -> Unit = {},
    actions: @Composable RowScope.(tintColor: Color) -> Unit = {}
)

Usage

MainToolbar can be used in the following way:

MainToolbar(documentState = documentState)

Make sure to disable the default toolbar by adding defaultToolbarEnabled(false) to the existing PdfActivityConfiguration as follows:

val pdfActivityConfiguration = PdfActivityConfiguration
        .Builder(context)
        .defaultToolbarEnabled(false)
        .build()

val documentState = rememberDocumentState(pdf.toUri(), pdfActivityConfiguration)

MainToolbar is an independent composable, and to achieve immersive mode, its visibility needs to be handled explicitly. You can access the onImmersiveModeEnabled state from uiListener in DocumentManager and use it to manipulate the visibility of MainToolbar:

 var toolbarVisibility by remember { mutableStateOf(true) }
...
// Used inside `DocumentManager` in `DocumentView`.
uiListener = DefaultListeners.uiListeners(onImmersiveModeEnabled = { enabled ->
             toolbarVisibility = enabled
        })
...
AnimatedVisibility(toolbarVisibility) {
             MainToolbar(documentState = documentState)
       }

Exploring further

We have a dedicated GitHub public repository(opens in a new tab) demonstrating everything related to DocumentView and the MainToolbar.