Message Bar Compose — My First Open-Source Library on Github!

3 min readNov 20, 2022

Built with Love in Kotlin and Jetpack Compose.

Today I have an exciting news to share with you. I’ve built my first library with Kotlin and Jetpack Compose!

Message Bar is a simple Animated UI component that you can wrap around your composable content. This component is used to display Error/Success messages to your users, and it is built to supports Material 3 design system.

There are two different types of Message Bar. Error and Success. The main difference between those two are the colors, and a copy button. Copy button is available only on Error Message Bar. And when we are talking about the colors of this UI Component, the great thing is, that this component fully supports Material 3 design system.

Even though it is a simple UI component, there’s still a lot of room for improvement. In the following months I’ll definitely publish new releases and make it more customizable.

Download

Add the dependency below to your module’s build.gradle file:

dependencies {
    implementation 'com.github.stevdza-san:MessageBarCompose:1.0.2'
}

Add a repository in your settings.gradle file:

dependencyResolutionManagement {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Usage

There are two required parameters: MessageBarState and Content.

val state = rememberMessageBarState()
ContentWithMessageBar(messageBarState = state) {
     // Your Composable Screen               
}

You can control what kind of a Message Bar you want to display, by using the MessageBarState. There are two functions that you can use to achieve that: addError() and addSuccess(). They are self explanatory, the first one accepts an Exception type, while the other a simple String. depending on what kind of a message bar you want to see.

Message Bar — Success

val state = rememberMessageBarState()
ContentWithMessageBar(messageBarState = state) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = {
            state.addSuccess(message = "Successfully Updated.")
        }) {
            Text(text = "Click me")
        }
    }
}

Message Bar — Error

val state = rememberMessageBarState()
ContentWithMessageBar(messageBarState = state) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = {
            state.addError(exception = Exception("Internet Unavailable."))
        }) {
            Text(text = "Click me")
        }
    }
}

Like what you see? 💛

☕ Buy me a coffee: https://ko-fi.com/stevdza_san