web-dev-qa-db-ja.com

Theme.AppCompat.Light.DarkActionBarのようにappcompat-v7ツールバーのスタイルを変更する方法

新しいサポートライブラリToolbarを使って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（base）テーマとLightテーマのさまざまな組み合わせの組み合わせを試してみましたが、ツールバー以外のすべての背景に明るい背景が表示されるような組み合わせを見つけることができません。

AppCompat.Light.DarkActionBarをimport Android.support.v7.widget.Toolbarと同じように見せる方法はありますか？

androidandroid-appcompatandroid-themeandroid-toolbar
100
Liminal

ツールバーに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>

その後、ツールバーとして次のものを使用します。

<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が選択されるため、別の背景色が表示される可能性があります。

あなたはこれの良い例がAndroid Studio（1.4+）のEmpty Activityで現在のプロジェクトテンプレートにあるのを見つけるでしょう。

206
oRRs

編集：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：テーマは、代わりに、ツールバーで拡張されたすべてのUI要素、たとえばタイトルやアイコンの色に対してグローバルです。

70
LordRaydenMK

この問題に多くの時間を費やした後にこれで私は私が望んでいた外観を得ることができた方法です。私はそれを別の答えにしているので、すべてを一箇所に集めることができます。

それは要因の組み合わせです。

第一に、テーマだけでツールバーが素敵になるようにしないでください。それは不可能のようです。

そのため、 oRRs answer のように明示的にテーマをツールバーに適用してください。

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

しかしこれはマジックソースです。あなたが望んでいた背景色を実際に得るためには、あなたのツールバーテーマのbackground属性を上書きしなければなりません。

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

そして行ってもいいです。

あなたが私のようにこれに多くの時間を費やす必要がないようにこれが他の誰かに役立つことを願っています。

（テーマを使用してこの作品を制作する方法を誰かが理解できる場合、つまりレイアウトファイルにテーマを明示的に適用する必要がない場合は、代わりに回答を喜んでサポートします）

編集：

そのため、もっと完全な答えを投稿するのはお勧めできないので、上記の不完全な答えをそのまま受け入れますが、実際に必要な場合はこの回答をここに残しておきます。それがあなたを幸せにするのであれば、遠慮なく投票し続けてください。

31
Liminal

私がこれを行うために見つけた最もクリーンな方法は '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"/>
16
Don

ツールバースタイルをカスタマイズするには、最初に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>
9
Arnav Rao

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です。

これがお役に立てば幸いです。

6
Yong

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>

このアプローチでは、ツールバーの外観はアプリスタイルで完全に定義されるため、各ツールバーにスタイルを設定する必要はありません。

0
craigmj