Làm cách nào để tạo kiểu cho Thanh công cụ appcompat-v7 giống như Theme.AppCompat.Light.DarkActionBar?

Tôi đang cố gắng tạo lại giao diện Theme.AppCompat.Light.DarkActionBarvới Thanh công cụ của thư viện hỗ trợ mới.

Nếu tôi chọn, Theme.AppCompat.Lightthanh công cụ của tôi sẽ sáng và nếu tôi chọn, Theme.AppCompatnó sẽ tối. (Về mặt kỹ thuật, bạn phải sử dụng .NoActionBarphiên bản nhưng theo tôi có thể nói sự khác biệt duy nhất là

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

Bây giờ không có Theme.AppCompat.Light.DarkActionBarnhưng tôi ngây thơ nghĩ rằng chỉ cần làm của riêng tôi là đủ tốt rồi

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

Tuy nhiên với điều này, các thanh công cụ của tôi vẫn có Lightchủ đề. Bây giờ tôi đã dành hàng giờ để thử các kết hợp khác nhau để trộn chủ đề Tối (cơ bản) và chủ đề Ánh sáng nhưng tôi không thể tìm thấy sự kết hợp nào cho phép tôi có nền sáng trên mọi thứ trừ các thanh công cụ.

Có cách nào để có được AppCompat.Light.DarkActionBargiao diện với nhập khẩu android.support.v7.widget.Toolbarkhông?

Cách được đề xuất để tạo kiểu cho Thanh công cụ cho Light.DarkActionBarbản sao là sử dụng Theme.AppCompat.Light.DarkActionbarlàm chủ đề chính / ứng dụng và thêm các thuộc tính sau vào kiểu để ẩn Thanh hành động mặc định:

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

Sau đó, sử dụng phần sau làm Thanh công cụ của bạn:

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

Đối với các sửa đổi thêm, bạn sẽ tạo các kiểu mở rộng ThemeOverlay.AppCompat.Dark.ActionBarvà ThemeOverlay.AppCompat.Lightthay thế các kiểu bên trong AppBarLayout->android:themevà Toolbar->app:popupTheme. Cũng lưu ý rằng điều này sẽ nhận?attr/colorPrimary nếu bạn đã đặt nó theo phong cách chính của mình để bạn có thể nhận được màu nền khác.

Bạn sẽ tìm thấy một ví dụ điển hình về điều này là trong mẫu dự án hiện tại với Empty ActivityAndroid Studio (1.4+).

Chỉnh sửa: Sau khi cập nhật lên appcompat-v7: 22.1.1 và sử dụng AppCompatActivitythay vì ActionBarActivitystyles.xml của tôi trông giống như sau:

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

Lưu ý: Điều này có nghĩa là tôi đang sử dụng khung Toolbarđược cung cấp (KHÔNG được bao gồm trong tệp XML).

Điều này đã làm việc cho tôi:
tệp 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>

Cập nhật: Trích dẫn từ blog của Gabriele Mariotti .

Với Thanh công cụ mới, bạn có thể áp dụng một kiểu và một chủ đề. Họ khác nhau! Kiểu là cục bộ cho dạng xem Thanh công cụ, ví dụ như màu nền. Thay vào đó, ứng dụng: chủ đề là toàn cầu cho tất cả các phần tử ui được thổi phồng trong Thanh công cụ, ví dụ như màu của tiêu đề và biểu tượng.

Được rồi, sau khi dành nhiều thời gian cho vấn đề này, đây là cách tôi xoay sở để có được vẻ ngoài như mong đợi. Tôi đang đặt nó thành một câu trả lời riêng để tôi có thể nhận mọi thứ ở một nơi.

Đó là sự kết hợp của nhiều yếu tố.

Thứ nhất, đừng cố gắng làm cho các thanh công cụ chơi tốt chỉ qua các chủ đề. Nó dường như là không thể.

Vì vậy, hãy áp dụng các chủ đề một cách rõ ràng cho Thanh công cụ của bạn như trong câu trả lời 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" />

Tuy nhiên đây là loại nước sốt thần kỳ. Để thực sự có được màu nền, tôi hy vọng bạn phải ghi đè backgroundthuộc tính này trong các chủ đề trên Thanh công cụ của mình

giá trị / 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>

sau đó chỉ cần đưa bố cục thanh công cụ của bạn vào các bố cục khác

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

và bạn tốt để đi.

Hy vọng điều này sẽ giúp người khác để bạn không phải mất nhiều thời gian cho việc này như tôi có.

(nếu ai đó có thể tìm ra cách làm cho tác phẩm này chỉ bằng cách sử dụng các chủ đề, tức là không phải áp dụng các chủ đề một cách rõ ràng trong các tệp bố cục, tôi sẽ sẵn lòng hỗ trợ câu trả lời của họ)

BIÊN TẬP:

Vì vậy, rõ ràng việc đăng một câu trả lời đầy đủ hơn là một nam châm hút người dùng, vì vậy tôi sẽ chỉ chấp nhận câu trả lời không đầy đủ ở trên nhưng để lại câu trả lời này ở đây trong trường hợp ai đó thực sự cần nó. Mặc dù vậy, hãy tiếp tục phản đối nếu điều đó khiến bạn hài lòng.

Cách tốt nhất tôi thấy để làm điều này là tạo một phần tử con của ' ThemeOverlay.AppCompat.Dark.ActionBar '. Trong ví dụ, tôi đặt màu nền của Thanh công cụ thành ĐỎ và màu văn bản thành XANH.

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

Sau đó, bạn có thể áp dụng chủ đề của mình vào thanh công cụ:

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

Để tùy chỉnh kiểu thanh công cụ, trước tiên hãy tạo kiểu tùy chỉnh thanh công cụ kế thừa Widget.AppCompat.Toolbar, ghi đè các thuộc tính và sau đó thêm nó vào chủ đề ứng dụng tùy chỉnh như được hiển thị bên dưới, xem http://www.zoftino.com/android-toolbar-tutorial for thêm thông tin thanh công cụ và kiểu.

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

Yout có thể thử điều này dưới đây.

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

Và các yếu tố chi tiết bạn có thể tìm thấy chúng trong https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Dưới đây là một số chi tiết: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Hy vọng điều này có thể giúp bạn.

Tương tự như Arnav Rao's, nhưng với cha mẹ khác:

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

Với cách tiếp cận này, giao diện của Thanh công cụ hoàn toàn được xác định theo kiểu ứng dụng, vì vậy bạn không cần đặt bất kỳ kiểu nào trên mỗi thanh công cụ.