Sidebar configuration | Navigation SDK UX Framework | Android Docs

Sidebars are the vertical control containers on the left and right sides of the screen in landscape orientation. The UX Framework exposes options to let users hide them, change their background or show different controls.

Let’s say your UX team realized that the left sidebar is unnecessary and the right sidebar should only display voice and camera buttons in different corners on a white semi-transparent background:

Dash.init(
    context = this,
    accessToken = getString(R.string.mapbox_access_token),
) {
    ui {
        leftSidebar {
            visible = false
        }
        rightSidebar {
            visible = true
            background = ColorUtils.setAlphaComponent(Color.WHITE, 128)
            controls = listOf(DashSidebarControl.Voice, DashSidebarControl.Space(), DashSidebarControl.Camera)
        }
    }
}

It is also possible to display custom buttons and controls in sidebars:

DashSidebarControl.Button(
    iconId = R.drawable.my_button,
    onClick = {
        // handle my button click
    },
)

DashSidebarControl.Custom(
    content = { modifier ->
        Image(
            modifier = modifier.clickable {
                // handle my button click
            },
            painter = painterResource(id = R.drawable.my_button),
            contentDescription = "my button",
        )
    },
)

Was this page helpful?