Как я могу создать панель инструментов 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 themed. Я потратил несколько часов на то, чтобы пробовать разные комбинации микширования темной (основной) темы и темы Light, но я просто не могу найти комбинацию, которая позволит мне иметь светлые фоны для всего, кроме панелей инструментов.

Есть ли способ получить вид AppCompat.Light.DarkActionBar с импортом android.support.v7.widget.Toolbar?

ОТВЕТЫ

Ответ 1

Рекомендуемый способ стилизации панели инструментов для клона Light.DarkActionBar заключается в использовании Theme.AppCompat.Light.DarkActionbar в качестве темы parent/app и добавлении следующих атрибутов в стиль, чтобы скрыть 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 Activity для Android Studio (1.4 +).

Ответ 2

Изменить: после обновления до 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>

Обновление: цитата из Gabriele Mariotti blog.

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

Ответ 3

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

Это комбинация факторов.

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

Итак, примените темы явно к вашим панелям инструментов, например, в Ответы 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" />

и вам хорошо идти.

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

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

EDIT:

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

Чтобы настроить стиль панели инструментов, сначала создайте собственный стиль панели инструментов, наследующий 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="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>

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