Collapsing Toolbar in Jetpack Compose

What is Toolbar? 

A Toolbar in Android is an element present on the top of the application screen which generally displays the application name. This is also known as action bar or app bar. In Jetpack Compose we don't get any default app bar so in this post we will create a collapsing toolbar.

What is Collapsing Toolbar? 

Collapsing Toolbar is a toolbar that collapses when the application is scrolled down and holds up when scrolled up to the top. Collapsing toolbar is used with top app bar there are 4 types of top app bar is provided by Material Design Components. We can use one of them .

Also Read How to create navigation drawer in jetpack compose

Top App Bar

1. Top App Bar
2. Centered Aligned Top App Bar
3. Medium Top App Bar
4. Large Top App Bar

Also Read How to create Divider in Jetpack Compose

How to build Collapsing Toolbar using jetpack compose

This function, Collapsing(), demonstrates how to create a collapsing toolbar using the Material3 design system's components in Jetpack Compose. A collapsing toolbar changes its appearance (like hiding or shrinking) as the user scrolls through the content.

Key Concepts

1. Annotations

• @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter"): Suppresses warnings related to padding parameters in Scaffold.
• @OptIn(ExperimentalMaterial3Api::class): Allows the use of APIs that are experimental in the Material3 library.

2. Scroll Behavior

The variable scrollBehavior is created using:

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

• TopAppBarDefaults.enterAlwaysScrollBehavior(): Configures the toolbar to react to scroll gestures. For example, it hides or reveals the toolbar as you scroll.

3. Scaffold

The Scaffold is the base layout structure. It manages key UI components like the top bar, bottom bar, and the content of the screen.

• modifier:

Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)

Links the scroll behavior of the TopAppBar with the scrolling content in the screen.

• topBar:

MediumTopAppBar(

    title = { Text(text = "Collapsing Tool Bar") },

    navigationIcon = {

        IconButton(onClick = { /*TODO*/ }) {

            Icon(imageVector = Icons.Default.Menu, contentDescription = "")

        }

    },

    scrollBehavior = scrollBehavior

)

• Creates a medium-sized app bar with:
• Title: Displays "Collapsing Tool Bar."
• Navigation Icon: A menu icon (default Material Icon).
• Scroll Behavior: Enables the collapsing toolbar effect.

• content:

content = { innerPadding ->

    Column(

        modifier = Modifier

            .fillMaxWidth()

            .padding(12.dp)

            .padding(innerPadding)

            .verticalScroll(rememberScrollState())

    ) {

        Text(

            modifier = Modifier.padding(8.dp),

            text = stringResource(id = R.string.contents)

        )

    }

}

• Defines the content of the screen.
• Uses a Column to arrange child views vertically.
• fillMaxWidth(): Makes the Column take up the full screen width.
• padding(12.dp): Adds 12dp padding around the content.
• padding(innerPadding): Adds additional padding to avoid overlapping with system UI.
• verticalScroll(rememberScrollState()): Makes the content scrollable vertically.

• Child Content:

Text(

    modifier = Modifier.padding(8.dp),

    text = stringResource(id = R.string.contents)

)

• Displays text using the string resource R.string.contents.

Collapsing Behavior

The MediumTopAppBar collapses as you scroll through the Column content due to the scrollBehavior provided.

Full Code

Steps:

Displays text using the string resource R.string.contents.

Create a new project by selecting jetpack compose you have a file named MainActivity use the following code

MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            JetpackComposeSkillTheme {
        
                Collapsing()
            }
        }
    }
}

Collapsing

package com.codingbihar.jetpackcomposeskill

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Collapsing() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                title = { Text(
                    // color = Color.Red,
                    text = "Collapsing Tool Bar") },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(imageVector = Icons.Default.Menu,
                            contentDescription = "")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
        content =
        { innerPadding ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(12.dp)
                    .padding(innerPadding)
                    .verticalScroll(rememberScrollState())
            ) {
                Text(
                    modifier = Modifier.padding(8.dp),
                    text = stringResource(id = R.string.contents)
                )
            }

        }
    )
}

Output :