Wie gestalte ich die appcompat-v7-Symbolleiste wie Theme.AppCompat.Light.DarkActionBar?

Ich versuche, das Aussehen Theme.AppCompat.Light.DarkActionBarmit der neuen Symbolleiste der Support-Bibliothek wiederherzustellen.

Wenn ich mich entscheide, ist Theme.AppCompat.Lightmeine Symbolleiste hell und wenn ich mich entscheide, ist Theme.AppCompatsie dunkel. (Technisch muss man die .NoActionBarVersion verwenden, aber soweit ich das beurteilen kann, ist der einzige Unterschied

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

Jetzt gibt es keine, Theme.AppCompat.Light.DarkActionBaraber naiv dachte ich, es wäre gut genug, um nur meine eigenen zu machen

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

Damit sind meine Symbolleisten jedoch immer noch Lightthematisiert. Ich habe jetzt Stunden damit verbracht, verschiedene Kombinationen des Mischens des dunklen (Basis-) Themas und des hellen Themas auszuprobieren, aber ich kann einfach keine Kombination finden, mit der ich auf allen außer den Symbolleisten helle Hintergründe habe.

Gibt es eine Möglichkeit, das AppCompat.Light.DarkActionBarAussehen mit Importen android.support.v7.widget.Toolbarzu erhalten?

Die empfohlene Methode zum Formatieren der Symbolleiste für einen Light.DarkActionBarKlon besteht darin, sie Theme.AppCompat.Light.DarkActionbarals übergeordnetes / App-Design zu verwenden und dem Stil die folgenden Attribute hinzuzufügen, um die Standard-Aktionsleiste auszublenden:

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

Verwenden Sie dann Folgendes als Symbolleiste:

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

Für weitere Änderungen würden Sie Stile erstrecken erstellen ThemeOverlay.AppCompat.Dark.ActionBarund ThemeOverlay.AppCompat.Lightersetzen die , die innerhalb AppBarLayout->android:themeund Toolbar->app:popupTheme. Beachten Sie auch, dass dies Ihre Daten aufnimmt, ?attr/colorPrimarywenn Sie es in Ihrem Hauptstil festgelegt haben, sodass Sie möglicherweise eine andere Hintergrundfarbe erhalten.

Ein gutes Beispiel dafür finden Sie in der aktuellen Projektvorlage mit einem Empty Activityvon Android Studio (1.4+).

Bearbeiten: Nach dem Update auf appcompat-v7: 22.1.1 und der Verwendung AppCompatActivityanstelle ActionBarActivitymeiner styles.xml sieht es so aus:

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

Hinweis: Dies bedeutet, dass ich eine Toolbarvom Framework bereitgestellte (NICHT in einer XML-Datei enthalten) verwende.

Das hat bei mir
funktioniert : styles.xml file:

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

Update: Ein Zitat aus Gabriele Mariottis Blog .

Mit der neuen Symbolleiste können Sie einen Stil und ein Thema anwenden. Sie sind anders! Der Stil ist lokal in der Symbolleistenansicht, z. B. die Hintergrundfarbe. Das App: -Thema ist stattdessen global für alle in der Symbolleiste aufgeblasenen UI-Elemente, z. B. die Farbe des Titels und der Symbole.

Ok, nachdem ich viel zu viel Zeit in dieses Problem gesteckt hatte, gelang es mir auf diese Weise, das Aussehen zu erreichen, auf das ich gehofft hatte. Ich mache eine separate Antwort, damit ich alles an einem Ort bekommen kann.

Es ist eine Kombination von Faktoren.

Versuchen Sie zunächst nicht, die Symbolleisten nur durch Themen zu spielen. Es scheint unmöglich zu sein.

Wenden Sie also Themen explizit auf Ihre Symbolleisten an, wie in der Antwort von oRRs

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

Dies ist jedoch die magische Sauce. Um die Hintergrundfarben zu erhalten, die ich mir erhofft hatte, müssen Sie das backgroundAttribut in Ihren Symbolleisten-Designs überschreiben

values ​​/ 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>

Fügen Sie dann einfach Ihr Symbolleistenlayout in Ihre anderen Layouts ein

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

und du bist gut zu gehen.

Ich hoffe, das hilft jemand anderem, damit Sie nicht so viel Zeit damit verbringen müssen wie ich.

(Wenn jemand herausfinden kann, wie dies funktioniert, indem er nur Themen verwendet, dh die Themen nicht explizit in den Layoutdateien anwenden muss, unterstütze ich stattdessen gerne ihre Antwort)

BEARBEITEN:

Das Veröffentlichen einer vollständigeren Antwort war also anscheinend ein Magnet für die Ablehnung, daher akzeptiere ich einfach die unvollständige Antwort oben, lasse diese Antwort jedoch hier, falls jemand sie tatsächlich benötigt. Fühlen Sie sich frei, weiter abzustimmen, wenn es Sie glücklich macht.

Der sauberste Weg, dies zu tun, besteht darin, ein untergeordnetes Element von ' ThemeOverlay.AppCompat.Dark.ActionBar ' zu erstellen . Im Beispiel habe ich die Hintergrundfarbe der Symbolleiste auf ROT und die Textfarbe auf BLAU gesetzt.

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

Sie können Ihr Thema dann auf die Symbolleiste anwenden:

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

Um Werkzeugleiste Stil anpassen, erstellen erste Werkzeugleiste benutzerdefinierten Stil vererben Widget.AppCompat.Toolbar, überschreiben Eigenschaften und fügen Sie es dann , um benutzerdefinierte App Thema , wie unten dargestellt, siehe http://www.zoftino.com/android-toolbar-tutorial für Weitere Informationen Symbolleiste und Stile.

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

Sie können dies unten versuchen.

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

Die Detailelemente finden Sie unter https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Hier sind einige weitere: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Hoffe das kann dir helfen.

Ähnlich wie bei Arnav Rao, jedoch mit einem anderen Elternteil:

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

Bei diesem Ansatz wird das Erscheinungsbild der Symbolleiste vollständig in den App-Stilen definiert, sodass Sie nicht auf jeder Symbolleiste ein Styling platzieren müssen.