Android popup menu text overflow

Question

I'm binding popup menu items dynamically after the search of some text getting search results from server and binding them in popup menu BUT whenever the text is too big then its not fully visible to user. Tried adding "\n" but items not coming to next line How can I make popup items in multiple lines or how do I scroll items in horizontally

Please help me guys

Below is my code

    popup = PopupMenu(this@AddReportActivity, search_diagnosis)
    popup?.menuInflater?.inflate(R.menu.test_menu, popup?.menu)

    var dData: ArrayList<String> = ArrayList()

                for (item in it.value.data) {
                    dData.add(item.name)
                }

                popup?.menu?.clear()
                this.invalidateOptionsMenu();

                if (it.value.data.size == 0) {
                    Toast.makeText(applicationContext, "No data found", Toast.LENGTH_SHORT)
                        .show()
                } else {
                    it.value.data?.forEachIndexed { i, item ->
                    //popup?.menu?.add("Test1 Malignant neoplasm of head " + "\n" + "of 
                     pancreas"
                       );

                        // var str = insertPeriodically(item.name, "\n", 10);
                        println("new string -- ${item.name}")
                        popup?.menu?.add(
                            item.name
                        );
                    }
                    popup?.setOnMenuItemClickListener { item ->
                        popup?.dismiss();
                        slectedDiagnosis = item.title.toString()
                        search_diagnosis.setQuery(item.title, false);
                        popup?.menu?.clear()
                        this.invalidateOptionsMenu();
                        true
                    }
                    popup?.show()

Answer 1

I believe this is the case where you should use a custom popup approach. The default popup menu does NOT support multiple lines nor will it give you the ability to make the views horizontally scrollable.

How I'd do it: My favorite approach to this is to NOT use the traditional popup menu. It's best to make the textviews actually animate from right to left to show full text, or you can just make it multi-line which is much easier, efficient and saves time. I'd go with a highly customizable Popup library such as this one BasePopup which will save you a lot of time and effort. Its docs are all in chinese but lemme give you a little breakdown:

private fun searchPopup(anchorView: View) {
        class DemoPopup(context: Context?) : BasePopupWindow(context) {
            init {
                setContentView(R.layout.searchlayout)
                val rltvLayout = findViewById<RelativeLayout>(R.id.searchRelativeLayout)
                val searchResults = //your search results as a Collection object
                for (result in searchResults) {
                    val index: Int = searchResults.indexOf(result)
                    val txtview = TextView(this)
                    txtview.text = //your search result string
                    txtview.textSize = 9F
                    val rltvParams: RelativeLayout.LayoutParams = RelativeLayout.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
                    )
                    rltvParams.addRule(RelativeLayout.ALIGN_PARENT_START, RelativeLayout.TRUE)
                    if (result != searchResults[0]) {
                        rltvParams.addRule(
                            RelativeLayout.BELOW,
                            rltvLayout.getChildAt(index - 1).id
                        )
                    }
                    rltvLayout.addView(txtview, index, rltvParams)
                }

            }
        }

        DemoPopup(this).showAnchor(anchorView)
    }

It may be a little bit confusing at first, but what I did here is just use the BasePopup library, define a DemoPopup class, assign a custom xml file with a relative layout inside (empty relative layout with 0 child views, only the parent). Then I programmatically create the textviews and add them one by one to the relative layout that I assigned to the popup class.

Then I use the DemoPopup class by instantiating it and showing it in the last line. This approach will allow your search results to display MULTIPLE lines. You can even customize it even more.

NOTE: You can use any other layout other than RelativeLayout, even LinearLayout works. You can inflate any kind of layout inside this popup which is why I prefer using it over the conventional way.