[M3 Dialog] Hero Icon and Title alignment inconsistent with documentation

[charlie-niekirk]

Description: The M3 documentation shows dialogs with so called "Hero Icons" above and aligned centrally with the title. However when creating a dialog with MaterialAlertDialogBuilder the title and Icon are displayed inline to the top left.

Expected behavior:

Source code: This code:

MaterialAlertDialogBuilder(requireContext())
    .setItems(items) { dialog, which ->
          /../
    }
    .setTitle(R.string.pick_image_title)
    .setIcon(R.drawable.ic_image)
    .setNegativeButton(R.string.cancel) { dialog, _ ->
        dialog.dismiss()
    }.show()

Produces:

Android API version: 31

Material Library version: 1.5.0-beta01

Device: Android 12 emulator

[charlie-niekirk]

I've also just found that the documentation clearly states that, with an icon, the content of the dialog should be center aligned:

[drchen]

Hi, so basically it's not feasible for us to support a default style which can alter the layout according to the existence of icons. (We are not able to check default theme/style overriding done by clients and decide if we should change the layout.)

So in Android's context, the spec serves more like a client-side guideline - we suggest you use ThemeOverlay.Material3.MaterialAlertDialog.Centered when create an alert dialog with icons. You can do this by:

MaterialAlertDialogBuilder(requireContext(), R.style.ThemeOverlay_Material3_MaterialAlertDialog_Centered)

[drchen]

FYI we have a bug in M3 dialog styles in the current release which will incorrectly center-align the message text as well. I'm making a fix for that.

[charlie-niekirk]

Thanks for the clarification, that makes a lot of sense!

[asthagarg2428]

Hi, so basically it's not feasible for us to support a default style which can alter the layout according to the existence of icons. (We are not able to check default theme/style overriding done by clients and decide if we should change the layout.)

So in Android's context, the spec serves more like a client-side guideline - we suggest you use ThemeOverlay.Material3.MaterialAlertDialog.Centered when create an alert dialog with icons. You can do this by:

MaterialAlertDialogBuilder(requireContext(), R.style.ThemeOverlay_Material3_MaterialAlertDialog_Centered)

I've not set(I can't actually change that) the application theme to M3 in Manifest, is there any other way to still use M3 Alert dialog? Otherwise I'm getting the below exception:

android.view.InflateException: Binary XML file line #60 in :layout/m3_alert_dialog: Binary XML file line #60 in :layout/m3_alert_dialog: Error inflating class TextView
                                                                                                    Caused by: android.view.InflateException: Binary XML file line #60 in :layout/m3_alert_dialog: Error inflating class TextView
                                                                                                    Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 5: TypedValue{t=0x2/d=0x7f04012a a=11}, theme={InheritanceMap=[id=0x7f15050bcom.

[AlessandroVendraminiDeveloper]

If you cannot import: R.style.ThemeOverlay_Material3_MaterialAlertDialog_Centered

Try to: com.google.android.material.R.style.ThemeOverlay_Material3_MaterialAlertDialog_Centered