105

我正在尝试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通过 import 获得外观android.support.v7.widget.Toolbar？

4

7 回答 7

218

Light.DarkActionBar为克隆设置工具栏样式的推荐方法是Theme.AppCompat.Light.DarkActionbar用作父/应用程序主题并将以下属性添加到样式以隐藏默认操作栏：

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

然后使用以下作为您的工具栏：

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

于 2014-10-22T09:15:42.867 回答
71

编辑：更新到 appcompat-v7:22.1.1 并使用AppCompatActivity而不是ActionBarActivity我的 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="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 博客的引述。

使用新的工具栏，您可以应用样式和主题。它们不一样！样式是工具栏视图的本地样式，例如背景颜色。app:theme 对工具栏中的所有 ui 元素都是全局的，例如标题和图标的颜色。

于 2014-10-28T19:04:56.783 回答
31

好吧，在这个问题上花费了很多时间之后，这就是我设法获得我希望的外观的方式。我将其作为单独的答案，以便我可以将所有内容放在一个地方。

这是多种因素的组合。

首先，不要试图让工具栏仅仅通过主题来玩得很好。这似乎是不可能的。

因此，将主题明确应用于您的工具栏，如oRRs 答案

布局/工具栏.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工具栏主题中的属性

值/样式.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" />

你可以走了。

希望这对其他人有所帮助，这样您就不必像我一样花太多时间在这上面。

（如果有人能弄清楚如何只使用主题来完成这项工作，即不必在布局文件中明确应用主题，我会很乐意支持他们的回答）

编辑：

所以显然发布一个更完整的答案是一个不受欢迎的磁铁，所以我只会接受上面不完整的答案，但把这个答案留在这里，以防有人真的需要它。如果它让你开心，请随意继续投票。

于 2014-10-22T11:01:45.653 回答
17

我发现最干净的方法是创建一个' ThemeOverlay.AppCompat.Dark.ActionBar '的孩子。在示例中，我将工具栏的背景颜色设置为红色，将文本颜色设置为蓝色。

<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"/>
于 2014-11-13T18:42:15.447 回答
13

要自定义工具栏样式，首先创建工具栏自定义样式继承 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>
于 2017-10-19T04:17:40.567 回答
7

你可以在下面试试这个。

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

希望这可以帮到你。

于 2014-10-22T08:35:57.367 回答
0

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

使用这种方法，工具栏的外观完全由应用程序样式定义，因此您无需在每个工具栏上放置任何样式。

于 2017-10-15T19:07:38.533 回答