Як встановити власний колір / стиль ActionBar?


87

Я використовую Android Navigation barу своєму проекті, я хочу змінити верхній колір на панелі дій на щось червоне. Як я можу це зробити? У мене щось подібне,

верх чорний

і я хочу щось подібне,

верхній червоний

як я можу цього досягти?

Відповіді:


174

Ви можете визначити колір панелі дій (та інших матеріалів), створивши власний стиль :

Просто відредагуйте файл 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 = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.RED)); // set your desired color

Взято звідси: Як я можу змінити колір тла панелі ActionBarActivity за допомогою XML?


2
Що ви маєте на увазі під "Потім встановіть" MyCustomTheme "як тему вашої активності, яка містить панель дій." Як це зробити?
— Kala J

2
У своїй діяльності XML ви повинні додати android: theme = "@ style / MyCustomTheme" як параметр всередині тегу <android.support.v4.view.ViewPager ... />
— PedroD

2
як щодо решти значеньv14 та файлів valuesv21 styles.xml в android
— Харша

Як можна було б змінити заголовок textStyle?
— Адам Гурвіц,

@KalaJ використовуйте setTheme(R.style.MyCustomTheme) у методі onCreate своєї діяльності.
— NullByte08,

57

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

Отже, є три основні «системні теми» для ОС Android, які ви можете вказати у своєму XML-файлі Android Manifest під час розробки програм для версії 3.0 та пізніших версій.

Я маю на увазі тут бібліотеку підтримки (APPCOMPAT): - Отже, три теми - це 1. Світлова тема AppCompat (Theme.AppCompat.Light)

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

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

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

  1. І гібрид між цими двома, AppCompat Light Theme з темнішою панеллю дій (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 з білим кольором заголовка Щоб отримати додаткові варіанти стилів меню 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>

Потім застосуйте свою тему до всього додатка або окремих дій:

детальніше Документація


Це дивно: ви даєте Android 3.0 і вище старшу стиль (голограми) , ніж 2.1 і вище (Material Design / AppCompat) ...
— Рул

@DalvikVM Так..Appcompat призначений для старих версій. немає необхідності використовувати його для вищих версій. На момент даної відповіді дизайн матеріалу не був впроваджений.
— Ketan Ahir

Я отримую повідомлення про помилку: No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.змінивши його на android:style/Widget.Holo.Light.ActionBar.Solid.Inverseвирішення проблеми. Дякую.
— Annie Lagang,

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