Hello everyone! 👋 In this post I will explain how to create custom dialogs in android using jetpack compose.
_
- Configuration used while creating this dialog — ,
- Compose version : 1.1.0-alpha06
- Kotlin version: 1.5.31
- Android studio : Android Studio Bumblebee | 2021.1.1 Patch 3 _
The final output screenshots of this tutorial will be like below image
While building this custom dialog, we are going to use some materials Icons so for that purpose we need below dependency to be placed in our app level build.gradle file.
implementation "androidx.compose.material:material-icons-extended:$compose_version"
Step 1: First we will create separate file for custom dialog named as CustomDialog.kt In that file we will placed below code
@Composable
fun CustomDialog(value: String, setShowDialog: (Boolean) -> Unit, setValue: (String) -> Unit) {
val txtFieldError = remember { mutableStateOf("") }
val txtField = remember { mutableStateOf(value) }
Dialog(onDismissRequest = { setShowDialog(false) }) {
Surface(
shape = RoundedCornerShape(16.dp),
color = Color.White
) {
Box(
contentAlignment = Alignment.Center
) {
Column(modifier = Modifier.padding(20.dp)) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = "Set value",
style = TextStyle(
fontSize = 24.sp,
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Bold
)
)
Icon(
imageVector = Icons.Filled.Cancel,
contentDescription = "",
tint = colorResource(android.R.color.darker_gray),
modifier = Modifier
.width(30.dp)
.height(30.dp)
.clickable { setShowDialog(false) }
)
}
Spacer(modifier = Modifier.height(20.dp))
TextField(
modifier = Modifier
.fillMaxWidth()
.border(
BorderStroke(
width = 2.dp,
color = colorResource(id = if (txtFieldError.value.isEmpty()) android.R.color.holo_green_light else android.R.color.holo_red_dark)
),
shape = RoundedCornerShape(50)
),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
leadingIcon = {
Icon(
imageVector = Icons.Filled.Money,
contentDescription = "",
tint = colorResource(android.R.color.holo_green_light),
modifier = Modifier
.width(20.dp)
.height(20.dp)
)
},
placeholder = { Text(text = "Enter value") },
value = txtField.value,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
onValueChange = {
txtField.value = it.take(10)
})
Spacer(modifier = Modifier.height(20.dp))
Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
Button(
onClick = {
if (txtField.value.isEmpty()) {
txtFieldError.value = "Field can not be empty"
return@Button
}
setValue(txtField.value)
setShowDialog(false)
},
shape = RoundedCornerShape(50.dp),
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
) {
Text(text = "Done")
}
}
}
}
}
}
}
Step 2: In this step we will create one button in launch dialog and print whatever user is going to add in that dialog. Paste below code in our MainActivity.kt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeDemoTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
HomePage()
}
}
}
}
}
@Composable
fun HomePage(){
val showDialog = remember { mutableStateOf(false) }
if(showDialog.value)
CustomDialog(value = "", setShowDialog = {
showDialog.value = it
}) {
Log.i("HomePage","HomePage : $it")
}
Scaffold(
topBar = {
TopAppBar(
title = {
Text(text = "Home")
}
)
}) {
Box(modifier = Modifier.background(Color.White)) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Button(onClick = {
showDialog.value = true
}) {
Text(text = "Open Dialog")
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetpackComposeDemoTheme {
HomePage()
}
}
That's it, you are done with Custom dialog using jetpack compose.
Please follow to get updated posts and hit like to motivate me
Thanks 😊🙏
If this post was helpful, please click like button below a few times to show your support!
Top comments (0)