Alert dialog và popup window android

Android AlertDialog can be used to display the dialog message with OK and Cancel buttons. It can be used to interrupt and ask the user about his/her choice to continue or discontinue.

Android AlertDialog is composed of three regions: title, content area and action buttons.

Android AlertDialog is the subclass of Dialog class.

Methods of AlertDialog class

MethodDescriptionpublic AlertDialog.Builder setTitle(CharSequence)This method is used to set the title of AlertDialog.public AlertDialog.Builder setMessage(CharSequence)This method is used to set the message for AlertDialog.public AlertDialog.Builder setIcon(int)This method is used to set the icon over AlertDialog.

Let's see a simple example of android alert dialog.

activity_main.xml

You can have multiple components, here we are having only a textview.

---

strings.xml

Optionally, you can store the dialog message and title in the strings.xml file.

---

Activity class

Let's write the code to create and show the AlertDialog.

---

Output:

Popupwindow is a floating view that is displayed on top of an activity. Android provides a PopupWindow class for creating a popup window with the custom design.

It is present from the first versions of the API, but not as popular as other dialog boxes due to the need for additional configuration, which is not always necessary.

Android PopupWindow very useful when you want to show the dialog just over the view items. For Example you can able to show the dialog near to the more option of your cardview / button view.

Check out my popup window android example demo.

Now we are going to create popup window showed in the popupwindow example video.

1. Adding Dependencies

In this example, we are going to show list of items in the recyclerview. So, we need recyclerview and cardview dependencies.

dependencies {
   ...
    implementation "androidx.cardview:cardview:1.0.0"
    implementation "androidx.recyclerview:recyclerview:1.1.0"
}

I have explained about using recyclerview and cardview in separate post. Please check it in the links.

Recyclerview Android Example [Beginners]

Cardview Android Example [beginners]

2. Create PopupWindow Layouts

android:id="@+id/alert_filter_name"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="@android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/alert_filter_icon"
app:layout_constraintTop_toTopOf="parent"
tools:text="@tools:sample/first_names" />

android:id="@+id/alert_filter_selected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="@drawable/ic_check_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/alert_filter_name"
app:layout_constraintTop_toTopOf="parent" />

Popup Menu Items3. Implement PopupWindow With Data

We are using recyclerview in the popup window. so, we need model class to hold the data.

data class FilterItem(val icon:Int,val name: String)

Also, we need to create adpater to set popup items.

class AlertFilterAdapter(val context: Context) : RecyclerView.Adapter() {

    var filerList : List = mutableListOf()

    private var selectedItem: Int = -1
    var callback: RecyclerviewCallbacks? = null

    fun addAlertFilter(filers: List) {
        filerList = filers.toMutableList()
        notifyDataSetChanged()
    }

    fun selectedItem(position: Int){
        selectedItem = position
        notifyItemChanged(position)
    }

    override fun onBindViewHolder(holder: MyViewHolder, p1: Int) {
        val item = filerList[p1]
        holder.tvName.text = item.name
        holder.alert_filter_icon.background = ContextCompat.getDrawable(context, item.icon)

        if(p1 == selectedItem) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                holder.alert_filter_icon.backgroundTintList = ContextCompat.getColorStateList(context, R.color.color_blue)
            }
            holder.tvName.setTextColor(ContextCompat.getColor(context,R.color.color_blue))
            holder.alert_filter_selected.visibility = View.VISIBLE
        } else {
            holder.alert_filter_selected.visibility = View.INVISIBLE
        }
    }

    fun setOnClick(click: RecyclerviewCallbacks){
        callback = click
    }

    override fun onCreateViewHolder(p0: ViewGroup, p1: Int): MyViewHolder {
        val view = LayoutInflater.from(p0.context).inflate(R.layout.alert_filter_item,p0,false)
        return MyViewHolder(view)
    }

    override fun getItemCount(): Int {
        return filerList.size
    }

    inner class MyViewHolder(item: View) : RecyclerView.ViewHolder(item) {

        var tvName:TextView = itemView.findViewById(R.id.alert_filter_name)
        var alert_filter_icon: ImageView = itemView.findViewById(R.id.alert_filter_icon)
        var alert_filter_selected: ImageView = itemView.findViewById(R.id.alert_filter_selected)
        var filterLayout: ConstraintLayout = itemView.findViewById(R.id.alert_filter_item_layout)
        init {
            setClickListener(filterLayout)
        }

        private fun setClickListener(view: View) {
            view.setOnClickListener {
                callback?.onItemClick(it, adapterPosition, filerList[adapterPosition])
            }
        }
    }

}

In the Adapter, set the click listener interface for the popup window click callbacks.

interface RecyclerviewCallbacks {

    fun onItemClick(view: View, position: Int, item: T)

}

Already, we have created layouts and adapter for the PopupWindows. Lets create the PopupWindow.

private fun showAlertFilter(): PopupWindow {
        val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val view = inflater.inflate(R.layout.alter_filter_layout, null)
        val recyclerView = view.findViewById(R.id.recyclerView)
        recyclerView.addItemDecoration(DividerItemDecoration(recyclerView.context, DividerItemDecoration.VERTICAL))
        val adapter = AlertFilterAdapter(this)
        adapter.addAlertFilter(getFilterItems())
        recyclerView.adapter = adapter
        adapter.selectedItem(selectedItem)

        adapter.setOnClick(object : RecyclerviewCallbacks {
            override fun onItemClick(view: View, position: Int, item: FilterItem) {
                selectedItem = position
                Toast.makeText(this@MainActivity, "data = $item", Toast.LENGTH_SHORT).show()
                dismissPopup()
            }
        })

        return PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
    }

In the above code, I am using adapter.setOnClick to pass the implementation of the RecyclerviewCallbacks interface to receive the callbacks of the popup window items.

4. Show / Hide the PopupWindow

Now, our popup window is ready to display. So, whenever we need to show the popup window. call the below code.