raipankaj / JetToast

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

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! 😃