JetToast

Show highly customizable toast messages in your app built with Jetpack Compose.

Now with Jetpack Compose you can easily add toast to your existing app within 5 lines of code.

To get started with JetToast just add the maven url and the dependency

build.gradle (Project level)

allprojects {
    repositories {
    ...
    //Add this url
    maven { url 'https://jitpack.io' }
    }
}

If you are using Android Studio Arctic Fox and do not have allProjects in build.gradle then add following maven url in settings.gradle like below

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        //Add this url
        maven { url 'https://jitpack.io' }
        jcenter() // Warning: this repository is going to shut down soon
    }
}

Once you have added the maven url now add the Stories dependency in the build.gradle (module level)

implementation 'com.github.raipankaj:JetToast:0.1.0'

Congratulations, you have successfully added the dependency. Now to get started with JetToast add the following code snippet

var showToast by remember {
    mutableStateOf(false)
}

Toast(
    message = "Simple Toast",
    showToast = showToast,
    afterToastShown = { showToast = it }
)

Toast composable provides an ability to change text color, background color, width, shape, enter/exit animation and many more options to customize the toast message. Here are all the parameters accepted by Toast composable.

@Composable
fun Toast(
    message: String,
    showToast: Boolean, 
    afterToastShown: (Boolean) -> Unit,
    toastDelay: ToastDelay = ToastDelay.ShortDelay,
    shape: Shape = CircleShape,
    background: Color = Color.Gray,
    textColor: Color = Color.White,
    alignment: Alignment = Alignment.BottomCenter,
    fillMaxWidth: Boolean = false,
    leadingIconSpace: Dp = 0.dp,
    trailingIconSpace: Dp = 0.dp,
    disableAutoHide: Boolean = false,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    enter: EnterTransition = fadeIn(animationSpec = tween(500, easing = LinearEasing)),
    exit: ExitTransition = fadeOut(animationSpec = tween(500, easing = LinearEasing)),
)

Here is a code snippet to show default toast

@Composable
fun DefaultToast() {
    var showToast by remember {
        mutableStateOf(false)
    }

    Column(Modifier.height(80.dp)) {

        Text("Default Toast", Modifier.fillMaxWidth().clickable {
                showToast = true
        }, textAlign = TextAlign.Center)
        Toast(
            message = "Simple Toast",
            showToast = showToast,
            afterToastShown = { showToast = it },
        )
    }
}

You can also show toast like a snackbar

@Composable
fun FixedUntilClickToast() {
    var showToast by remember {
        mutableStateOf(false)
    }

    Column(Modifier.height(80.dp)) {

        Text("Fixed Until Click Toast", Modifier.fillMaxWidth().clickable {
            showToast = true
        }, textAlign = TextAlign.Center)
        Toast(
            message = "Fixed Until Click Toast",
            showToast = showToast,
            afterToastShown = { showToast = it },
            background = Color.Black,
            trailingIconSpace = 4.dp,
            disableAutoHide = true,
            fillMaxWidth = true,
            shape = RectangleShape,
            trailingContent = {
               Text(text = "OK", modifier = Modifier.clickable { showToast = false },
               color = Color.White)
            }
        )
    }
}

Here are all the supported types of Toast

Note: If you like this library, then please hit the star button! 😃