This is a Jetpack Compose full-screen dialog design. It shows a “Congratulations! you have won a medal” message with an image.
The dialog is made with composables like Surface, Column, Icon, Text, and Button. The Surface needs a child which is the Column. I put everything inside the Column. Its children are arranged at the center both vertically and horizontally. There is a 20.dp gap between the children.
The Jetpack Compose full-screen dialog composable takes two parameters – primaryColor and context. The primaryColor is applied to the icon and the button. The context is useful for displaying the toast message. You can adjust the values according to your requirements.
The dialog’s state is managed by the variable called dialogOpen. Initially, it is false which means the dialog is closed. When you tap on the “OPEN DIALOG” button, its value becomes true and the full-screen dialog will show up. The Dialog composable is placed in an if condition. To make the dialog full screen, you need to use the usePlatformDefaultWidth parameter from the DialogProperties Class. Set it to false, and the dialog occupies the whole screen.
Before downloading the source code, make sure that you are using the latest version of the Android Studio. Jetpack Compose doesn’t work in the older versions.
Final Output:
If the video isn’t working, watch it on the YouTube.
Helpful Links to Understand the Code:
Resources Used in the Project:
Here are the Gradle files used in the project.
Download the medal image from pixabay. Select the SVG version. Convert it to XML in Android Studio.
For Roboto Font, visit Google Fonts.
Jetpack Compose Full Screen Dialog Source Code:
MainActivity.kt:
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
/*
You can use the following code for commercial purposes with some restrictions.
Read the full license here: http://semicolonspace.com/semicolonspace-license/
For more designs with source code, visit:
https://semicolonspace.com/jetpack-compose-samples/
*/
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
FullScreenDialog()
}
}
}
}
}
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun FullScreenDialog(
primaryColor: Color = Color(0xFF35898F),
context: Context = LocalContext.current.applicationContext
) {
// store the dialog open or close state
var dialogOpen by remember {
mutableStateOf(false)
}
if (dialogOpen) {
Dialog(
onDismissRequest = {
dialogOpen = false
},
properties = DialogProperties(
usePlatformDefaultWidth = false // experimental
)
) {
Surface(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
// medal icon
Icon(
painter = painterResource(id = R.drawable.medal_icon),
contentDescription = "Medal icon",
tint = primaryColor,
modifier = Modifier.size(size = 150.dp)
)
Text(
text = "Congratulations!",
fontSize = 22.sp,
modifier = Modifier.padding(top = 26.dp),
fontFamily = FontFamily(
Font(
resId = R.font.roboto_bold,
weight = FontWeight.Bold
)
)
)
Text(
text = "You have won a medal.",
fontSize = 20.sp,
modifier = Modifier.padding(top = 20.dp),
fontFamily = FontFamily(
Font(
resId = R.font.roboto_regular,
weight = FontWeight.Normal
)
)
)
Button(
onClick = {
Toast.makeText(context, "Share Button", Toast.LENGTH_SHORT).show()
},
modifier = Modifier.padding(top = 20.dp),
shape = RoundedCornerShape(percent = 25)
) {
Text(
text = "Share",
fontFamily = FontFamily(
Font(
resId = R.font.roboto_medium,
weight = FontWeight.Medium
)
),
fontSize = 18.sp
)
}
}
}
}
}
Button(onClick = {
dialogOpen = true
}) {
Text(text = "OPEN DIALOG")
}
}
If you like it, take a look at 25+ UI designs made with Compose.
Related: