Как установить собственный цвет / стиль ActionBar?


87

Я использую Android Navigation barв своем проекте, я хочу изменить верхний цвет панели действий на что-то красное. Как я могу это сделать? У меня есть что-то вроде этого,

верх черный

и я хочу что-то вроде этого,

верх красный

как я могу этого добиться?

Ответы:


174

Вы можете определить цвет ActionBar (и других вещей), создав собственный стиль :

Просто отредактируйте файл res / values ​​/ styles.xml вашего проекта Android.

Например так:

<resources>
    <style name="MyCustomTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">ANY_HEX_COLOR_CODE</item>
    </style>
</resources>

Затем установите «MyCustomTheme» в качестве темы вашей деятельности, содержащей ActionBar.

Вы также можете установить цвет для ActionBar следующим образом:

ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.RED)); // set your desired color

Взято отсюда: Как изменить цвет фона ActionBar ActionBarActivity с помощью XML?


2
Что вы имеете в виду, говоря «Затем установите MyCustomTheme» в качестве темы вашей деятельности, содержащей ActionBar? Как я могу это сделать?
Kala J

2
В XML- файле активности вы должны добавить android: theme = "@ style / MyCustomTheme" в качестве параметра в теге <android.support.v4.view.ViewPager ... />
PedroD

2
как насчет оставшихся файлов valuesv14 и valuesv21 styles.xml в android
Харша

Как бы можно было изменить текстовый стиль заголовка?
Адам Гурвиц

@KalaJ используйте setTheme(R.style.MyCustomTheme) в методе onCreate вашей активности.
NullByte08

57

Обычно ОС Android использует «тему», чтобы позволить разработчикам приложений глобально применять универсальный набор параметров стиля элементов пользовательского интерфейса к приложениям Android в целом или, в качестве альтернативы, к отдельному подклассу Activity.

Таким образом, существует три основных «системных темы» ОС Android, которые вы можете указать в XML-файле манифеста Android при разработке приложений для версии 3.0 и более поздних версий.

Я имею в виду библиотеку поддержки (APPCOMPAT) здесь: - Итак, три темы: 1. Тема AppCompat Light (Theme.AppCompat.Light)

введите описание изображения здесь

  1. Темная тема AppCompat (Theme.AppCompat),

введите описание изображения здесь

  1. И гибрид между этими двумя, AppCompat Light Theme с Darker ActionBar. (Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xml и просмотрите тег, тема Android упоминается как: - android: theme = "@ style / AppTheme"

Откройте файл Styles.xml, и там объявлена ​​базовая тема приложения: -

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  </style>

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

ActionBar с разным цветом фона: -

Для этого нам нужно создать новый стиль MyActionBar (вы можете дать любое имя) с родительской ссылкой на @ style / Widget.AppCompat.Light.ActionBar.Solid.Inverse, который содержит характеристики стиля для элемента пользовательского интерфейса Android ActionBar. Таким образом, определение будет

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
</style>

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

@ style / MyActionBar ActionBar с розовым цветом фона

Измените цвет текста строки заголовка (например, с черного на белый): -

Теперь, чтобы изменить цвет текста заголовка, нам нужно переопределить родительскую ссылку parent = "@ style / TextAppearance.AppCompat.Widget.ActionBar.Title">

Таким образом, определение стиля будет

<style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/white</item>
</style>

Мы будем ссылаться на это определение стиля внутри определения стиля MyActionBar , поскольку модификация TitleTextStyle является дочерним элементом родительского элемента пользовательского интерфейса ОС ActionBar. Таким образом, окончательное определение элемента стиля MyActionBar будет

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
    <item name="titleTextStyle">@style/MyActionBarTitle</item>
</style>

Итак, это последний файл Styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- This is the styling for action bar -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@color/red</item>
        <item name="titleTextStyle">@style/MyActionBarTitle</item>
    </style>

    <style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>
</resources>

Панель действий с белым цветом заголовка Для получения дополнительных сведений о стилях меню ActionBar см. Эту ссылку


2
эй человек, это сработало. Одно сомнение, что, если я хочу изменить цвет значка переполнения меню, он меняет цвет в соответствии с нашей темой? белый значок для темной темы и темный значок для светлой темы, как изменить его на белый? рассмотрите последнее изображение в вашем ответе.
Ameen Maheen

33

Только для Android 3.0 и выше

При поддержке только Android 3.0 и выше вы можете определить фон панели действий следующим образом:

res / values ​​/ themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme" parent="@style/Theme.Holo.Light.DarkActionBar">
       <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

<!-- ActionBar styles -->
  <style name="MyActionBar" parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
       <item name="android:background">#ff0000</item>
  </style>
</resources>

Для Android 2.1 и выше

При использовании библиотеки поддержки XML-файл стиля может выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
  <resources>
  <!-- the theme applied to the application or activity -->
 <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
       parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@drawable/actionbar_background</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_background</item>
  </style>
 </resources>

Затем примените свою тему ко всему приложению или отдельным действиям:

подробнее Documentaion


Это странно: вы даете android 3.0 и выше более старый стиль (голографический), чем 2.1 и выше (Material Design / Appcompat) ...
Рул

@DalvikVM Да ..Appcompat для более старых версий. нет необходимости использовать его для более высоких версий. На момент ответа на этот вопрос материальный дизайн еще не применялся.
Кетан Ахир

Я получаю сообщение об ошибке: No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.изменение его android:style/Widget.Holo.Light.ActionBar.Solid.Inverseрешает проблему. Спасибо.
Энни Лаганг

@ style / Theme.AppCompat.Light.DarkActionBar не может быть разрешен в моем случае (Android Studio) - разве это не должно быть @android: style / Theme.AppCompat.Light.DarkActionBar - то есть с добавлением "android" перед стилем?
AgentKnopf

32

Вы можете изменить цвет панели действий следующим образом:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/green_action_bar</item>
</style>

Это все, что вам нужно для изменения цвета панели действий.

Кроме того, если вы хотите изменить цвет строки состояния, просто добавьте строку:

 <item name="android:colorPrimaryDark">@color/green_dark_action_bar</item>

Вот снимок экрана, сделанный с сайта разработчика Android, чтобы прояснить ситуацию, а вот ссылка, чтобы узнать больше о настройке цветовой палитры.

введите описание изображения здесь



5

Я могу изменить цвет текста ActionBar с помощью titleTextColor

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="titleTextColor">#333333</item>
</style>

3

Пользовательский цвет:

 <style name="AppTheme" parent="Theme.AppCompat.Light">

                <item name="colorPrimary">@color/ColorPrimary</item>
                <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
                <!-- Customize your theme here. -->
     </style>

Пользовательский стиль:

 <style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
        <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
        <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
        <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
        <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
        <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
    </style>

Подробнее: Android ActionBar


2

Поскольку я использовал AppCompatActivity приведенные выше ответы, у меня не сработало. Но решение ниже сработало:

В res / styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
</style>


PS: Я использовал colorPrimaryвместоandroid:colorPrimary


1

в style.xml добавьте этот код

<resources>
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyAction</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#333333</item>
    </style>
</resources>

0

Используйте это - http://jgilfelt.github.io/android-actionbarstylegenerator/

Хороший инструмент для настройки панели действий с предварительным просмотром в реальном времени за пару минут.


1
Хотя эта ссылка может дать ответ на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если ссылка на страницу изменится.
Роман Марусык
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.