it-swarm.com.de

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

Ich versuche, das Aussehen von Theme.AppCompat.Light.DarkActionBar Mit der neuen Symbolleiste der Unterstützungsbibliothek wiederherzustellen.

Wenn ich Theme.AppCompat.Light Wähle, ist meine Symbolleiste hell und wenn ich Theme.AppCompat Wähle, ist sie dunkel. (Technisch muss man die Version .NoActionBar 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 keinen Theme.AppCompat.Light.DarkActionBar, Aber naiv dachte ich, es wäre gut genug, nur meinen 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 Light thematisch. Ich habe Stunden damit verbracht, verschiedene Kombinationen aus dem Dark (Basis) -Thema und dem Light-Thema zu mischen, aber ich kann einfach keine Kombination finden, mit der ich helle Hintergründe für alles außer den Symbolleisten habe.

Gibt es eine Möglichkeit, mit import AppCompat.Light.DarkActionBar 'S das Aussehen von Android.support.v7.widget.Toolbar Zu erhalten?

102
Liminal

Die empfohlene Art, die Symbolleiste für einen Light.DarkActionBar - Klon zu formatieren, besteht darin, Theme.AppCompat.Light.DarkActionbar Als übergeordnetes Thema/App-Design zu verwenden und dem Stil die folgenden Attribute hinzuzufügen, um die Standard-ActionBar 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 erstellen, die ThemeOverlay.AppCompat.Dark.ActionBar Und ThemeOverlay.AppCompat.Light Erweitern und die Stile in AppBarLayout->Android:theme Und Toolbar->app:popupTheme Ersetzen. Beachten Sie auch, dass dies Ihren ?attr/colorPrimary Aufnimmt, wenn Sie ihn 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 Activity Von Android Studio (1.4+).

211
oRRs

Bearbeiten: Nach dem Update auf appcompat-v7: 22.1.1 und der Verwendung von AppCompatActivity anstelle von ActionBarActivity sieht meine styles.xml folgendermaßen 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 ein vom Framework bereitgestelltes Toolbar verwende (NICHT in einer XML-Datei enthalten).

Das hat bei mir funktioniert:
styles.xml-Datei:

<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 für die Symbolleistenansicht, z. B. die Hintergrundfarbe. Das app: theme ist stattdessen global für alle in der Symbolleiste aufgeblasenen Benutzeroberflächenelemente, z. B. die Farbe des Titels und der Symbole.

70
LordRaydenMK

Ok, nachdem ich zu viel Zeit in dieses Problem gesteckt hatte, gelang es mir auf diese Weise, das Aussehen zu bekommen, 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 dazu zu bringen, Nizza nur über Themen abzuspielen. Es scheint unmöglich zu sein.

Wenden Sie daher Themen explizit auf Ihre Symbolleisten an, wie in oRRs answer

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 tatsächlich zu erhalten, hoffte ich, dass Sie das background -Attribut in Ihren Symbolleisten-Designs überschreiben müssen

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.

Hoffe, dass dies jemand anderem hilft, damit Sie nicht so viel Zeit dafür aufwenden müssen wie ich.

(Wenn jemand herausfinden kann, wie man diese Arbeit mit nur Themen macht, dh die Themen nicht explizit in den Layoutdateien anwenden muss, unterstütze ich stattdessen gerne ihre Antwort.)

EDIT:

Offensichtlich war das Posten einer vollständigeren Antwort ein Magnet der Ablehnung. Daher akzeptiere ich 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.

31
Liminal

Am einfachsten ist es, ein untergeordnetes Element von 'ThemeOverlay.AppCompat.Dark.ActionBar' zu erstellen. In diesem 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>

Anschließend können Sie Ihr Design 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"/>
17
Don

Um den Stil der Symbolleiste anzupassen, erstellen Sie zunächst einen benutzerdefinierten Stil für die Symbolleiste, indem Sie Widget.AppCompat.Toolbar übernehmen, Eigenschaften überschreiben und ihn dann dem benutzerdefinierten App-Design hinzufügen (siehe http://www.zoftino.com/Android- toolbar-tutorial 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>
9
Arnav Rao

Sie können dies unten versuchen.

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

Und die Detailelemente finden Sie in https://developer.Android.com/reference/Android/support/v7/appcompat/R.styleable.html#Toolbar

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

Hoffe das kann dir helfen.

6
Yong

Ähnlich wie bei Arnav Rao, aber 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 einen Stil platzieren müssen.

0
craigmj