DEV Community

Cover image for CMPToast: Toasts for Compose Multiplatform Projects
Mobile innovation Network
Mobile innovation Network

Posted on

CMPToast: Toasts for Compose Multiplatform Projects

🍞️ CMPToast is a Compose Multiplatform library that simplifies the creation of toasts in your mobile applications. CMPToast stands out for a number of reasons:

  • Cross-platform support: Works on both Android and iOS, making it perfect for Compose Multiplatform projects.
  • Customization: Easily tailor toasts with properties like background color, text size, and position.
  • Lightweight: CMPToast is designed to be light and efficient, so it won't affect your app's performance.
  • Simple integration: Just add the dependency, and you're good to go!

 

🚀 Getting Started with CMPToast

To get started with CMPToast, simply add the following dependency to your project's build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:cmptoast:1.0.1")
}
Enter fullscreen mode Exit fullscreen mode

 
🖥️ Platforms Supported

  • Android 🤖
  • iOS 🍎

 

🎨 Customizing CMPToast

Let's dive into some practical examples of how to customize your toasts in CMPToast.

 
⏳ Short Toast
To show a toast with a short duration, you can use the following:

showToast(
    message = "This is Short Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    duration = ToastDuration.Short
)
Enter fullscreen mode Exit fullscreen mode

 
⏳ Long Toast
If you need the toast to stay on the screen longer, here's how to show a long-duration toast:

showToast(
    message = "This is Long Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    duration = ToastDuration.Long
)
Enter fullscreen mode Exit fullscreen mode

 
📍 Top Toast
To position the toast at the top of the screen, use the gravity property:

showToast(
    message = "This is Top Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    gravity = ToastGravity.Top
)
Enter fullscreen mode Exit fullscreen mode

 
🎯 Center Toast
To center the toast on the screen:

showToast(
    message = "This is Center Toast",
    backgroundColor = Color.White,
    textColor = Color.Black,
    gravity = ToastGravity.Center
)
Enter fullscreen mode Exit fullscreen mode

 
🎨 Colored Toast
If you want to give your toast a custom color, you can easily do so:

showToast(
    message = "This is Colored Toast",
    backgroundColor = Color(0xFF27AD9D)
)
Enter fullscreen mode Exit fullscreen mode

 

⚙️ Customizable Properties

CMPToast provides several properties that allow you to fully customize your toast notifications.

  • message (String): The message text that will be displayed in the toast.
  • gravity (ToastGravity): Specifies where the toast will appear on the screen. You can position it at the top, center, or bottom using values like ToastGravity.Top, ToastGravity.Center, and ToastGravity.Bottom.
  • backgroundColor (Color): Allows you to customize the background color of the toast.
  • textColor (Color): Lets you change the color of the message text.
  • duration (ToastDuration): Controls how long the toast will be displayed. You can choose between ToastDuration.Short and ToastDuration.Long.
  • padding (ToastPadding?): Optional padding for the toast content to adjust the spacing.
  • textSize (TextUnit): Sets the size of the message text.
  • topPadding (Int): Adds extra padding to the top of the toast for further positioning customization.
  • bottomPadding (Int): Adds extra padding to the bottom of the toast.
  • cornerRadius (Int?): Optionally rounds the corners of the toast by specifying a corner radius.

 

Checkout the complete code on Github:
[https://github.com/Chaintech-Network/CMPToast]

Head over to the repository to try it out and contribute to the project!

Feel free to give it a star ⭐ and explore how CMPToast can elevate your user experience with customizable toast notifications in Compose Multiplatform projects.


Connect with us 👇

[https://www.linkedin.com/showcase/mobile-innovation-network/]

[https://github.com/Chaintech-Network]

Top comments (0)