DEV Community 👩‍💻👨‍💻

Cover image for Awesome Dialog with Jetpack Compose
Farhan Roy -- | 😁
Farhan Roy -- | 😁

Posted on • Updated on

Awesome Dialog with Jetpack Compose

Jetpack Compose is a new toolkit for creating UI on native android. With jetpack compose building a display becomes easier and more intuitive. When this article was written, jetpack compose had reached version 1.1.0-beta01

Alright, let's go straight to the Awesome Dialog discussion. This is a third party library for jetpack compose, this library displays beautiful dialogues unlike ordinary dialogue material.

Actually you can create a display of dialogue like this, but it takes a long time to recreate. For that you only need to add this library to your jetpack cm=compose project and then you use it (plug & play)

🎉 Requirement

There are requirements that you must meet in order to use this library:

  1. Jetpack Compose version 1.0.3
  2. Android Gradle Plugin version 7.0.2
  3. Kotlin version 1.5.30

📦️ Install library

To install this library, in the build.gradle file add the jitpack repository

repositories {
    maven { url 'https://jitpack.io' }
}
Enter fullscreen mode Exit fullscreen mode

After that in app/build.gradle add the library with the latest version

dependencies {
     implementation 'com.github.farhanroy:compose-awesome-dialog:1.0.1'
}
Enter fullscreen mode Exit fullscreen mode

After that until the build process is complete 👍

✏️ How to use ?

How to use it, just call the composable function. The way to display the dialogue is almost the same as displaying the dialog as usual.

val openDialog = remember { mutableStateOf(false)  }

Button(onClick = { openDialog.value = true }) {
       Text(text = "Open")
}

if (openDialog.value) {
     ComposeAwesomeDialog(
        type = ComposeAwesomeDialogType.Success,
        title = "Success",
        desc = "This is success dialog",
        onDismiss = { openDialog.value = false }
     )
}
Enter fullscreen mode Exit fullscreen mode

✅ Run

Reference

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠