Create custom Alert dialog with a custom view in android kotlin

Custom AlrtDialog image

Hi guys, I am going to write an article about the custom Alert dialog view. Here we will see How to create that,

We will just go through some steps.

Step 1. We need to build and create an alert dialog first.

val builder = AlertDialog.Builder(this,R.style.CustomAlertDialog)
.create()
val view = layoutInflater.inflate(R.layout.customView_layout,null)
val  button = view.findViewById<Button>(R.id.dialogDismiss_button)
builder.setView(view)
button.setOnClickListener {
builder.dismiss()
}
builder.setCanceledOnTouchOutside(false)
builder.show()

Here I am calling AlertDialog.Builder() for building AlertDialog in a variable. It will take one or two parameters. The first one is for context and another one is for style. After that, I am creating it.

Also, we need a custom view for the custom alert dialog.

val view = layoutInflater.inflate(R.layout.customView_layout,null)

Here I am storing the view in a variable called view. Then call setView() for setting the view for alert dialog with the builder variable. It will take a parameter called view.

builder.setView(view)

we need to show this dialog so we call show() with the builder variable.

There is a function called setCanceledOnTouchOutside() for canceling the dialog by touching. It will take a boolean parameter. If you don’t want to cancel or dismiss the dialog by touching outside of the dialog then use False for a parameter.

builder.setCanceledOnTouchOutside(false)

Step 2. Create custom view layout

We need a custom layout for a custom view. Then create a new layout called customView_layout.xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your desire title"
            android:textSize="24sp"
            android:textColor="@color/primaryColor"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="@color/primaryColor"
            android:layout_marginTop="10dp"
            android:text="Your desire text"/>

        <Button
            android:id="@+id/dialogDismiss_button"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_margin="30dp"
            android:textColor="@color/white"
            android:text="Start"
            android:textAllCaps="false"
            android:textSize="16sp"
            android:background="@drawable/button_style"/>
    </LinearLayout>

Here I am using RelativeLayout as a Parent layout and also a LinearLayout for view. Also, I am using two TextView and one button.

Spet 3. Creating rounded corner

If we want to use a rounded corner of the dialog view. Then we need a rounded shape. Create a drawable file called rounded_corner.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid
        android:color="@color/secondColor"/>
    <corners
        android:radius="7dp"/>

</shape>

Here I am using Solid with color for view color and corners with a radius for a rounded corner of the view.

Step 4. Creating a style

Actually, we want to use rounded corners of the dialog view. For that, we need to use a style in AlertDialog.Builder() by a style parameter. For that let’s create a style called CustomAlertDialog.

<style name="CustomAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowBackground">@drawable/rounded_corner</item>
</style>

Here style is CustomAlertDialog and the parent theme will be Theme.AppCompat.Light.Dialog.Alert. Then call item which name will be android:windowBackground and call rounded_corner by drawable.

Now use this style with alertDialog Builder

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

Thank you

I hope it will help someone.