How to set custom layout for AlertDialog?

user_6387618 0
Viewed 1532

Call my dialog:

alertDialog = showInfoDialog(message = "$wrongPasscodeMessage\n$retryMessage")

And here is the method:

fun FragmentActivity.showInfoDialog(message: String?): AlertDialog? {
    return try {
        val customLayout = layoutInflater.inflate(R.layout.custom_layout, null)
        AlertDialog.Builder(this)
            .setView(customLayout)
            .setMessage(message)
            .setCancelable(false)
            .show()
    } catch (e: java.lang.Exception) {
        e.log()
        null
    }
}

And here is my custom layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red"
    android:paddingStart="@dimen/dp_44"
    android:paddingEnd="@dimen/dp_44"
    app:cardCornerRadius="@dimen/dp_12" />

But i don't know why my dialog hasn't background red and rounded corners? What am I missing?

UPDATE: For example if i change my custom_layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="350dp"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        android:src="@drawable/googleg_disabled_color_18"/>
</LinearLayout>

I get smth like this: enter image description here

But i want smth like this

enter image description here

material-components material-components-android kotlin android-alertdialog android
2 Answers

You don't need a CardView to achieve a AlertDialog with rounded corners: Just use the standard constructor:

 new MaterialAlertDialogBuilder(this, R.style.DialogOverlay)
                .setMessage("Wrong Passcode\nTry again in 5 minutes")
                .show();

with a custom theme overlay to center the message:

<style name="DialogOverlay" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="materialAlertDialogBodyTextStyle">@style/BodyText</item>    
</style>

<style name="BodyText" parent="MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:gravity">center_horizontal</item>
</style>

enter image description here

If you want to change the rounded corners just add the shapeAppearanceOverlay in your theme overlay:

<style name="DialogOverlay" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    ...
    <item name="shapeAppearanceOverlay">@style/DialogCorners</item>    
</style>

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

enter image description here

user_20165620

Create a drawable xml of something along the lines of this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary"/>
    <corners android:radius="20dp" />
</shape>

The radius in the shape provides your rounded corners. Now you can set this drawable as the background to your LinearLayout for a dialog, or use a custom <style> in your res/styles.xml:

<style name="CustomAlertDialog" parent="Theme.AppCompat.DayNight.Dialog.Alert">
        <item name="android:windowBackground">@drawable/dialog_background</item>
        <item name="textAllCaps">false</item>
</style>

and use that style in your AlertDialog.Builder:

AlertDialog.Builder(this, R.style.CustomAlertDialog).setView(...

Using the style allows you to easily use the shape consistently across all your dialogs within the app.

user_95129640
Related