AlertDialog single choice item padding

user_3413460 0
Viewed 522

I want to add top and bottom padding between each single choice item in an AlertDialog. I have attempted to achieve this goal with this style resource:

<style name="CustomDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:listChoiceIndicatorSingle">@null</item>
    <item name="android:background">@drawable/radio_button_background_selector</item>
    <item name="android:paddingTop">17dp</item>
    <item name="android:paddingBottom">17dp</item>
</style>

Then the Activity code that uses this style is pretty straightforward:

AlertDialog.Builder(this, R.style.CustomDialog)
        .setSingleChoiceItems(options, currentSelectedIndex) { dialog, index ->
            if (index != currentSelectedIndex) {
                // do something
            }

            dialog.dismiss()
        }
        .show()

The padding works as expected, except that it also adds a huge margin at the top and bottom of the DialogFragment.

How can I add padding between each single choice item without having this unintended consequence?

enter image description here

android-theme android-styles android-alertdialog android-layout android
1 Answers

You are overriding the paddingTop and the paddingBottom in the entire Dialog.

With an AppCompat theme you can use a theme overlay like:

<style name="customLMultiItem" parent="@style/ThemeOverlay.AppCompat.Dialog.Alert">
    <!-- if you want to remove the indicator in each row -->
    <item name="android:listChoiceIndicatorSingle">@null</item> 
    <item name="alertDialogStyle">@style/my.AlertDialog</item>
</style>

<style name="my.AlertDialog" parent="AlertDialog.AppCompat">
    <!-- to use a custom layout for the singlechoice -->
    <item name="singleChoiceItemLayout">@layout/my_dialog_singlechoice</item>
</style>

In this way you can use a custom layout (copied from the original + the padding):

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
                 android:id="@android:id/text1"
                 android:paddingTop="XXdp"
                 android:paddingBottom="Xdp"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:minHeight="?attr/listPreferredItemHeightSmall"
                 android:textAppearance="?android:attr/textAppearanceMedium"
                 android:textColor="?attr/textColorAlertDialogListItem"
                 android:gravity="center_vertical"
                 android:paddingLeft="@dimen/abc_select_dialog_padding_start_material"
                 android:paddingRight="?attr/dialogPreferredPadding"
                 android:paddingStart="@dimen/abc_select_dialog_padding_start_material"
                 android:paddingEnd="?attr/dialogPreferredPadding"
                 android:drawableLeft="?android:attr/listChoiceIndicatorSingle"
                 android:drawableStart="?android:attr/listChoiceIndicatorSingle"
                 android:drawablePadding="20dp"
                 android:ellipsize="marquee" />

Then just use AlertDialog.Builder(this, R.style.customLMultiItem).

enter image description here

With a MaterialComponents Theme:

<style name="customLMultiItem" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="android:listChoiceIndicatorSingle">@null</item>
    <item name="alertDialogStyle">@style/my.MaterialAlertDialog.MaterialComponents</item>
</style>

<style name="my.MaterialAlertDialog.MaterialComponents" parent="MaterialAlertDialog.MaterialComponents">
    <item name="singleChoiceItemLayout">@layout/my_dialog_singlechoice</item>
</style>

enter image description here

user_20165620
Related