Material Design 3 DialogFragment is not styled like Dialogs using MaterialAlertDialogBuilder

Question

I have migrated migrated to Material Design 3 and notice that the DialogFragments are not styled like dialogs created using MaterialAlertDialogBuilder. Do you need to add customized styling to DialogFragments? I thought it should work out of the box. What I notice is that DialogFragments do not have rounded corners, and surface color doesn't match dialogs you create using MaterialAlertDialogBuilder. I'm using DialogFragment in the cases where I need a custom view and cannot use MaterialAlertDialogBuilder. So how would I style it to look like a MaterialAlertDialog?

Answer 1

Found the solution here https://dev.to/bhullnatik/how-to-use-material-dialogs-with-dialogfragment-28i1

Here's the sample code where you need to overwrite onCreateDialog and use the standard MaterialAlertDialogBuilder

public class YourSexyMaterialDialogFragment extends DialogFragment {

  View theDialogView;

  @Override
  public Dialog onCreateDialog(Bundle savedInstanceState) {
    MaterialAlertDialogBuilder builder = new MaterialAlertDialogBuilder(requireActivity());
    theDialogView = onCreateView(LayoutInflater.from(requireContext()), null, savedInstanceState);
    builder.setView(theDialogView);

    return builder.create();
  }

  @Override
  public View getView() {
      return theDialogView;
  }

  @Override
  public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
  Bundle savedInstanceState) {
    // remains the same where you inflate your custom view and setup ui components
  }  

}

Answer 2

You have 2 options.

• override the theme using the getTheme() method

Something like:

import androidx.fragment.app.DialogFragment

class RoundedDialog: DialogFragment() {

    override fun getTheme() = R.style.RoundedCornersDialog

    //....

}

with the style:

<style name="RoundedCornersDialog" parent="Theme.Material3.DayNight.Dialog">
    <item name="dialogCornerRadius">16dp</item>
</style>

• using the MaterialAlertDialogBuilder in the onCreateDialog method.

Something like:

import androidx.fragment.app.DialogFragment
import com.google.android.material.dialog.MaterialAlertDialogBuilder

class RoundedAlertDialog : DialogFragment() {

    //...

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return MaterialAlertDialogBuilder(requireActivity(), R.style.App_Material3_MaterialAlertDialog)
                .setTitle("Test")
                .setMessage("Message")
                .setPositiveButton("OK", null)
                .create()
    }

}

with the style:

<style name="App.Material3.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">@style/DialogCorners</item>
</style>

<style name="DialogCorners">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
</style>