Android: Custom layout for DialogFragment is not showing fully in it's width like AlertDialog

Question

I have this custom ConfirmationDialogFragment extended with DialogFragment and I want to replicate the same behavior of AlertDialog but with a custom one. so that next time I can apply this when I need to have an alert dialog with a custom layout and maybe add that as a parameter to my dialog class. The problem is I can't show the dialog and match the parent like in AlertDialog, kindly refer to this

.

My Dialog fragment class:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.DialogFragment

private const val KEY_MESSAGE = "ConfirmationDialogFragment.KEY_MESSAGE"

class ConfirmationDialogFragment : DialogFragment() {

    private lateinit var binding: DialogFragmentConfirmationBinding
    private var onOkClicked: (() -> Unit)? = null
    private var onCancelClicked: (() -> Unit)? = null

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val message = arguments?.getString(KEY_MESSAGE) ?: ""
        binding = DataBindingUtil.inflate(
            LayoutInflater.from(context),
            R.layout.dialog_fragment_confirmation,
            null,
            false
        )

        binding.message = message
        binding.onClickedOk = View.OnClickListener {
            onOkClicked?.invoke()
            dismiss()
        }
        binding.onClickedCancel = View.OnClickListener {
            onCancelClicked?.invoke()
            dismiss()
        }
        return binding.root
    }
    
    fun setOnOkClicked(onOkClicked: () -> Unit) {
        this.onOkClicked = onOkClicked
    }
    
    fun setOnCancelClicked(onCancelClicked: () -> Unit) {
        this.onCancelClicked = onCancelClicked
    }

    companion object {
        fun newInstance(message: String) = ConfirmationDialogFragment().apply {
            arguments = Bundle().apply {
                putString(KEY_MESSAGE, message)
            }
        }
    }
}

xml layout:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="message"
            type="String" />

        <variable
            name="onClickedOk"
            type="android.view.View.OnClickListener" />

        <variable
            name="onClickedCancel"
            type="android.view.View.OnClickListener" />

        <import type="android.view.View" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8sp">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/messageTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="12dp"
            android:text="@{message}"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Save?" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/cancleButton"
            style="@style/AppTheme.BodyTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:onClick="@{onClickedCancel}"
            android:text="Cancel"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/appCompatButton2"
            app:layout_constraintTop_toBottomOf="@+id/messageTextView" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/appCompatButton2"
            style="@style/AppTheme.BodyTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:onClick="@{onClickedOk}"
            android:text="Yes"
            app:layout_constraintBottom_toBottomOf="@+id/cancleButton"
            app:layout_constraintEnd_toEndOf="@+id/messageTextView"
            app:layout_constraintTop_toTopOf="@+id/cancleButton" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

styles xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar" />

    <style name="AppTheme" parent="AppTheme.Base">
        <item name="colorAccent">@color/black</item>
        <item name="windowActionBar">false</item>
        <item name="coordinatorLayoutStyle">@style/Widget.Support.CoordinatorLayout</item>
        <item name="windowNoTitle">true</item>
        <item name="colorButtonNormal">@android:color/darker_gray</item>
        <item name="buttonStyle">@style/AppTheme.AppThemeButton</item>
    </style>

    <style name="AppTheme.AppThemeButton">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginStart">16dp</item>
        <item name="android:layout_marginEnd">16dp</item>
        <item name="android:textSize">16sp</item>
        <item name="android:gravity">center</item>
        <item name="android:padding">16dp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:foreground">?android:attr/selectableItemBackground</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="AppTheme.BodyTitle">
        <item name="android:textSize">14sp</item>
        <item name="android:textStyle">normal</item>
    </style>
</resources>

This is how i use this on my activity:

val dialog = ConfirmationDialogFragment.newInstance(getString(R.string.info_unsaved_data)).apply {
    setOnOkClicked {
        // do something
    }
    setOnCancelClicked {
        // do something
    }
}

dialog.show(supportFragmentManager, null)

Answer 1

Have tried the code you have and it turns out that you just really need to override the Dialog theme,

from your ConfirmationDialogFragment class

override fun getTheme() = R.style.AppTheme_Alert

and from your styles just add this but colorAccent is just optional, hehe.

<style name="AppTheme.Alert" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">@color/black</item>
</style>