在Android中悬停时设置菜单项背景颜色

时间:2016-09-26 18:50:41

标签: android android-actionbar android-toolbar android-theme

我的应用程序中有菜单项,我想更改项目背景的颜色,点击它时(请参见截图 - 单击项目1)

item 1 is clicked

我只想要一种颜色 - 浅蓝色或深色。但是,正如您所看到的,第一个项目中有两个。

这是我的代码:

活动中的工具栏:

    <android.support.v7.widget.Toolbar
            xmlns:sothree="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/main_toolbar"
            sothree:theme="@style/MyActionBar"
            android:layout_alignParentTop="true"
            style="@style/toolbarButton">

            ...

        </android.support.v7.widget.Toolbar>

样式:

    <style name="toolbarButton">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:clickable">true</item>
    </style>
    <style name="MyActionBar"
        parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/material_dark_blue</item>
        <item name="android:displayOptions">showHome|homeAsUp|showTitle</item>
        <item name="android:icon">@android:color/transparent</item>
        <item name="android:centerX">@android:integer/config_shortAnimTime</item>
        <item name="windowActionBar">false</item>
    </style>
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:textColor">@color/material_white</item>
        <item name="android:popupMenuStyle">@style/CustomOverflowBack</item>
        <item name="android:itemTextAppearance">@android:color/white</item>
    </style>

清单:

<application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:hardwareAccelerated="false"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">

非常感谢任何帮助。

更新: 添加CustomOverflowBack

    <style name="CustomOverflowBack" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
        <item name="android:popupBackground">@drawable/menu_item</item>
    </style>

Menu_item.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listview_background_shape">

    <stroke android:width="1dp" android:color="@color/material_dark_blue" />
    <solid android:color="@color/actionbar_item_bg_color" />

</shape>

2 个答案:

答案 0 :(得分:5)

@ Tom11您必须为工具栏的弹出式叠加层声明自定义样式。

创建一个扩展ThemeOverlay的样式:

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:colorBackground">@color/colorPrimaryDark</item> 
    <item name="colorControlHighlight">@color/colorAccent</item> 
</style>
  

在上面的样式中,将@ color / colorPrimaryDark替换为您的背景颜色,将@ color / colorAccent替换为您选择的背景颜色。

然后在工具栏声明中使用它。

<android.support.v7.widget.Toolbar
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="?attr/colorPrimary"
     style="@style/toolbarButton"
     app:popupTheme="@style/AppTheme.PopupOverlay"/>

这将解决您的问题。

更新: 进行以下更改:

  1. 使用上方工具栏项中的操作栏背景颜色将android:background="?attr/colorPrimary"更改为android:background="@color/material_dark_blue"

  2. 从MyActionBar样式中删除<item name="android:background">@color/material_dark_blue</item>

  3. 因此,工具栏和MyActionBar样式的更新代码将如下:

      <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/material_dark_blue"
                style="@style/toolbarButton"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:theme="@style/MyActionBar"/>
    
     <style name="MyActionBar"
               parent="Widget.AppCompat.ActionBar">
            <item name="android:displayOptions">showHome|homeAsUp|showTitle</item>
            <item name="android:icon">@android:color/transparent</item>
            <item name="android:centerX">@android:integer/config_shortAnimTime</item>
            <item name="windowActionBar">false</item>
        </style>
    

    这最终应该有效。

答案 1 :(得分:2)

替换此

<style name="toolbarButton">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:clickable">true</item>
</style>
<style name="MyActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/material_dark_blue</item>
    <item name="android:displayOptions">showHome|homeAsUp|showTitle</item>
    <item name="android:icon">@android:color/transparent</item>
    <item name="android:centerX">@android:integer/config_shortAnimTime</item>
    <item name="windowActionBar">false</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:textColor">@color/material_white</item>
    <item name="android:popupMenuStyle">@style/CustomOverflowBack</item>
    <item name="android:itemTextAppearance">@android:color/white</item>
</style>

<style name="CustomOverflowBack" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
    <item name="android:popupBackground">@drawable/menu_item</item>
</style>

有了这个:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="actionBarPopupTheme">@style/AppThemeOverlay.Popup</item>
</style>

<style name="AppThemeOverlay.Popup" parent="ThemeOverlay.AppCompat.Dark">
    <item name="android:colorBackground">popup menu background color</item>
    <item name="colorControlHighlight">selected item color</item>
</style>

以下是您如何使用它:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="?colorPrimary"
    android:elevation="4dp"
    app:popupTheme="?actionBarPopupTheme"/>

以上内容足以使其在API 21及更高版本上运行。

我遗漏了您的toolbarButton风格,因为它与此问题无关。

以下是一些提示

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">

不要将平台样式用于AppCompat小部件。如果您使用了AppCompat样式@style/Widget.AppCompat.ActionBar,则必须覆盖几乎 none 的属性。

<item name="android:background">@color/material_dark_blue</item>

主题中的背景将应用于任何不覆盖它的视图。这就是你看到蓝色方块的原因。 android:background样式属性,在小部件上使用它。 android:colorBackground是一个主题属性,并使用它(除其他外)为android:popupBackground着色,它提供弹出菜单的形状。

<item name="android:textColor">@color/material_white</item>

文本颜色再次是TextViews上使用的样式属性。广泛使用的主题属性是android:textColorPrimaryandroid:textColorSecondary。请改用它们。主题中的android:textColor可能会产生意外/不受欢迎的结果。

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

NOT 将颜色资源放入样式/文本外观属性中。如果不崩溃,它将无法工作或崩溃或更糟糕地产生意外结果。