Saltar al contenido

¿Cómo puedo diseñar la barra de herramientas de appcompat-v7 como Theme.AppCompat.Light.DarkActionBar?

Solución:

La forma recomendada de aplicar estilo a la barra de herramientas para Light.DarkActionBar clonar sería usar Theme.AppCompat.Light.DarkActionbar como tema principal / de la aplicación y agregue los siguientes atributos al estilo para ocultar la barra de acciones predeterminada:

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

Luego use lo siguiente como su barra de herramientas:

<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 modificaciones adicionales, crearía estilos que se extienden ThemeOverlay.AppCompat.Dark.ActionBar y ThemeOverlay.AppCompat.Light reemplazando los que están dentro AppBarLayout->android:theme y Toolbar->app:popupTheme. También tenga en cuenta que esto recogerá su ?attr/colorPrimary si lo ha configurado en su estilo principal, es posible que obtenga un color de fondo diferente.

Encontrará un buen ejemplo de esto en la plantilla de proyecto actual con un Empty Activity de Android Studio (1.4+).

Editar: después de actualizar a appcompat-v7: 22.1.1 y usar AppCompatActivity en lugar de ActionBarActivity mi styles.xml se ve así:

<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: Esto significa que estoy usando un Toolbar proporcionado por el marco (NO incluido en un archivo XML).

Esto funcionó para mí:
archivo 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>

Actualización: una cita del blog de Gabriele Mariotti.

Con la nueva barra de herramientas puede aplicar un estilo y un tema. ¡Ellos son diferentes! El estilo es local para la vista de la barra de herramientas, por ejemplo, el color de fondo. La aplicación: tema es global para todos los elementos de la interfaz de usuario inflados en la barra de herramientas, por ejemplo, el color del título y los iconos.

De acuerdo, después de haberme sumergido mucho tiempo en este problema, esta es la forma en que logré obtener la apariencia que esperaba. Lo estoy convirtiendo en una respuesta separada para poder tener todo en un solo lugar.

Es una combinación de factores.

En primer lugar, no intente que las barras de herramientas funcionen bien solo con temas. Parece imposible.

Así que aplique temas explícitamente a sus barras de herramientas como en la respuesta de oRR

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

Sin embargo, esta es la salsa mágica. Para obtener los colores de fondo que esperaba, debes anular la background atributo en los temas de la barra Google

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>

luego solo incluye el diseño de tu barra de herramientas en tus otros diseños

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

y listo.

Espero que esto ayude a alguien más para que no tengas que dedicar tanto tiempo a esto como yo.

(si alguien puede descubrir cómo hacer que esto funcione usando solo temas, es decir, sin tener que aplicar los temas explícitamente en los archivos de diseño, con gusto apoyaré su respuesta)

EDITAR:

Entonces, aparentemente, publicar una respuesta más completa fue un imán de votos negativos, así que aceptaré la respuesta incompleta anterior, pero dejaré esta respuesta aquí en caso de que alguien realmente la necesite. Sin embargo, no dudes en seguir votando negativamente si eso te hace feliz.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *