android - scrollflags - CollapsingToolbarLayout: cambia el color del botón de inicio cuando se expande

expandable toolbar android

Question

He implementado el nuevo código de ejemplo CollapsingToolbarLayout partir de Chris Banes.

Sin embargo, las imágenes para la vista de imagen de fondo tienen un fondo blanco. El tema de la barra de herramientas es ThemeOverlay.AppCompat.Dark.ActionBar por lo que los iconos también son blancos, por lo que no puedo ver el botón de inicio cuando CollapsingToolbarLayout está completamente expandido.

Con la app:expandedTitleTextAppearance puedo establecer el color para el campo de título. ¿Existe también la posibilidad de establecer el color de los botones de inicio y los íconos del menú?

Answer 1

Aquí está el ejemplo de cómo cambio el color de los iconos de mi cajón y opciones cuando el diseño se expande y se contrae:

protected void onCreate(Bundle savedInstanceState) {
            AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
            appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
                {
                    Drawable upArrow = ResourcesCompat.getDrawable(getResources(), R.drawable.drawer_icon, null);
                    if (offset < -200)
                    {
                        upArrow.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
                        getSupportActionBar().setHomeAsUpIndicator(upArrow);

                        Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
                        drawable.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
                        toolbar.setOverflowIcon(drawable);
                    }
                    else
                    {

                        upArrow.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
                        getSupportActionBar().setHomeAsUpIndicator(upArrow);
                        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

                        Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
                        drawable.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
                        toolbar.setOverflowIcon(drawable);
                    }
        }
});

Answer 2

ColorControlNormal afecta el botón de inicio, el botón de desbordamiento y algunos iconos de valores seleccionados del sdk:

<style name="ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/accent</item>
</style>

Si tienes otros íconos, necesitarás recorrerlos y filtrarlos manualmente:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.sample_actions, menu);

    for(int i = 0; i < menu.size(); i++){
        Drawable drawable = menu.getItem(i).getIcon();
        if(drawable != null) {
            drawable.mutate();
            drawable.setColorFilter(getResources().getColor(R.color.accent), PorterDuff.Mode.SRC_ATOP);
        }
    }

    return true;
}

Answer 3

En mi opinión, esto solo es posible si cambia los elementos extraíbles del botón de inicio, los iconos de menú y el botón de desbordamiento. Afortunadamente, Google nos ha proporcionado una nueva API llamada Tinted Drawables, que nos permite establecer el color de una imagen dibujable o de nueve parches. Así es como funciona:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@android:drawable/ic_menu_camera"
    android:tint="@color/menu_icon_color"/>

Ahora puede utilizar este nuevo Drawable definido como cualquier otro en su diseño. Para el botón de inicio y el botón de desbordamiento, también tiene que anular las definiciones de estilo así:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:homeAsUpIndicator">@drawable/tinted_home_button</item>
    <item name="android:actionOverflowButtonStyle">@style/OverFlowButton</item>
</style>

<style name="OverFlowButton" parent="AppTheme">
    <item name="android:src">@drawable/tinted_overflow_button</item>
</style>

Todas estas cosas (excepto las definiciones de estilo) desafortunadamente solo están disponibles en el nivel de API 21+ y no están incluidas en la biblioteca de soporte. Si tiene que admitir dispositivos más bajos que Lollipop, creo que la mejor manera es usar Android Assets Studio, donde puede tintar los íconos y descargarlos como un archivo png.

Answer 4

Es mejor usar 2 imágenes diferentes en la barra de herramientas. Otros pueden causar algunos problemas no deseados:

1. Tratar de configurar 2 temas diferentes de la barra de herramientas nunca funcionará porque los temas solo se configuran en la creación de la actividad, la configuración de otro tema no tiene ningún efecto, debe volver a crear la actividad.
2. El uso de un filtro de color puede no resultar exactamente lo que quieres. Puede usar la flecha sombreada y el filtro de color también pintará esa sombra que se parece más al brillo exterior.

Entonces tu barra de herramientas se verá así:

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <ImageView
                android:id="@+id/imageViewBack"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="center"
                android:src="@drawable/button_back_white" />

</android.support.v7.widget.Toolbar>

Y establecerá la imageViewBack cuando la barra de herramientas se contraiga:

appBarLayout.addOnOffsetChangedListener((appBarLayout, offset) -> {
        final boolean isCollapsed = (offset == (-1 * appBarLayout.getTotalScrollRange()));

        imageViewBack.setImageDrawable(ContextCompat.getDrawable(context,
        isCollapsed ? 
        R.drawable.button_back_red : 
        R.drawable.button_back_white));
});