Popupwindow Android example

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. Below I have shared code to create simple popup window in android with text and button to close it.

In this example, I am using Recyclerview inside popupwindow to make view looks like custom popup menu.

Steps to create Popupwindow

Add dependencies in build.gradle file

implementation 'com.android.support:design:28.0.0'

MainActivity.java to show and dismiss the popupwindow.

import android.content.Context
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.DividerItemDecoration
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.PopupWindow
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

private var filterPopup:PopupWindow? = null
private var selectedItem
: Int = -1

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

filter.setOnClickListener {
dismissPopup()
filterPopup = showAlertFilter()
filterPopup?.isOutsideTouchable = true
filterPopup
?.isFocusable = true
filterPopup
?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
filterPopup?.showAsDropDown(filter)
}
}

override fun onStop() {
super.onStop()
dismissPopup()
}

private fun dismissPopup() {
filterPopup?.let {
if
(it.isShowing){
it.dismiss()
}
filterPopup = null
}

}

private fun getFilterItems() : List<FilterItem> {

val filterItemList = mutableListOf<FilterItem>()
filterItemList.add(FilterItem(R.drawable.ic_desktop_mac_black_24dp,"Hotel"))
filterItemList.add(FilterItem(R.drawable.ic_desktop_mac_black_24dp,"Rooms"))
filterItemList.add(FilterItem(R.drawable.ic_desktop_mac_black_24dp,"Test Data One"))
filterItemList.add(FilterItem(R.drawable.ic_desktop_mac_black_24dp,"Hotel Rooms"))

return filterItemList
}

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<RecyclerView>(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.addItemDecoration(DividerItemDecoration(recyclerView.context, DividerItemDecoration.VERTICAL))

val adapter = AlertFilterAdapter(this)
adapter.addAlertFilter(getFilterItems())
recyclerView.adapter = adapter
adapter.selectedItem(selectedItem)

adapter.setOnClick(object : RecyclerviewCallbacks<FilterItem>{
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)
}
}

FilterItem.kt

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

AlertFilterAdapter.kt

import android.content.Context
import android.os.Build
import android.support.constraint.ConstraintLayout
import android.support.v4.content.ContextCompat
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView

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

var filerList : List<FilterItem> = mutableListOf()

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

fun addAlertFilter(filers: List<FilterItem>) {
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<FilterItem>){
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])
}
}
}

}

RecyclerviewCallbacks.kt

import android.view.View

interface RecyclerviewCallbacks<T> {

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

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
android:id="@+id/filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Show Popup Window"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

alert_filter_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/alert_filter_item_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp">

<ImageView
android:id="@+id/alert_filter_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@drawable/ic_desktop_mac_black_24dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/alert_filter_name"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textStyle="bold"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="@+id/alert_filter_icon"
app:layout_constraintStart_toEndOf="@+id/alert_filter_icon"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/alert_filter_selected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:background="@drawable/ic_check_black_24dp"
app:layout_constraintStart_toEndOf="@+id/alert_filter_name"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

alert_filter_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dedcdc">


<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top
%d bloggers like this: