我如何设计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的主题。我花了几个小时尝试混合黑暗（基本）主题和灯光主题的不同组合，但我无法找到能够让我拥有浅色背景的组合除了工具栏之外的所有内容。

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

Answer 1

的推荐方式样式工具栏的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和替代者。另外请注意，如果您已将其设置为主要样式，则这会拾取您的?attr/colorPrimary，因此您可能会获得不同的背景色。

您会发现一个很好的例子就是当前的项目模板，其中包含Android Studio（1.4+）的Empty Activity。

Answer 2

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。

希望这可以帮助你。

Answer 3

好吧，沉迷于这个问题的时间已经很长时间了，这是我设法得到我期待的外观的方式。我将它作为一个单独的答案，这样我就可以将所有东西都放在一个地方。

这是一个综合因素。

首先，不要试图让工具栏在主题中表现出色。这似乎是不可能的。

所以明确应用的主题，你的工具栏就像oRRs answer

布局/ 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磁铁，所以我只接受上述不完整的答案，但在这里留下这个答案，以防有人真正需要它。 如果它让你快乐，随时保持downvoting。

Answer 4

编辑：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> 

注：更新到程序兼容性-V7后，这意味着我使用该框架提供一个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's blog的报价。

With the new Toolbar you can apply a style and a theme. They are different! The style is local to the Toolbar view, for example the background color. The app:theme is instead global to all ui elements inflated in the Toolbar, for example the color of the title and icons.

Answer 5

我发现这样做的最彻底的方法是创建“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"/> 

Answer 6

类似Arnav饶的，但有一个不同的父：

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

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

Answer 7

要自定义工具栏样式，首先创建继承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>