Custom Dialog box in android

How to create a Custom Dialog box in android? - Android Material UI/UX

Let us create a Custom Dialog box in Android using a View binding. Use this syntax for a 100% crash-free custom dialog solution & create your own customized dialog box.

No 3rd party plugin is required.

Step 1

Need to add a view binding in app-level Gradle (by default it will be added while you create a new project)
View binding is a feature that allows you to more easily write code that interacts with views. (Read more)

buildFeatures {
        viewBinding true
}

Step 2

You can download your font in google lib (Download Google font here)
Then you need to add selected fonts in the font folder (res/font/)

Config your custom font family name in your res/values/themes.xml file

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.MaterialUIX" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->

        <!--Space between each character-->
        <item name="android:letterSpacing">.1</item>

        <!--Change overall font family -->
        <item name="fontFamily">@font/jost_medium</item>
        <item name="android:fontFamily">@font/jost_medium</item>
    </style>

    <style name="Theme.MaterialUIX" parent="Base.Theme.MaterialUIX" />
</resources>

Step 3

Making the Custom Dialog Layout - UI Design
Go to res > layout and create the Custom Dialog UI design layout (custom_dialog.xml):

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!--header-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:orientation="horizontal">

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/bt_close"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                app:srcCompat="@drawable/ic_round_close"
                app:tint="#0066FF" />

        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/grey_5" />

        <View
            android:layout_width="0dp"
            android:layout_height="20dp" />

        <!--body-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="340dp"
            android:orientation="vertical"
            android:padding="20dp">

            <ImageView
                android:id="@+id/image"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:scaleType="centerCrop"
                android:src="@drawable/logo" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:text="Bolt UIX"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textColor="@color/grey_80"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Next level of Design"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="@color/grey_40" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="35dp"
                android:text="Get started with Android (Kotlin, Jet Compose) &amp; IOS (Swift UI), MVVM clean architecture, and Beautiful UI UX design patterns."
                android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                android:textColor="@color/grey_40" />

            <View
                android:layout_width="0dp"
                android:layout_height="15dp" />

        </LinearLayout>

        <!--footer-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/gradient_bg"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Check my social media"
                android:textColor="@color/overlay_light_90" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:gravity="center"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    app:srcCompat="@drawable/ic_social_twitter" />

                <View
                    android:layout_width="30dp"
                    android:layout_height="0dp" />

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    app:srcCompat="@drawable/ic_social_facebook" />

                <View
                    android:layout_width="30dp"
                    android:layout_height="0dp" />

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    app:srcCompat="@drawable/ic_social_instagram" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

Step 4

You can generate gradient android code in this link (https://angrytools.com/gradient/)
Go to Online Gradient Generator > Select your color > Select android tab
Then create gradient_bg.xml file in your drawable folder
Ref more gradient color : https://www.boltuix.com/2022/07/gradient-colors.html (A handpicked collection of beautiful color gradients for web and app designers.)

Step 5

Create a Fragment page in the java folder with a custom dialog box (Steps 1 to 3)

package com.boltuix.materialuiux

import android.app.Dialog
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.Window
import android.view.animation.AnimationUtils
import com.boltuix.materialuiux.databinding.CustomDialogBinding
import com.boltuix.materialuiux.databinding.FragmentDemoBinding

class DemoFragment : Fragment() {

    // Step 1
    var dialog: Dialog? = null

    private var _binding: FragmentDemoBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {

        _binding = FragmentDemoBinding.inflate(inflater, container, false)
        return binding.root

    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.demo.setOnClickListener {
            customDialog()
        }

    }

    // Step 2 : inside onCreateView : dialog box using view binding inflate the xml
    private fun customDialog() {
        // Clear previous dialog box
        if (dialog != null) {
            dialog!!.dismiss()
        }
        
        dialog = Dialog(requireContext())
        dialog!!.requestWindowFeature(Window.FEATURE_NO_TITLE)
        val bind: CustomDialogBinding = CustomDialogBinding.inflate(layoutInflater)
        dialog!!.setContentView(bind.root)
        dialog!!.window!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
        dialog!!.setCancelable(false)
        
        bind.btClose.setOnClickListener { 
            dialog!!.dismiss() 
        }

        // loading the animation of rotate_clockwise.xml file into a variable
        val clkRotate = AnimationUtils.loadAnimation(requireContext(), R.anim.rotate_clockwise)
        // assigning that animation to the image and start animation
        bind.image.startAnimation(clkRotate)

        // show dialog
        dialog!!.show()
    }

    override fun onDestroyView() {
        super.onDestroyView()

        // Step 3 : Clear or close dialog box before leave this fragment or activity.
        if(dialog != null){
            dialog!!.dismiss()
        }

        _binding = null
    }
}

GET source code on Github:

Search This Blog

Bolt UiX

Custom Dialog box in android - Bolt UIX

Comments

Post a Comment