Create Custom MaterialDialoge in ANDROID KOTLIN

Hey Readers, I hope you all are fine. So today we are going to learn about how to create MaterialAlertDialogBuilder in kotlin are you ready to learn🤔.

Let’s get Started :

Step 1: Add Dependency to build.Gradle

// Material Dialogs
implementation "com.afollestad.material-dialogs:core:3.0.0-rc1
// Material theme
implementation "com.google.android.material:material:1.4.0-rc01"

Step 2: So first of all in XML, we are going to create FloatingAction Button you can take any button and it depends totally upon the user. Here we are taking a floatingActionButton.In fragment_home.xml Please write the below code.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_ofdialog"
    android:layout_width="55dp"
    android:layout_height="55dp"
    android:layout_marginBottom="16dp"
    android:backgroundTint="#FF0000"
    android:src="@drawable/fab_location"
    app:rippleColor="#ff492d"
    app:iconTint="#ffffff"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.954"
    app:layout_constraintStart_toStartOf="parent" />

Here :

1. backgroundTint is used to set the background color of floatingAction Button.
2. rippleColor means when users click on button ripple effect will occur and you can set any of your own choice of color.
3. You can change the color of the icon through iconTint.

FloationActionButton with Icon.

Now we will create Custom Dialogue. The Most Import part is UI. It has to look nice so users have really nice time with your app.

Create custom_fragment.xml in this XML we will create our own UI. Please copy the code.

<androidx.constraintlayout.widget.ConstraintLayout
    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="wrap_content">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/iv_locationIcon"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:src="@drawable/location1"
        android:layout_marginTop="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/tv_DeviceLocationIsOff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:textStyle="bold|normal"
        android:textSize="18sp"
        android:textColor="?android:attr/textColorPrimary"
        android:hint="@string/device_location_is_off"
        app:layout_constraintEnd_toEndOf="@+id/iv_locationIcon"
        app:layout_constraintStart_toStartOf="@+id/iv_locationIcon"
        app:layout_constraintTop_toBottomOf="@+id/iv_locationIcon" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/tv_messageToTurnOn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textStyle="bold"
        android:textColor="?android:attr/textColorSecondary"
        android:layout_marginTop="8dp"
        android:hint="@string/please_turn_on_your_device_location_to_ensure_hassele_free_experience"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_DeviceLocationIsOff" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_turnOnDeviceLoc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="#ffffff"
        android:layout_marginTop="8dp"
        android:hint="@string/deviceLocation"
        app:icon="@drawable/ic_turn_on_device_loc"
        app:iconPadding="4dp"
        android:textColor="#000000"
        app:iconGravity="start"
        app:elevation="2dp"
        app:rippleColor="#ff492d"
        app:iconTint="#FF0000"
     style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_messageToTurnOn" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_turnManuallyOnDeviceLoc"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="#ffffff"
        android:hint="@string/manually"
        android:textColor="#000000"
        android:layout_marginBottom="18dp"
        app:elevation="2dp"
        app:icon="@drawable/search"
        app:iconGravity="start"
        app:rippleColor="#ff492d"
        app:iconTint="#FF0000"
        app:iconPadding="4dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/btn_turnOnDeviceLoc" />

</androidx.constraintlayout.widget.ConstraintLayout>

In this layout file, I have randomly chosen Icon and Text you can change it as per your requirement. I have just given an example that how we can make a Perfect UI.

Now go to HomeFragment.kt and in onViewCreate paste the below code.

//1
fabOfdialog.setOnClickListener {
//2
        val mview = LayoutInflater.from(requireActivity())
            .inflate(R.layout.custom_dialouge, null, false)
//3   val dialog = MaterialAlertDialogBuilder(requireContext())
            .setView(mview)
            .setCancelable(true)
            .setBackground(resources.getDrawable(R.drawable.radius))
            .create()

//4       mview.btn_turnOnDeviceLoc.setOnClickListener {
    Toast.makeText(requireContext(),"You have clicked First  Button",Toast.LENGTH_SHORT).show()
    
// when user click and button and you want to close dialog so you //can use this if not you can remove this dialoge.dismiss()
dialog.dismiss()
//5       mview.btn_turnManuallyOnDeviceLoc.setOnClickListener {
    Toast.makeText(requireContext(),"You have clicked Second Button",Toast.LENGTH_SHORT).show()
    dialog.dismiss()
  
        }
        dialog.show()
    }

}

Here :

1. First When the user will click on FAB(FloatingActionButton) it will go inside the curly braces.
2. We have to inflate the custom layout so that the layout is visible.
3. To create a MaterialCustom Dialogue there is a method called MaterialAlertDialogBuilder and in parameter pass the context.

//This will set the view and here view is our custom layout.
.setView(mview)
.setCancelable(true) // If we click anywhere outside the dialoge it will close.
.setBackground(resources.getDrawable(R.drawable.radius)) //Set BackGround color.
.create() //This will create the MaterialDialoge.

4. The things you want to take care are:

//Correct way, Here we are telling that this button is from custom layout. we are giving reference of button.
mview.btn_turnOnDeviceLoc.setOnClickListener {}
//InCorrect way, Here we are not providing the reference it will cost you an error.
btn_turnOnDeviceLoc.setOnClickListener {}

when the user clicks on btn_turnOnDeviceLoc the toast will occur.

So now you can happily Run your project.

We will learn many more things in the upcoming Article. STAY CONNECTED and KEEP LEARNING☺😎😁.

Feel free to comment if you have any doubts or suggestions.

Also, let’s become friends on Twitter and Instagram.

Follow me on Youtube https://www.youtube.com/@BhavyaVarmoraVlogs

Thank You😁.