popup menu items on listView are not visible

Question

I am using an image button on ListView which shows a popup menu when clicked. But the problem is that items are not visible. This is how menu looks.I can see white text on menu in this image but on mobile screen it is invisible.

This is styles.xml

<resources>
    <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

       <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:colorBackground">@color/colorPrimary</item>
        <item name="android:textColorPrimary">@android:color/black</item>
        <item name="android:textColorSecondary">#fcfcfc</item>
        <item name="android:actionMenuTextColor">@color/black</item>
   </style>

    <style name="itemTextStyle.AppTheme" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:colorBackground">@color/colorPrimary</item>

    </style>

    <!-- LoginCreateText -->
    <style name="LoginCreateText">
        <item name="android:textSize">@dimen/login_buttons_text_size</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:layout_margin">2dp</item>
    </style>

    <!-- LoginCreateTextButton -->
    <style name="LoginCreateTextButton">
        <item name="android:textSize">@dimen/login_buttons_text_size</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:layout_margin">2dp</item>
        <item name="android:clickable">true</item>
    </style>

    <style name="HintText">
        <item name="android:textSize">0dp</item>
    </style>

    <style name="FAB">
        <item name="android:layout_margin">0dp</item>
        <item name="fabSize">normal</item>
        <item name="rippleColor">@android:color/white</item>
        <item name="backgroundTint">@color/colorAccent</item>
    </style>

    <style name="ListItemText">
        <item name="android:textColor">@color/light_black</item>
        <item name="android:textSize">@dimen/list_item_text_size</item>
        <item name="android:layout_margin">2dp</item>
    </style>
</resources>

This is themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Widget.Button.Login" parent="android:Widget.Button">
        <item name="android:paddingLeft">18dp</item>
        <item name="android:paddingRight">16dp</item>
        <item name="android:textSize">@dimen/login_buttons_text_size</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:background">@color/colorPrimary</item>
    </style>

    <style name="Toolbar" parent="@style/Widget.AppCompat.Light.ActionBar">
        <item name="android:itemTextAppearance">@style/itemTextStyle.AppTheme</item>
        <item name="android:background">@color/colorPrimary</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>
    <style name="CustomTheme.Dialog" parent="Theme.AppCompat.Light.Dialog"/>
</resources>

This is the menu which I am trying to display.

   <?xml version="1.0" encoding="utf-8"?>
         <menu xmlns:app="http://schemas.android.com/apk/res-auto"
         xmlns:android="http://schemas.android.com/apk/res/android"
         app:popupTheme="@style/itemTextStyle.AppTheme">

<item
android:id="@+id/action_edit"
android:title="@string/action_edit" />

<item
    android:id="@+id/action_delete"
    android:title="@string/action_delete"/>

<item
    android:id="@+id/action_assign"
    android:title="@string/action_assign"
    android:checkable="true"/>

<item
    android:id="@+id/action_mark"
    android:title="@string/action_mark"
    android:enabled="false"/>
</menu>

This is layout file for Quiz Fragment.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/rl_fragment_quiz_lists"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey"
    app:popupTheme="@style/itemTextStyle.AppTheme"
    tools:context=".ui.fragments.QuizFragment">

    <include layout="@layout/single_active_list" />

    <ListView
        android:id="@+id/list_view_active_lists"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none" />

    <android.support.design.widget.FloatingActionButton xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/fab"
        style="@style/FAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:onClick="showAddQuizDialog"
        android:src="@drawable/ic_add_quiz"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp">
        <!--app:rippleColor="@android:color/white" /> -->
    </android.support.design.widget.FloatingActionButton>

</RelativeLayout>

This is the layout file of the activity in which this fragment is displayed.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/Toolbar" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Toolbar" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

I have tried many solutions that were asked before ( all were about toolbar menu) but none worked for me. I defined a new style in styles.xml

<style name="itemTextStyle.AppTheme" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:colorBackground">@color/colorPrimary</item>

and included it in AppTheme which didn't work.then I included it in toolbar style, menu layout, QuizFragment layout but items were still invisible.How to change the background color or item color of menu to fix this, any one will work.

Answer 1

I am using only two themes files (for dark, and day)

Theme.MaterialComponents.DayNight.NoActionBar.Bridge

inside them, I have only items of the same name for both day and night, but in different colors. Found (after experimenting)...that this line is a game-changer in my case (same problem as yours) for title and menu to be white, while at the same time text on popup menu is black

        <item name="android:textColorSecondary">@android:color/white</item>

here is the whole file, I used only this, and trying to not hard code anything.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Ch+++itche+++++" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge">
    <!-- Primary brand color. -->

    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
    <item name="colorOnPrimary">@color/primaryLightColor</item>
    <item name="colorOnSurface">@color/primaryColorWhiteDay</item>
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

That is all,

Happy coding, Nenad

Answer 2

Try this

style.xml

<style name="CustomActionBarTheme" parent="@style/Theme.AppCompat">
    <item name="android:actionOverflowButtonStyle">@style/OverflowButton</item>
    <item name="actionOverflowButtonStyle">@style/OverflowButton</item>
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:dropDownListViewStyle">@style/PopupMenuListView</item>
    <item name="dropDownListViewStyle">@style/PopupMenuListView</item>
    <item name="actionOverflowMenuStyle">@style/OverflowMenu</item>
    <item name="actionBarDivider">@null</item>
    <!-- OverFlow Menu Text Color -->
    <item name="android:textColor">@color/black</item>
</style>

<!-- OverFlow menu Styles -->
<style name="PopupMenuListView" parent="@style/Widget.AppCompat.Light.ListView.DropDown">
    <item name="android:divider">@color/black</item>
    <item name="android:dividerHeight">1dp</item>
    <item name="android:background">@color/white</item>
</style>

<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
    <!-- Required for pre-Lollipop. -->
    <item name="overlapAnchor">false</item>
    <!-- Required for Lollipop. -->
    <item name="android:overlapAnchor">false</item>
    <item name="android:dropDownVerticalOffset">4.0dip</item>
</style>

and define theme for Activity in AndroidManifest.xml

<activity
 android:name=".YourActivityName"
 android:theme="@style/CustomActionBarTheme"/>