Як я стилю appcompat-v7 панелі інструментів, як Theme.AppCompat.Light.DarkActionBar?

Я намагаюся відтворити зовнішній вигляд за 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?

Рекомендованим способом стилізації Панелі інструментів для Light.DarkActionBarклону було б використовувати Theme.AppCompat.Light.DarkActionbarяк тему батьків / додатків та додати наступні атрибути до стилю, щоб приховати типовий параметр ActionBar:

<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+).

Редагувати: Після оновлення до appcompat-v7: 22.1.1 та використання AppCompatActivityзамість ActionBarActivityстилів.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: замість цього є глобальною для всіх елементів інтерфейсу, надутих на Панелі інструментів, наприклад, кольору заголовка та піктограм.

Гаразд після того, як я багато часу заглибився в цю проблему, це шлях, яким я зумів отримати вигляд, на який я сподівався. Я роблю це окремою відповіддю, щоб я міг отримати все в одному місці.

Це поєднання факторів.

По-перше, не намагайтеся змусити панелі інструментів грати добре через просто теми. Здається, це неможливо.

Тому застосовуйте теми явно на панелях інструментів, як у відповіді oRR

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

і ти добре підеш.

Сподіваюся, це допомагає комусь іншому, тому вам не доведеться витрачати на це стільки часу, скільки я.

(якщо хтось може зрозуміти, як зробити цю роботу, використовуючи лише теми, тобто не потрібно явно застосовувати теми у файлах макета, я з радістю підтримаю їх відповідь)

Редагувати:

Тож, очевидно, розміщення більш повної відповіді було зниженим магнітом, тому я просто прийму неповний відповідь вище, але залиште цю відповідь тут у випадку, якщо комусь це справді потрібне. Не соромтеся продовжувати звучати, якщо це робить вас щасливим.

Найчистіший спосіб, який я знайшов для цього, - це створити дитину " 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"/>

Щоб налаштувати стиль панелі інструментів, спочатку створіть користувацький стиль панелі інструментів, успадковуючи 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>

Ви можете спробувати це нижче.

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

Сподіваюся, що це може вам допомогти.

Схожий на Арнава Рао, але з іншим батьком:

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

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