ฉันจะสไตล์ appcompat-v7 Toolbar เช่น 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หรือไม่?

วิธีที่แนะนำในการจัดรูปแบบ 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>

จากนั้นใช้สิ่งต่อไปนี้เป็น Toolbar ของคุณ:

<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แทนActionBarActivitystyles.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 ของ

ด้วย Toolbar ใหม่คุณสามารถใช้สไตล์และธีมได้ พวกเขาแตกต่าง! สไตล์เป็นแบบท้องถิ่นในมุมมอง Toolbar เช่นสีพื้นหลัง แอป: ธีมเป็นแบบสากลแทนสำหรับองค์ประกอบ ui ทั้งหมดที่พองตัวในแถบเครื่องมือเช่นสีของชื่อเรื่องและไอคอน

ตกลงหลังจากจมลงไปในปัญหานี้เป็นเวลานานแล้วนี่เป็นวิธีที่ฉันจัดการเพื่อให้ได้รูปลักษณ์ที่ฉันหวังไว้ ฉันกำลังกำหนดคำตอบแยกต่างหากเพื่อที่ฉันจะได้ทุกอย่างในที่เดียว

มันเป็นปัจจัยหลายอย่างรวมกัน

ประการแรกอย่าพยายามทำให้แถบเครื่องมือเล่นได้ดีผ่านธีมเพียงอย่างเดียว ดูเหมือนจะเป็นไปไม่ได้

ดังนั้นใช้ธีมกับแถบเครื่องมือของคุณอย่างชัดเจนเช่นในคำตอบ 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แอตทริบิวต์ในธีม Toolbar ของคุณ

ค่า / 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 ' ในตัวอย่างฉันตั้งค่าสีพื้นหลังของ Toolbar เป็นสีแดงและสีของข้อความเป็นสีน้ำเงิน

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

หวังว่านี่จะช่วยคุณได้

คล้ายกับของ Arnav Rao แต่มีผู้ปกครองคนละคน:

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

ด้วยวิธีนี้ลักษณะที่ปรากฏของ Toolbar จึงถูกกำหนดไว้ทั้งหมดในสไตล์แอพดังนั้นคุณไม่จำเป็นต้องวางสไตล์ใด ๆ บนแถบเครื่องมือแต่ละอัน