Como faço para estilizar a barra de ferramentas appcompat-v7 como Theme.AppCompat.Light.DarkActionBar?


105

Estou tentando recriar a aparência Theme.AppCompat.Light.DarkActionBarcom a nova barra de ferramentas da biblioteca de suporte.

Se eu escolher Theme.AppCompat.Lightminha barra de ferramentas ficará clara e se eu escolher, Theme.AppCompatela ficará escura. (Tecnicamente, você tem que usar a .NoActionBarversão, mas tanto quanto posso dizer a única diferença é

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

Agora não há, Theme.AppCompat.Light.DarkActionBarmas ingenuamente pensei que seria bom o suficiente apenas para fazer o meu

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

No entanto, com isso, minhas barras de ferramentas ainda são Lighttemáticas. Passei horas tentando diferentes combinações de mixagem do tema Escuro (base) e do tema Claro, mas simplesmente não consigo encontrar uma combinação que me permita ter fundos claros em tudo, exceto nas barras de ferramentas.

Existe uma maneira de obter a AppCompat.Light.DarkActionBaraparência com importação android.support.v7.widget.Toolbar?

Respostas:


216

A maneira recomendada de estilizar a Barra de Ferramentas para um Light.DarkActionBarclone seria usar Theme.AppCompat.Light.DarkActionbarcomo tema pai / aplicativo e adicionar os seguintes atributos ao estilo para ocultar a ActionBar padrão:

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

Em seguida, use o seguinte como sua barra de ferramentas:

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

Para modificações posteriores, você criaria estilos estendendo ThemeOverlay.AppCompat.Dark.ActionBare ThemeOverlay.AppCompat.Lightsubstituindo os de AppBarLayout->android:themee Toolbar->app:popupTheme. Observe também que isso irá pegar seu ?attr/colorPrimaryse você o tiver definido em seu estilo principal, de forma que você possa obter uma cor de fundo diferente.

Você encontrará um bom exemplo disso no modelo de projeto atual com um Empty Activitydo Android Studio (1.4+).


1
Bem, sim você pode. "Se você deseja herdar de estilos que você mesmo definiu, não precisa usar o atributo pai. Em vez disso, basta prefixar o nome do estilo que deseja herdar ao nome do seu novo estilo, separado por um ponto . " developer.android.com/guide/topics/ui/themes.html#Inheritance
Liminal,

1
Também usando o xml que você postou, obtenho uma barra de ferramentas branca com texto branco ou se eu mudar o tema para ThemeOverlay.AppCompat.ActionBarobtenho uma barra de ferramentas branca com texto preto, então não parece funcionar muito bem. Não parece que os cuidados do sistema sobre o <item name="android:colorBackground">@color/background_material_dark</item>no Base.ThemeOverlay.AppCompat.Dark. Mas vou continuar cavando. (E eu li essa página. Esse foi um dos meus pontos de partida. Ainda não parece funcionar.)
Liminal,

1
Me desculpe por isso. Deixou de fora a cor de fundo da barra de ferramentas para simplificar e não testei os resultados. Eu revisei a resposta de acordo. Eu não encontrei uma maneira de fazer isso usando apenas estilos. Como meu aplicativo tem esquemas de cores diferentes, eu uso android:background="?attr/colorPrimary"na barra de ferramentas e <item name="colorPrimary">@color/background_material_dark</item>no meu estilo para que ele se adapte automaticamente à cor principal do aplicativo.
oRRs de

1
isso não está mais funcionando no aplicativo compat 23 e o título é preto e não branco: /
Rashad.Z

21
existe alguma maneira de controlar essa selva de temas e estilos?
axd

72

Editar: depois de atualizar para appcompat-v7: 22.1.1 e usar em AppCompatActivityvez de ActionBarActivitymy styles.xml fica assim:

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

Nota: Isso significa que estou usando um Toolbarfornecido pela estrutura (NÃO incluído em um arquivo XML).

Isso funcionou para mim:
arquivo 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>

Atualização: Citação do blog de Gabriele Mariotti .

Com a nova barra de ferramentas, você pode aplicar um estilo e um tema. Eles são diferentes! O estilo é local para a visualização da Barra de Ferramentas, por exemplo, a cor de fundo. Em vez disso, o app: theme é global para todos os elementos de interface do usuário aumentados na barra de ferramentas, por exemplo, a cor do título e dos ícones.


"Erro: nenhum recurso encontrado que corresponda ao nome fornecido: attr 'colorPrimary'." Estamos falando sobre o uso de appcompat_v7 aqui.
Yar

Para mim, isso funciona apenas em dispositivos Lollipop. No pré-pirulito não só a barra de ação, mas toda a atividade usa o tema escuro, que não é o que eu queria. Eu votei a favor, mas no final usei a resposta oRRs, estilizando a visualização da barra de ferramentas única.
Lorenzo-s

@ lorenzo-s Atualizei minha resposta para a versão mais recente do appcompat. Eu também testei no Galaxy Nexus com android 4.3 e está funcionando
LordRaydenMK

31

Ok, depois de ter mergulhado muito tempo nesse problema, esta é a maneira que consegui obter a aparência que estava esperando. Estou criando uma resposta separada para que possa colocar tudo em um só lugar.

É uma combinação de fatores.

Em primeiro lugar, não tente fazer com que as barras de ferramentas funcionem bem apenas por meio de temas. Parece impossível.

Portanto, aplique os temas explicitamente às suas barras de ferramentas, como na resposta 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" />

No entanto, este é o molho mágico. Para realmente obter as cores de fundo que esperava, você deve substituir o backgroundatributo nos temas da barra de ferramentas

valores / estilos.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>

em seguida, basta incluir o layout da barra de ferramentas em seus outros layouts

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

e você está pronto para ir.

Espero que isso ajude alguém, para que você não tenha que gastar tanto tempo com isso quanto eu.

(se alguém puder descobrir como fazer isso funcionar usando apenas temas, ou seja, não ter que aplicar os temas explicitamente nos arquivos de layout, ficarei feliz em apoiar sua resposta)

EDITAR:

Então, aparentemente, postar uma resposta mais completa foi um ímã de votos negativos, então aceitarei a resposta incompleta acima, mas deixarei esta resposta aqui, caso alguém realmente precise. Sinta-se à vontade para continuar votando negativamente se isso te deixar feliz.


2
No meu AppTheme, acabei de colocar <item name="colorPrimary">@color/colorPrimary</item> Then I'm free to use android:background="?attr/colorPrimary"attribute no widget da barra de ferramentas.
Lemuel

Posso saber como você obteve a definição de "@ color / material_grey_200"?
Cheok Yan Cheng

Não me lembro exatamente onde, mas alguém fez um arquivo colors.xml com base em google.com/design/spec/style/color.html#color-color-palette mas não consegue encontrá-lo agora
Liminal

1
@Liminal Se você usar @android:color/transparento, evita o problema ao pressionar / clicar longamente em um item de menu, há uma caixa ao redor do texto. Isso também faz uma prova futura se a cor de fundo clara mudar no futuro.
Ryan R

Não funciona quando você usa CollapsingToolbarLayout.
arekolek

17

A maneira mais limpa que descobri de fazer isso é criar um filho de ' ThemeOverlay.AppCompat.Dark.ActionBar '. No exemplo, eu defini a cor de fundo da barra de ferramentas como VERMELHO e a cor do texto como AZUL.

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

Você pode então aplicar seu tema à barra de ferramentas:

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

6
meu deus era isso! textColorPrimary! Por que isso foi tão difícil de encontrar em qualquer lugar
Muppet

12

Para personalizar o estilo da barra de ferramentas, primeiro crie o estilo personalizado da barra de ferramentas herdando Widget.AppCompat.Toolbar, substitua as propriedades e, em seguida, adicione-o ao tema do aplicativo personalizado conforme mostrado abaixo, consulte http://www.zoftino.com/android-toolbar-tutorial para mais informações sobre a barra de ferramentas e estilos.

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

7

Você pode tentar isso abaixo.

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

E os elementos de detalhe você pode encontrá-los em https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Aqui estão mais algumas: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Espero que isso possa ajudá-lo.


1
Sim. Com eles, posso chegar ao ponto de acertar a cor de fundo e finalmente descobri como acertar as cores do título. No entanto, o matador agora é que não consigo descobrir de onde o botão de estouro tirou sua cor. Não importa o que eu mude, ele permanece tão escuro que não aparece na minha barra de ação escura. Se eu mudar o tema para escuro, então é claro e aparece bem. No entanto, não importa o quanto eu fuja, não consigo descobrir como fazer o ícone de estouro aparecer claro quando comecei com um tema claro
Liminal

0

Semelhante ao de Arnav Rao, mas com um pai diferente:

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

Com essa abordagem, a aparência da barra de ferramentas é totalmente definida nos estilos do aplicativo, portanto, você não precisa colocar nenhum estilo em cada barra de ferramentas.


2
Na verdade, android:toolbarStyleé API 21+ para android.widget.Toolbar. toolbarStyleé para AppCompat android.support.v7.widget.Toolbar.
Eugen Pechanec,

Achei que o Android Studio estava causando um problema, mas, em um segundo teste, você está certo! Ótima notícia - consegui reduzir meu minSDK para 19 novamente e parece que meu toolbarStyle ainda está funcionando bem! Obrigado!
craigmj de

Acabei de notar! Ainda existe um mal-entendido de estilos versus temas . MyToolbaro estilo Widget.AppCompat.Toolbarnão deve estender um tema.
Eugen Pechanec,
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.