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 levelbuild.gradle file.
implementation "androidx.compose.material:material-icons-extended:$compose_version"Step 1: First we will create separate file for custom dialog named asCustomDialog.kt In that file we will placed below code
@ComposablefunCustomDialog(value:String,setShowDialog:(Boolean)->Unit,setValue:(String)->Unit){valtxtFieldError=remember{mutableStateOf("")}valtxtField=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_lightelseandroid.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 ourMainActivity.kt
classMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{JetpackComposeDemoTheme{Surface(modifier=Modifier.fillMaxSize(),color=MaterialTheme.colors.background){HomePage()}}}}}@ComposablefunHomePage(){valshowDialog=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)@ComposablefunDefaultPreview(){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)
For further actions, you may consider blocking this person and/orreporting abuse
