Как мне оформить панель инструментов appcompat-v7, например Theme.AppCompat.Light.DarkActionBar?

105

Я пытаюсь воссоздать внешний вид Theme.AppCompat.Light.DarkActionBarс помощью новой панели инструментов библиотеки поддержки.

Если я выберу, Theme.AppCompat.Lightмоя панель инструментов будет светлой, а если выберу, Theme.AppCompatто темной. (Технически вы должны использовать .NoActionBarверсию, но, насколько я могу судить, единственная разница в

<style name="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

Теперь нет, Theme.AppCompat.Light.DarkActionBarно наивно я подумал, что было бы достаточно просто сделать свой собственный

<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

Однако при этом мои панели инструментов по-прежнему Lightтематические. Я часами пробовал разные комбинации смешивания темной (базовой) темы и светлой темы, но я просто не могу найти комбинацию, которая позволила бы мне иметь светлый фон для всего, кроме панелей инструментов.

Есть ли способ получить AppCompat.Light.DarkActionBarвнешний вид с помощью импорта android.support.v7.widget.Toolbar?

Liminal
источник

Ответы:

216

Рекомендуемый способ стилизовать панель инструментов для Light.DarkActionBarклона - использовать ее в Theme.AppCompat.Light.DarkActionbarкачестве родительской темы / темы приложения и добавить в стиль следующие атрибуты, чтобы скрыть панель действий по умолчанию:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Затем используйте в качестве панели инструментов следующее:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

Для дальнейших модификаций вы должны создать стили, расширяющие ThemeOverlay.AppCompat.Dark.ActionBarи ThemeOverlay.AppCompat.Lightзаменяющие стили внутри AppBarLayout->android:themeи Toolbar->app:popupTheme. Также обратите внимание, что это заберет ваш?attr/colorPrimary если вы установили его в своем основном стиле, поэтому вы можете получить другой цвет фона.

Вы найдете хороший пример этого в текущем шаблоне проекта с Empty ActivityAndroid Studio (1.4+).

ОРР
источник
1
Ну да, можно. "Если вы хотите унаследовать стили, которые вы определили сами, вам не нужно использовать родительский атрибут. Вместо этого просто добавьте префикс имени стиля, который вы хотите унаследовать, к имени вашего нового стиля, разделенного точкой . " developer.android.com/guide/topics/ui/themes.html#Inheritance
Liminal,
1
Кроме того, используя опубликованный вами xml, я получаю белую панель инструментов с белым текстом или, если я изменяю тему, ThemeOverlay.AppCompat.ActionBarя получаю белую панель инструментов с черным текстом, поэтому, похоже, она не работает так хорошо. Не похоже, что система заботится о <item name="android:colorBackground">@color/background_material_dark</item>in Base.ThemeOverlay.AppCompat.Dark. Но я буду копать дальше. (И я прочитал эту страницу. Это была одна из моих отправных точек. По-прежнему, похоже, не работает.)
Liminal
1
Извини за это. Оставил цвет фона панели инструментов для простоты и не тестировал результаты. Я соответственно изменил ответ. Однако я не нашел способа сделать это только с использованием стилей. Поскольку мое приложение имеет разные цветовые схемы, я использую его android:background="?attr/colorPrimary"на панели инструментов и <item name="colorPrimary">@color/background_material_dark</item>в своем стиле, поэтому оно автоматически адаптирует основной цвет приложения.
oRRs
1
это больше не работает в совместимости приложений 23, и заголовок черный, а не белый: /
Rashad.Z
21
есть ли способ разобраться в этих джунглях тем и стилей?
axd
72

Изменить: после обновления до appcompat-v7: 22.1.1 и использования AppCompatActivityвместо ActionBarActivityмоего styles.xml выглядит так:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Примечание. Это означает, что я использую Toolbarпредоставленный фреймворком (НЕ включен в файл XML).

У меня это сработало:
файл styles.xml:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Обновление: цитата из блога Габриэле Мариотти .

С новой панелью инструментов вы можете применить стиль и тему. Они разные! Стиль является локальным для представления панели инструментов, например, цвет фона. Тема app: вместо этого является глобальной для всех элементов пользовательского интерфейса на панели инструментов, например, цвета заголовка и значков.

LordRaydenMK
источник
«Ошибка: не найден ресурс, соответствующий заданному имени: attr 'colorPrimary'.» Мы говорим об использовании appcompat_v7 здесь.
Яр
Для меня это работает только на устройствах Lollipop. В pre-lollipop не только панель действий, но и все действия используют темную тему, чего я не хотел. Я проголосовал за, но в конце я использовал ответ oRRs, стилизовав единый вид панели инструментов.
lorenzo-s
@ lorenzo-s Я обновил свой ответ для последней версии appcompat. Я также тестировал его на Galaxy Nexus с android 4.3, и он работает
LordRaydenMK
31

Хорошо, после того, как я потратил много времени на решение этой проблемы, именно так мне удалось добиться того внешнего вида, на который я надеялся. Я делаю отдельный ответ, чтобы собрать все в одном месте.

Это сочетание факторов.

Во-первых, не пытайтесь заставить панели инструментов работать просто с помощью тем. Это кажется невозможным.

Так что применяйте темы явно к своим панелям инструментов, как в ответе oRRs

макет / toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/Dark.Overlay"
    app:popupTheme="@style/Dark.Overlay.LightPopup" />

Однако это волшебный соус. Я надеялся, что для того, чтобы получить цвета фона, вам нужно переопределить backgroundатрибут в темах панели инструментов.

значения / styles.xml:

<!-- 
    I expected android:colorBackground to be what I was looking for but
    it seems you have to override android:background
-->
<style name="Dark.Overlay" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:background">@color/material_grey_200</item>
</style>

затем просто включите макет панели инструментов в другие макеты

<include android:id="@+id/mytoolbar" layout="@layout/toolbar" />

и тебе хорошо идти.

Надеюсь, это поможет кому-то другому, поэтому вам не придется тратить на это столько времени, как у меня.

(если кто-то может понять, как сделать эту работу, используя только темы, то есть не нужно явно применять темы в файлах макета, я с радостью поддержу их ответ)

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

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

Liminal
источник
2
В моем AppTheme я просто поместил <item name="colorPrimary">@color/colorPrimary</item> Тогда я могу использовать android:background="?attr/colorPrimary"атрибут в моем виджете панели инструментов.
Лемюэль
Могу я узнать, как вы получите определение «@ color / material_grey_200»?
Cheok Yan Cheng
Я точно не помню, где, но кто-то сделал файл colors.xml на основе google.com/design/spec/style/color.html#color-color-palette, хотя сейчас не может его найти
Liminal
1
@Liminal Если вы используете, @android:color/transparentвы избегаете проблемы, когда вы долгое время нажимаете / нажимаете на пункт меню, вокруг текста есть рамка. Это также доказывает, что в будущем цвет фона изменится.
Ryan R
Однако не работает, когда вы используете CollapsingToolbarLayout.
arekolek
17

Самый простой способ, который я нашел для этого, - создать дочерний элемент ThemeOverlay.AppCompat.Dark.ActionBar . В этом примере я установил цвет фона панели инструментов на КРАСНЫЙ цвет, а цвет текста на СИНИЙ.

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#FF0000</item>
    <item name="android:textColorPrimary">#0000FF</item>
</style>

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

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:theme="@style/MyToolbar"
    android:minHeight="?attr/actionBarSize"/>
Дон
источник
6
Боже мой, вот оно что! textColorPrimary! Почему это было так чертовски трудно нигде найти
Маппет
12

Чтобы настроить стиль панели инструментов, сначала создайте собственный стиль панели инструментов, наследующий Widget.AppCompat.Toolbar, переопределите свойства и затем добавьте его в настраиваемую тему приложения, как показано ниже, см. Http://www.zoftino.com/android-toolbar-tutorial для панель инструментов дополнительной информации и стили.

   <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/MyToolBarStyle</item>
    </style>
    <style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">#80deea</item>
        <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
    </style>
    <style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">35dp</item>
        <item name="android:textColor">#ff3d00</item>
    </style>
    <style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">30dp</item>
        <item name="android:textColor">#1976d2</item>
    </style>
Арнав Рао
источник
7

Вы можете попробовать это ниже.

<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
    <!-- your code here -->
</style>

А подробные элементы вы можете найти в https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar.

Вот еще немного: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Надеюсь, это поможет тебе.

Ён
источник
1
Ага. С их помощью я смог добиться правильного цвета фона и, наконец, понял, как правильно настроить цвета заголовков. Однако сейчас убийственная вещь заключается в том, что я не могу понять, где кнопка переполнения получает свой цвет. Независимо от того, что я меняю, он остается таким темным, что не отображается на моей темной панели действий. Если я изменю тему на темную, она будет светлой и будет хорошо отображаться. Однако сколько бы я ни копался, я не могу понять, как сделать так, чтобы значок переполнения светился, когда я начал со светлой темы
Liminal
0

Подобно Арнаву Рао, но с другим родителем:

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

    <item name="toolbarStyle">@style/MyToolbar</item>
</style>

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#ff0000</item>
</style>

При таком подходе внешний вид панели инструментов полностью определяется стилями приложения, поэтому вам не нужно размещать какие-либо стили на каждой панели инструментов.

Craigmj
источник
2
Фактически android:toolbarStyle API 21+ для android.widget.Toolbar. toolbarStyleэто AppCompat для android.support.v7.widget.Toolbar.
Eugen Pechanec
Я думал, что Android Studio вызывает у меня проблемы, но во втором тесте вы правы! Это отличная новость - мне снова удалось снизить свой minSDK до 19, и похоже, что мой toolbarStyle все еще работает нормально! Спасибо!
craigmj
Только что заметил! Все еще есть непонимание стилей и тем . MyToolbarстиль должен расширять Widget.AppCompat.Toolbarне тему.
Eugen Pechanec