it-swarm.com.ru

Изменить цвет панели инструментов в Appcompat 21

Я тестирую новые возможности Appcompat 21 Material Design. Поэтому я создал панель инструментов следующим образом:

<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"/>

и включил его в мой основной файл макета.

Затем я установил его как supportActionBar следующим образом:

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

Это работает, но почему-то я не могу понять, как настроить панель инструментов. Это серый и текст на нем черный. Как мне изменить фон и цвет текста?

Я прошел через эту инструкцию:

http://Android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

Что я наблюдал, чтобы изменить цвет?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="Android:windowActionBar" tools:ignore="NewApi">false</item>
    <item name="windowActionBar">false</item>
</style>

РЕДАКТИРОВАТЬ:

Я смог изменить цвет фона, добавив следующие строки кода в тему:

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

Но они не влияют на цвет текста. Чего мне не хватает? Вместо черного текста и черной кнопки меню я бы предпочел белый текст и белые кнопки меню:

enter image description here

85
user2410644

опять же все это в ссылке, которую вы предоставили

чтобы изменить текст на белый, все, что вам нужно сделать, это изменить тему.

использовать эту тему

<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"/>
175
tyczj

Вы можете использовать тему app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar", как предложено в других ответах, но вы также можете использовать решение, подобное этому:

<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"/>

И вы можете иметь полный контроль над вашими элементами пользовательского интерфейса с этими стилями:

<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>
57
Gabriele Mariotti

Эй, если вы хотите применить тему материала только для Android 5.0, тогда вы можете добавить эту тему в нее

<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> 

Здесь ниже строка отвечает за цвет текста панели действий дизайна материала.

<item name="Android:textColorPrimary">@Android:color/white</item>
9
Herry

Вы можете динамически установить цвет элемента панели инструментов , создав собственный класс панели инструментов:

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);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

затем обратитесь к нему в вашем файле макета. Теперь вы можете установить собственный цвет, используя

toolbar.setItemColor(Color.Red);

Источники:

Я нашел информацию для этого здесь: Как динамически изменять Android Цвет значков панели инструментов

а затем я отредактировал его, улучшил его и разместил здесь: GitHub: AndroidDynamicToolbarItemColor

6
Michael Kern

Это то, что известно как DarkActionBar, что означает, что вы должны использовать следующую тему для получения желаемого стиля:

<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" />
5
MrEngineer13

Вы можете изменить цвет текста на панели инструментов с помощью этих:

<item name="Android:textColorPrimary">#FFFFFF</item>
<item name="Android:textColor">#FFFFFF</item>
2
Chris Cromer

Добейтесь этого, используя toolbar, например:

<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"/>
2
clementiano

Попробуйте это в вашем файле styles.xml:

colorPrimary будет цветом панели инструментов.

<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>

Кстати, вы построили это в Eclipse?

1
user2683292

я решил эту проблему после дополнительного изучения ...

для Api 21 и более использовать

   <item name="Android:textColorPrimary">@color/white</item>

для нижних версий

   <item name="actionMenuTextColor">@color/white</item>
1
Dinesh

Если вы хотите изменить цвет панели инструментов во всем приложении, используйте файл styles.xml. В общем, я избегаю изменения компонентов пользовательского интерфейса в своем коде Java, если я не пытаюсь сделать что-то программно. Если это один раз, то вы должны делать это в XML, чтобы сделать ваш код чище. Вот как будет выглядеть ваш файл 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>

Убедитесь, что вы используете вышеуказанный стиль в вашем AndroidManifext.xml как таковой:

    <application
        Android:theme="@style/YourAppName.AppTheme">
    </application>

Я хотел разные цвета панели инструментов для разных видов деятельности. Поэтому я снова использовал стили, как это:

    <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>

снова примените стили к каждому действию в вашем AndroidManifest.xml следующим образом:

<activity
    Android:name=".Activity2"
    Android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>

<activity
    Android:name=".Activity1"
    Android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>
0
Ryan Newsom

Для людей, которые используют AppCompatActivity с панелью инструментов в качестве белого фона. Используйте этот код.

Обновлено: декабрь 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>
0
zackygaurav