InfoBar Compose

An Android Jetpack Compose library for displaying on-screen messages. Unlike the built-in Snackbar from the Compose Material library, the InfoBar can be properly displayed without additional requirements, like Scaffold, SnackbarHost / SnackbarHostState, or manually starting new coroutines to show the on-screen message.

Although the InfoBar composable is inspired by the Snackbar, it does not aim to entirely copy its design or behavior.

Test drive this library, demo app available on Google Play!

Usage

Include the library in your module-level build.gradle file:

repositories {
    mavenCentral()
}

dependencies {
    implementation 'com.radusalagean:info-bar-compose:1.0.0'
}

The simplest configuration of an InfoBar is showcased below:

var message: InfoBarMessage? by remember { mutableStateOf(null) }

// Assign the message on an event callback (button click, download complete, message received, etc.):
// message = InfoBarMessage(text = "Example message")

InfoBar(offeredMessage = message) {
    // ⚠️ Important step: We are nulling out the message in the trailing lambda (onDismiss function)
    message = null
}

A complete working example:

setContent {
    YourAppTheme {
        Box(Modifier.fillMaxSize().padding(16.dp)) {
            var message: InfoBarMessage? by remember { mutableStateOf(null) }
            Button(
                modifier = Modifier.align(Alignment.Center),
                onClick = { message = InfoBarMessage(text = "Example message") }
            ) {
                Text("Show message")
            }
            InfoBar(offeredMessage = message) {
                message = null
            }
        }
    }
}

InfoBar types

The InfoBar composable has 2 signatures:

• One for a standard version, which already has a layout defined, inspired by the Material design Snackbar. This composable has multiple parameters exposed, allowing for increased customizability of the predefined standard layout.
• One for a generic version, allowing to pass a composable layout defined in the client app.

Configuration parameters

InfoBar composable:

InfoBarMessage class:

Using the generic composable

If the standard InfoBar signature does not entirely meet your requirements in terms of layout, you can use the generic InfoBar signature, which allows you to pass a custom layout composable:

1. Extend the BaseInfoBarMessage abstract class and define your custom message data structure:

   class CustomMessage(
       val textString: String,
       val icon: ImageVector,
       val iconColor: Color,
       val textColor: Color = Color.Unspecified,
       override val backgroundColor: Color? = null,
       override val displayTimeSeconds: Int? = 4,
   ) : BaseInfoBarMessage() {
       override val containsControls: Boolean = false
   }

2. Declare the content composable that defines your layout:

   val content: @Composable (CustomMessage) -> Unit = { message ->
       Row {
           Icon(
               modifier = Modifier.padding(8.dp).align(Alignment.CenterVertically),
               imageVector = message.icon,
               contentDescription = null,
               tint = message.iconColor
           )
           Text(
               modifier = Modifier.align(Alignment.CenterVertically),
               text = message.textString,
               color = message.textColor
           )
       }
   }

3. Display the message:

   setContent {
       YourAppTheme {
           Box(Modifier.fillMaxSize().padding(16.dp)) {
               var message: CustomMessage? by remember { mutableStateOf(null) }
               Button(
                   modifier = Modifier.align(Alignment.Center),
                   onClick = { 
                       message = CustomMessage(
                           textString = "This is a custom message",
                           textColor = Color(0xFF414141),
                           icon = Icons.Rounded.Info,
                           iconColor = Color(0xFF27C54D),
                           backgroundColor = Color(0xFFE3F1E6)
                       )
                   }
               ) {
                   Text("Show message")
               }
               InfoBar(offeredMessage = message, content = content) {
                   message = null
               }
           }
       }
   }

   

Sample App

More complex usage examples are available in the sample app. Download from Google Play.

Photo credits: The sample app contains 2 photos, used under Pexels license. The authors of these photos are Kittichai Chumanee and Karolina Grabowska.

Contributions

Found a bug or have a suggestion? Please open an issue.

Support

If you use this library and enjoy it, please support it by starring it on GitHub. 🌟

Further reading

There is an article available that showcases this library in a bit more detail.

License

Apache License 2.0, see the LICENSE file for details.