Changer la couleur de la barre d'outils dans Appcompat 21
Je teste les nouvelles fonctionnalités Appcompat 21 Material Design. J'ai donc créé une barre d'outils comme celle-ci:
<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/activity_my_toolbar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:minHeight="?attr/actionBarSize"
Android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>
et inclus dans mon fichier de mise en page principale.
Ensuite, je l'ai défini comme supportActionBar comme ça:
Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);
Cela fonctionne, mais je n'arrive pas à comprendre comment personnaliser la barre d'outils. C'est gris et le texte est noir. Comment dois-je changer la couleur de l'arrière-plan et du texte?
J'ai parcouru ces instructions:
http://Android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html
Qu'est-ce que j'ai surveillé pour changer de couleur?
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="Android:windowActionBar" tools:ignore="NewApi">false</item>
<item name="windowActionBar">false</item>
</style>
EDIT:
J'ai pu changer la couleur de fond en ajoutant ces lignes de code au thème:
<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>
Mais ils n'affecteront pas la couleur du texte. Qu'est-ce que je rate? Au lieu du bouton de menu texte noir et noir, je préfère un bouton de menu texte blanc et blanc:
encore une fois tout cela est dans le lien que vous avez fourni
pour changer le texte en blanc, il vous suffit de changer de thème.
utiliser ce thème
<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/activity_my_toolbar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:minHeight="?attr/actionBarSize"
Android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
Vous pouvez utiliser un thème app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" comme suggéré dans d'autres réponses, mais vous pouvez également utiliser une solution comme celle-ci:
<Android.support.v7.widget.Toolbar
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
style="@style/HeaderBar"
app:theme="@style/ActionBarThemeOverlay"
app:popupTheme="@style/ActionBarPopupThemeOverlay"/>
Et vous pouvez avoir le contrôle total de vos éléments d'interface utilisateur avec ces styles:
<style name="ActionBarThemeOverlay" parent="">
<item name="Android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
<style name="HeaderBar">
<item name="Android:background">?colorPrimary</item>
</style>
<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
<item name="Android:background">@Android:color/white</item>
<item name="Android:textColor">#000</item>
</style>
Hé, si vous souhaitez appliquer le thème Matériau à Androiduniquement _ 5.0, vous pouvez y ajouter ce thème.
<style name="AppHomeTheme" parent="@Android:style/Theme.Material.Light">
<!-- customize the color palette -->
<item name="Android:colorPrimary">@color/blue_dark_bg</item>
<item name="Android:colorPrimaryDark">@color/blue_status_bar</item>
<item name="Android:colorAccent">@color/blue_color_accent</item>
<item name="Android:textColor">@Android:color/white</item>
<item name="Android:textColorPrimary">@Android:color/white</item>
<item name="Android:actionMenuTextColor">@Android:color/black</item>
</style>
La ligne ci-dessous indique de manière responsable la couleur du texte de la barre d’action de la conception Matériau.
<item name="Android:textColorPrimary">@Android:color/white</item>
Vous pouvez définir une couleur d’élément de la barre d’outils personnalisée en créant une classe de barre d’outils personnalisée:
package view;
import Android.app.Activity;
import Android.content.Context;
import Android.graphics.ColorFilter;
import Android.graphics.PorterDuff;
import Android.graphics.PorterDuffColorFilter;
import Android.support.v7.internal.view.menu.ActionMenuItemView;
import Android.support.v7.widget.ActionMenuView;
import Android.support.v7.widget.Toolbar;
import Android.util.AttributeSet;
import Android.util.Log;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.AutoCompleteTextView;
import Android.widget.EditText;
import Android.widget.ImageButton;
import Android.widget.ImageView;
import Android.widget.TextView;
public class CustomToolbar extends Toolbar{
public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
}
public CustomToolbar(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public CustomToolbar(Context context) {
super(context);
// TODO Auto-generated constructor stub
ctxt = context;
}
int itemColor;
Context ctxt;
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
Log.d("LL", "onLayout");
super.onLayout(changed, l, t, r, b);
colorizeToolbar(this, itemColor, (Activity) ctxt);
}
public void setItemColor(int color){
itemColor = color;
colorizeToolbar(this, itemColor, (Activity) ctxt);
}
/**
* Use this method to colorize toolbar icons to the desired target color
* @param toolbarView toolbar view being colored
* @param toolbarIconsColor the target color of toolbar icons
* @param activity reference to activity needed to register observers
*/
public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
final PorterDuffColorFilter colorFilter
= new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);
for(int i = 0; i < toolbarView.getChildCount(); i++) {
final View v = toolbarView.getChildAt(i);
doColorizing(v, colorFilter, toolbarIconsColor);
}
//Step 3: Changing the color of title and subtitle.
toolbarView.setTitleTextColor(toolbarIconsColor);
toolbarView.setSubtitleTextColor(toolbarIconsColor);
}
public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
if(v instanceof ImageButton) {
((ImageButton)v).getDrawable().setAlpha(255);
((ImageButton)v).getDrawable().setColorFilter(colorFilter);
}
if(v instanceof ImageView) {
((ImageView)v).getDrawable().setAlpha(255);
((ImageView)v).getDrawable().setColorFilter(colorFilter);
}
if(v instanceof AutoCompleteTextView) {
((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
}
if(v instanceof TextView) {
((TextView)v).setTextColor(toolbarIconsColor);
}
if(v instanceof EditText) {
((EditText)v).setTextColor(toolbarIconsColor);
}
if (v instanceof ViewGroup){
for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
}
}
if(v instanceof ActionMenuView) {
for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {
//Step 2: Changing the color of any ActionMenuViews - icons that
//are not back button, nor text, nor overflow menu icon.
final View innerView = ((ActionMenuView)v).getChildAt(j);
if(innerView instanceof ActionMenuItemView) {
int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
for(int k = 0; k < drawablesCount; k++) {
if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
final int finalK = k;
//Important to set the color filter in seperate thread,
//by adding it to the message queue
//Won't work otherwise.
//Works fine for my case but needs more testing
((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
// innerView.post(new Runnable() {
// @Override
// public void run() {
// ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
// }
// });
}
}
}
}
}
}
}
puis faites-en référence dans votre fichier de mise en page. Maintenant, vous pouvez définir une couleur personnalisée en utilisant
toolbar.setItemColor(Color.Red);
Sources:
J'ai trouvé les informations pour le faire ici: Comment changer dynamiquement Android Couleur des icônes de la barre d’outils
et puis je l'ai édité, amélioré, et posté ici: GitHub: AndroidDynamicToolbarItemColor
C'est ce qu'on appelle une DarkActionBar, ce qui signifie que vous devez utiliser le thème suivant pour obtenir le style souhaité:
<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" />
Vous pouvez changer la couleur du texte dans la barre d’outils avec:
<item name="Android:textColorPrimary">#FFFFFF</item>
<item name="Android:textColor">#FFFFFF</item>
Pour ce faire, utilisez la toolbar comme ceci:
<Android.support.v7.widget.Toolbar
Android:id="@+id/base_toolbar"
Android:layout_height="wrap_content"
Android:layout_width="match_parent"
Android:minHeight="?attr/actionBarSize"
Android:background="@color/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
Essayez ceci dans votre styles.xml:
colorPrimary sera la couleur de la barre d'outils.
<resources>
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_pressed</item>
<item name="colorAccent">@color/accent</item>
</style>
Avez-vous construit cela dans Eclipse en passant?
Si vous souhaitez modifier la couleur de votre barre d'outils tout au long de votre application, utilisez le fichier styles.xml. En général, j'évite de modifier les composants d'interface utilisateur dans mon code Java, sauf si j'essaie de faire quelque chose par programme. S'il s'agit d'un jeu unique, vous devriez le faire en XML pour rendre votre code plus propre. Voici à quoi ressemblera votre styles.xml:
<!-- Base application theme. -->
<style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Color Primary will be your toolbar color -->
<item name="colorPrimary">@color/colorPrimary</item>
<!-- Color Primary Dark will be your default status bar color -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
Assurez-vous d'utiliser le style ci-dessus dans votre fichier AndroidManifext.xml en tant que tel:
<application
Android:theme="@style/YourAppName.AppTheme">
</application>
Je voulais différentes couleurs de barre d’outils pour différentes activités. J'ai donc utilisé à nouveau les styles comme ceci:
<style name="YourAppName.AppTheme.Activity1">
<item name="colorPrimary">@color/activity1_primary</item>
<item name="colorPrimaryDark">@color/activity1_primaryDark</item>
</style>
<style name="YourAppName.AppTheme.Activity2">
<item name="colorPrimary">@color/activity2_primary</item>
<item name="colorPrimaryDark">@color/activity2_primaryDark</item>
</style>
encore une fois, appliquez les styles à chaque activité de votre fichier AndroidManifest.xml en tant que tel:
<activity
Android:name=".Activity2"
Android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>
<activity
Android:name=".Activity1"
Android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>
j'ai résolu ce problème après plus d'étude ...
pour Api21 et plus utiliser
<item name="Android:textColorPrimary">@color/white</item>
pour les versions inférieures utiliser
<item name="actionMenuTextColor">@color/white</item>
Pour les personnes qui utilisent AppCompatActivity avec la barre d’outils sur un fond blanc. Utilisez ce code.
Mise à jour: décembre 2017
<Android.support.design.widget.AppBarLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
app:theme="@style/ThemeOverlay.AppCompat.Light">
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar_edit"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.AppBarOverlay"
app:title="Edit Your Profile"/>
</Android.support.design.widget.AppBarLayout>