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
:
@Composablefun 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(opens in a new tab), 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
.