5

I'm trying to implement a dialogFragment with custom layout in Jetpack compose but can't find any samples. Do I need to wrap the UI components inside a Card/Surface and then wrap that inside a Dialog? Can't find any examples in the documentation, all the samples are about Alert dialogs but I need to customise the layout. Thanks.

2

3 Answers 3

7

You can use the Dialog composable:

Dialog(
    onDismissRequest = { /* ... */ },
    DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = false)
) {
    /* Your custom layout */
}
3
  • Thanks, is there a way to make rounded corners on the Dialog?
    – AndroidDev
    Sep 17, 2021 at 8:17
  • @AndroidDev Yes. Just use in the content something like: Surface(modifier= Modifier.size(150.dp), shape = RoundedCornerShape(8.dp)){} Sep 17, 2021 at 12:56
  • Looks like you need to implement the dismiss call in onDismissRequest. Do you have example?
    – Arst
    Apr 18, 2022 at 1:45
1
package com.rejia.manage.module.xiangshan

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.Window
import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.fragment.app.DialogFragment

class TestDialogFragment : DialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        dialog!!.requestWindowFeature(Window.FEATURE_NO_TITLE)
        return ComposeView(requireContext()).apply {
            setContent {
                Column(modifier = Modifier.fillMaxWidth()) {
                    Text(
                        text = "溫馨提示",
                        textAlign = TextAlign.Center,
                        fontSize = 18.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(30.dp),
                    )
                    Text(
                        text = "回家吃饭啦",
                        textAlign = TextAlign.Center,
                        fontSize = 18.sp,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(start = 30.dp, end = 30.dp, bottom = 30.dp),
                    )

                    Row(
                        modifier = Modifier
                            .background(Color.Gray)
                            .padding(top = 1.dp)
                            .background(Color.White)
                            .height(48.dp)
                    ) {
                        TextButton(
                            shape = RoundedCornerShape(0.dp),
                            modifier = Modifier
                                .fillMaxHeight()
                                .weight(1F),
                            onClick = {
                                Toast.makeText(requireContext(), "onCancelClick", Toast.LENGTH_SHORT).show()
                            },
                        ) {
                            Text(text = "取消", color = Color.Gray)
                        }
                        Spacer(
                            modifier = Modifier
                                .width(1.dp)
                                .fillMaxHeight()
                                .background(Color.Gray)
                        )
                        TextButton(
                            shape = RoundedCornerShape(0.dp),
                            modifier = Modifier
                                .fillMaxHeight()
                                .weight(1F),
                            onClick = {
                                Toast.makeText(requireContext(), "onConfirmClick", Toast.LENGTH_SHORT).show()
                            },
                        ) {
                            Text(text = "确定")
                        }
                    }
                }
            }
        }
    }
}
TestDialogFragment().show(parentFragmentManager, "TestDialogFragment")

show

0

Pass a composable into the text field when composing the AlertDialog. The parameter text consumes a composable where you can layout whatever you want as a normal composable.

@Composable
fun AlertDialog(
    onDismissRequest: (() -> Unit)?,
    confirmButton: (@Composable () -> Unit)?,
    modifier: Modifier? = Modifier,
    dismissButton: (@Composable () -> Unit)? = null,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape? = MaterialTheme.shapes.medium,
    backgroundColor: Color? = MaterialTheme.colors.surface,
    contentColor: Color? = contentColorFor(backgroundColor),
    properties: DialogProperties? = DialogProperties()
): Unit

The source code can be found here:

https://github.com/androidx/androidx/blob/androidx-main/compose/material/material/src/androidMain/kotlin/androidx/compose/material/AndroidAlertDialog.android.kt

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.