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

105

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?

Liminal
quelle

Antworten:

216

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

oRRs
quelle
1
Na ja kannst du. "Wenn Sie von Stilen erben möchten, die Sie selbst definiert haben, müssen Sie das übergeordnete Attribut nicht verwenden. Stellen Sie stattdessen einfach den Namen des Stils, den Sie erben möchten, dem Namen Ihres neuen Stils voran, der durch einen Punkt getrennt ist . " developer.android.com/guide/topics/ui/themes.html#Inheritance
Liminal
1
Auch mit der von Ihnen geposteten XML-Datei erhalte ich eine weiße Symbolleiste mit weißem Text. Wenn ich das Thema in "Weiß" mit weißem Text ändere, ThemeOverlay.AppCompat.ActionBarscheint es nicht so gut zu funktionieren. Scheint nicht so, als würde sich das System um das <item name="android:colorBackground">@color/background_material_dark</item>In kümmern Base.ThemeOverlay.AppCompat.Dark. Aber ich werde weiter graben. (Und ich habe diese Seite gelesen. Das war einer meiner Ausgangspunkte. Scheint immer noch nicht zu funktionieren.)
Liminal
1
Das tut mir leid. Lassen Sie die Hintergrundfarbe der Symbolleiste der Einfachheit halber weg und haben Sie die Ergebnisse nicht getestet. Ich habe die Antwort entsprechend überarbeitet. Ich habe jedoch keinen Weg gefunden, dies nur mit Stilen zu tun. Da meine App unterschiedliche Farbschemata hat, verwende ich sie android:background="?attr/colorPrimary"in der Symbolleiste und <item name="colorPrimary">@color/background_material_dark</item>in meinem Stil, sodass die primäre App-Farbe automatisch angepasst wird.
ORRs
1
Dies funktioniert nicht mehr in App-Kompatibilität 23 und der Titel ist schwarz und nicht weiß: /
Rashad.Z
21
Gibt es eine Möglichkeit, diesen Dschungel von Themen und Stilen in den Griff zu bekommen?
Axd
72

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.

LordRaydenMK
quelle
"Fehler: Es wurde keine Ressource gefunden, die dem angegebenen Namen entspricht: attr 'colorPrimary'." Wir sprechen hier über die Verwendung von appcompat_v7.
Yar
Bei mir funktioniert das nur auf Lollipop-Geräten. Auf Pre-Lollipop verwenden nicht nur die Aktionsleiste, sondern alle Aktivitäten das dunkle Thema, was ich nicht wollte. Ich habe positiv gestimmt, aber am Ende habe ich die Antwort von oRRs verwendet und die einzelne Symbolleistenansicht gestaltet.
Lorenzo-s
@ lorenzo-s Ich habe meine Antwort für die neueste Version von Appcompat aktualisiert. Ich habe es auch auf Galaxy Nexus mit Android 4.3 getestet und es funktioniert
LordRaydenMK
31

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.

Liminal
quelle
2
In meinem AppTheme habe ich gerade <item name="colorPrimary">@color/colorPrimary</item> Dann kann ich das android:background="?attr/colorPrimary"Attribut in meinem Symbolleisten-Widget verwenden.
Lemuel
Darf ich wissen, wie Sie die Definition von "@ color / material_grey_200" erhalten?
Cheok Yan Cheng
Ich weiß nicht genau, wo, aber jemand hat eine color.xml-Datei erstellt, die auf google.com/design/spec/style/color.html#color-color-palette basiert. Sie kann sie jetzt jedoch nicht finden
Liminal
1
@Liminal Wenn Sie verwenden @android:color/transparent, vermeiden Sie das Problem, wenn Sie lange auf einen Menüpunkt drücken / klicken. Um den Text befindet sich ein Feld. Dies ist auch zukunftssicher, wenn sich die helle Hintergrundfarbe in Zukunft ändert.
Ryan R
Funktioniert jedoch nicht, wenn Sie CollapsingToolbarLayout verwenden.
Arekolek
17

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"/>
Don
quelle
6
Mein Gott, das war es! textColorPrimary! Warum war das so verdammt schwer zu finden
Muppet
12

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>
Arnav Rao
quelle
7

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.

Yong
quelle
1
Jep. Mit diesen kann ich so weit kommen, dass die Hintergrundfarbe stimmt, und ich habe endlich herausgefunden, wie ich die Titelfarben richtig machen kann. Das Mörderhafte im Moment ist jedoch, dass ich nicht herausfinden kann, woher der Überlaufknopf seine Farbe bezieht. Egal was ich ändere, es bleibt so dunkel, dass es nicht auf meiner dunklen Aktionsleiste angezeigt wird. Wenn ich das Thema in dunkel ändere, ist es hell und wird gut angezeigt. Egal wie viel ich herumgrabe, ich kann nicht herausfinden, wie das Überlaufsymbol hell angezeigt wird, wenn ich mit einem hellen Thema begonnen habe
Liminal
0

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

craigmj
quelle
2
Eigentlich android:toolbarStyleist API 21+ für android.widget.Toolbar. toolbarStyleist AppCompat für android.support.v7.widget.Toolbar.
Eugen Pechanec
Ich hatte gedacht, Android Studio würde mir ein Problem damit geben, aber bei einem zweiten Test haben Sie Recht! Das sind großartige Neuigkeiten - ich konnte mein minSDK wieder auf 19 reduzieren und es sieht so aus, als ob mein Symbolleistenstil immer noch gut funktioniert! Danke dir!
Craigmj
Gerade bemerkt! Es gibt immer noch das Missverständnis von Stilen und Themen . MyToolbarStil sollte Widget.AppCompat.Toolbarkein Thema erweitern.
Eugen Pechanec