62 votes

Barre d'action transparente : couleur d'onglet personnalisée

Je veux créer une barre d'action avec des onglets transparents, avec #3b000000 . Quelque chose comme ceci, mais avec des onglets sous la barre d'action :

enter image description here

Voici le code que j'utilise dans le fichier styles.xml :

<style name="Theme.MyTheme" parent="@style/Theme.Sherlock.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="actionBarStyle">@style/ActionBar</item>
</style>

<style name="ActionBar" parent="@style/Widget.Sherlock.Light.ActionBar">
    <item name="android:background">@color/actionbar</item>
    <item name="background">@color/actionbar</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    <item name="actionBarTabStyle">@style/ActionBarTabStyle</item>
</style>

<style name="ActionBarTabStyle" parent="@style/Widget.Sherlock.ActionBar.TabView">
    <item name="background">@color/actionbar_tabs</item>
    <item name="android:background">@color/actionbar_tabs</item>
</style>

Ce qui se passe, c'est que la barre d'action elle-même hace affichent la couleur de fond transparente, mais les onglets sont totalement transparents (aucune couleur visible).

Comment puis-je résoudre ce problème ?

138voto

Gunnar Karlsson Points 15071

Appelez setStackedBackgroundDrawable() sur votre ActionBar :

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#330000ff")));
actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#550000ff")));

Cela donne (à titre d'exemple, avec quelques icônes et onglets aléatoires, et deux couleurs de fond bleutées différentes pour souligner l'effet) :

enter image description here

(L'icône d'actualisation est celle par défaut, qui présente une légère transparence. Les autres icônes sont des icônes de test personnalisées avec la couleur #FFFFFFFF, c'est-à-dire sans transparence).

0 votes

Je ne veux pas de menuitems, je veux des onglets transparents.

0 votes

Ah, je ne savais pas qu'il y avait une différence dans le sens des mots. Je vais le faire. Merci beaucoup pour votre réponse !

0 votes

@GunnarKarlsson monsieur comment pouvons-nous réaliser ceci avec la barre d'action de sherlock ? ?

12voto

nininho Points 2751

J'ai fait cela sur un projet et le style était le suivant :

<style name="AppTheme" parent="android:Theme.Holo">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/action_bar_theme</item>
    <item name="android:actionMenuTextColor">#fff</item>
</style>

<style name="action_bar_theme" parent="@android:style/Widget.Holo.ActionBar">
    <item name="android:background">#b3000000</item>
    <item name="android:titleTextStyle">@style/action_bar_text</item>
</style>

0 votes

Où déclarez-vous la couleur et la transparence des onglets ?

0 votes

Désolé, dans mon projet, il n'y a pas d'onglets.

9voto

Shashwat Black Points 934

Comme mentionné dans cet article L'utilisation du thème personnalisé suivant fonctionne parfaitement.

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo">
        <item name="android:windowActionBarOverlay">true</item>
    </style>
</resources>

Pour appliquer une teinte de couleur, la réponse de Gunnar montre comment faire.

ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#330000ff")));
actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#550000ff")));

8voto

I Love Coding Points 50

Voici mon code pour rendre la barre d'action totalement transparente

<!-- Base application theme. -->
<style name="TransparentTheme" parent="android:Theme.Holo.Light">
    <!-- Customize your theme here. -->
    <item name="android:windowBackground">@null</item>
    <item name="android:actionBarStyle">@style/ActionBarStyle.Transparent</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

<style name="ActionBarStyle.Transparent" parent="android:Widget.ActionBar">
    <item name="android:background">@null</item>
    <item name="android:displayOptions">showHome|showTitle</item>
    <item name="android:titleTextStyle">@style/ActionBarStyle.Transparent.TitleTextStyle</item>
</style>

<style name="ActionBarStyle.Transparent.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">@android:color/white</item>
</style>

enter image description here

4voto

Nick Unuchek Points 139
             getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);//or add in style.xml
             ActionBar actionBar = getActionBar();

             ColorDrawable newColor = new ColorDrawable(getResources().getColor(R.color.action_bar_color));//your color from res
             newColor.setAlpha(128);//from 0(0%) to 256(100%)
             getActionBar().setBackgroundDrawable(newColor);

sur style.xml

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo">
        <item name="android:windowActionBarOverlay">true</item>
    </style>
</resources>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X