Buat MaterialAlertDialogBuilder Kustom di ANDROID KOTLIN

Hai Pembaca, saya harap Anda semua baik-baik saja. Jadi hari ini kita akan belajar tentang cara membuat MaterialAlertDialogBuilder di kotlin apakah Anda siap untuk belajar🤔.

Mari kita Mulai:

Langkah 1: Tambahkan Ketergantungan ke 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"

<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" />

1. backgroundTint digunakan untuk mengatur warna latar belakang Tombol floatingAction.
2. rippleColor berarti ketika pengguna mengklik tombol, efek riak akan terjadi dan Anda dapat mengatur warna pilihan Anda sendiri.
3. Anda dapat mengubah warna ikon melalui iconTint.

Buat custom_fragment.xml dalam XML ini kita akan membuat UI kita sendiri. Silakan salin kodenya.

<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>

      

Sekarang buka HomeFragment.kt dan di onViewCreate rekatkan kode di bawah ini.

//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()
    }

}

1. Pertama Ketika pengguna akan mengklik FAB(FloatingActionButton) itu akan masuk ke dalam kurung kurawal.
2. Kita harus mengembang tata letak kustom sehingga tata letak terlihat.
3. Untuk membuat Dialog MaterialCustom ada metode yang disebut MaterialAlertDialogBuilder dan dalam parameter lulus konteks.

//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.

//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 {}

Kami akan mempelajari lebih banyak hal di Artikel mendatang. TETAP TERHUBUNG dan TERUS BELAJAR☺😎😁.

Jangan ragu untuk berkomentar jika Anda memiliki keraguan atau saran.

Juga, mari berteman di Twitter dan Instagram .

Terima kasih😁.