web-dev-qa-db-fra.com

Styliser le menu contextuel sous Android 5.0

Je prépare mon application pour Android 5.0, j'utilise la dernière bibliothèque de compatibilité, voici à quoi ressemble mon style.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/theme_accent</item>
        <item name="colorAccent">@color/theme_accent_secondary</item>
    </style>

    <style name="AppThemeDark" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/theme_accent</item>
        <item name="colorAccent">@color/theme_accent_secondary</item>
    </style>
</resources>

(La couleur ActionBar est définie par programme.)

Maintenant, je veux que le menu débordement/popup ait le fond sombre comme dans l'implémentation holo, mais je ne peux pas le faire fonctionner, voici à quoi ça ressemble: enter image description here

J'ai essayé de régler la popupMenuStyle mais cela n'a pas fonctionné.

Comment puis-je assombrir le menu contextuel?

androidandroid-uiandroid-5.0-lollipopmaterial-designandroid-support-library
13
animaonline

Résolu mon problème en utilisant ce style:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/theme_accent</item>
    <item name="colorAccent">@color/theme_accent_secondary</item>
    <item name="actionBarStyle">@style/AbStyle</item>
    <item name="actionModeBackground">@color/actionmode_bg</item>
</style>

<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
    <item name="elevation">2dp</item>
    <item name="displayOptions">homeAsUp|showTitle</item>
    <!--showHome-->
</style>

<style name="AppThemeDark" parent="Theme.AppCompat">
    <item name="colorAccent">@color/theme_accent_secondary</item>
    <item name="actionBarStyle">@style/AbStyle</item>
</style>

Je devais utiliser Widget.AppCompat.Toolbar comme actionBarStyle parent

7
animaonline

Arrêtez d'utiliser ActionBar. Si vous voulez qu'une ToolBar soit configurée comme une ActionBar, suivez ce guide sur le blog des développeurs Android.

Il mentionne en fait votre cas d'utilisation sur la barre Dark Action Bar et fournit le code suivant:

<Android.support.v7.widget.Toolbar
    Android:layout_height=”wrap_content”
    Android:layout_width=”match_parent”
    Android:minHeight=”@dimen/triple_height_toolbar”
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
20
Derk-Jan

Pas une réponse complète mais ce que j'ai trouvé jusqu'à présent:

Dans les versions précédentes, vous deviez spécifier un dessin (Vérifiez https://github.com/StylingAndroid/StylingActionBar code et tutoriels).

Apparemment, maintenant c'est une couleur. Pour le modifier, vous devez spécifier le thème suivant:

<resources xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <style name="AppTheme" parent="Android:Theme.Material.Light.DarkActionBar">
        <item name="Android:actionBarPopupTheme">@style/popupNew</item>
    </style>

    <style name="popupNew" parent="Android:ThemeOverlay.Material.Light">
        <item name="Android:colorBackground">@color/red</item>
    </style>

</resources>

Cela fonctionne correctement si le thème appliqué à l'application est simplement ceci . Si j'ajoute Android:actionBarPopupTheme à mon thème existant, cela ne fonctionne pas. J'essaie de comprendre pourquoi.

10
Macarse

Ajoutez la propriété popupTheme à votre barre d’outils:

<Android.support.v7.widget.Toolbar
  xmlns:Android="http://schemas.Android.com/apk/res/Android"
  xmlns:app="http://schemas.Android.com/apk/res-auto"
  Android:id="@+id/toolbar"
  Android:layout_width="match_parent"
  Android:layout_height="wrap_content"
  Android:background="@color/color_primary"
  app:theme="@style/Theme.AppCompat.Light"
  app:popupTheme="@style/Theme.AppCompat" />

Ou définissez un nouveau style pour votre barre d’outils:

<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="Android:background">@color/green</item>
    <item name="popupTheme">@style/Theme.AppCompat.Light</item>
    <item name="theme">@style/Theme.AppCompat</item>
</style>
6
Lukas

Nous avons déjà répondu à cette question concernant le style via XML, mais j’ajoute ici une explication sur la façon de résoudre vous-même la solution à ce problème. 

Tout d'abord, c'est la solution lorsque vous utilisez AppCompat. Dans le fichier style.xml de votre application, ajoutez actionBarPopupTheme à votre thème:

<style name="Theme.MyTheme" parent="@style/Base.Theme.AppCompat.Light.DarkActionBar">
    ...other stuff here

    <item name="actionBarPopupTheme">@style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>

<style name="Theme.MyTheme.ActionBarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Light">
    <item name="Android:textColor">@Android:color/white</item>
    <item name="Android:background">@Android:color/black</item>
</style>

Voici les étapes que j'ai suivies pour arriver à cette solution (cela demande un peu de travail de détective car la documentation d'Android est médiocre):

  • Ouvrez le style.xml de votre application dans Android Studio.
  • Sur la ligne où le thème de votre application est défini, placez le curseur de votre écran dans le thème parent (par exemple, cliquez sur @ style/Base.Theme.AppCompat.Light.DarkActionBar), puis appuyez sur F4. Cela devrait vous amener au code source pour le style dans la bibliothèque appcompat.

  • Dans ce style, j'ai vu cette ligne:

    <item name = "actionBarPopupTheme"> @ style/ThemeOverlay.AppCompat.Light </ item>

    Cela ressemblait à un endroit possible pour changer le thème du popup. J'ai cherché "actionBarPopupTheme" chez les pauvres La documentation destinée aux développeurs Android a été trouvée "Référence à un thème devant être utilisé pour Gonfler les popups affichés par les widgets dans la barre d’action". Donc, cela valait la peine de jouer avec.

  • J'ai copié la ligne appcompat contenant "actionBarPopupTheme" dans mon style.xml puis, dans cette ligne, j'ai remplacé la référence de thème de l'élément (le bit en gras ci-dessus) par Theme.MyTheme.ActionBarPopupTheme.

  • Dans mon style.xml, j'ai créé mon nouveau style nommé Theme.MyTheme.ActionBarPopupTheme. J'ai utilisé le même parent que celui utilisé dans le style que j'ai copié à partir de la source appcompat (le bit en gras ci-dessus).
  • Pour m'assurer que mon nouveau style de popup fonctionnait, j'ai changé le style parent en ThemeOverlay.AppCompat.Dark, puis j'ai exécuté et testé le code sur un périphérique. Le style de popups a changé, alors je savais maintenant que ma priorité d'actionBarPopupTheme était la bonne chose à faire. Puis je suis revenu à ThemeOverlay.AppCompat.Light. 
  • Le prochain défi consiste à déterminer les noms d'éléments à remplacer dans Theme.MyTheme.ActionBarPopupTheme. J'ai changé les couleurs du texte et de l'arrière-plan. Trouver les bons noms d'articles qui changent le style de quelque chose peut être délicat dans certains cas. Une façon de trouver des noms d’éléments de style moins évidents consiste à parcourir les définitions de style du fichier xml appcompat (celui que vous avez ouvert lorsque vous avez appuyé sur F4 à la deuxième étape ci-dessus), en descendant continuellement dans les styles parent (F4 à nouveau!) ça peut faire ce que tu veux. Les recherches sur Google aideront également ici. 
1
pbm