如何设置appcompat-v7工具栏的样式,如Theme.AppCompat.Light.DarkActionBar？

Question

我正在尝试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主题.我花了几个小时现在尝试混合Dark(基础)主题和Light主题的不同组合,但我找不到一个组合,让我在除工具栏之外的所有东西上都有浅色背景.

有没有办法让AppCompat.Light.DarkActionBar导入的外观android.support.v7.widget.Toolbar？

Answer 1

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

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

Answer 2

编辑:更新到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元素都是全局的,例如标题和图标的颜色.

Answer 3

在经历了很长时间陷入这个问题之后,这是我设法获得我希望的外观的方式.我把它作为一个单独的答案,所以我可以把所有东西放在一个地方.

这是一系列因素.

首先,不要试图通过主题让工具栏发挥出色.这似乎是不可能的.

因此,明确将主题应用于您的工具栏,如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工具栏主题中的属性

价值观/ 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" />

而你很高兴.

希望这有助于其他人,所以你不必像我一样花费这么多时间.

(如果任何人都可以弄清楚如何使用主题来完成这项工作,即不必在布局文件中明确应用主题,我很乐意支持他们的答案)

编辑:

所以显然发布一个更完整的答案是一个downvote磁铁所以我只是接受上面的不完整的答案,但留下这个答案,以防有人真正需要它.如果它让你开心,请随意保持低调.

Answer 4

我发现这样做最干净的方法是创建一个' ThemeOverlay.AppCompat.Dark.ActionBar ' 的子项.在示例中,我将工具栏的背景颜色设置为RED,将文本的颜色设置为BLUE.

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

Answer 5

要自定义工具栏样式,首先创建继承Widget.AppCompat.Toolbar的工具栏自定义样式,覆盖属性,然后将其添加到自定义应用主题,如下所示,请参阅http://www.zoftino.com/android-toolbar-tutorial for更多信息工具栏和样式.

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

Answer 6

Yout可以尝试下面这个.

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

希望这可以帮到你.