setsupportactionbar - toolbar android material design

Cambiar el color de la barra de herramientas en Appcompat 21

Question

Estoy probando las nuevas características de diseño de materiales de Appcompat 21. Por lo tanto, he creado una barra de herramientas como esta:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

y lo incluí en mi archivo de diseño principal.

Luego lo configuré como supportActionBar así:

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

Está funcionando, pero de alguna manera no puedo entender cómo personalizar la barra de herramientas. Es gris y el texto es negro. ¿Cómo debo cambiar el fondo y el color del texto?

He seguido estas instrucciones:

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

¿Qué he supervisado para cambiar los colores?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowActionBar" tools:ignore="NewApi">false</item>
<item name="windowActionBar">false</item>
</style>

EDITAR :

Pude cambiar el color de fondo agregando estas líneas de código al tema:

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

Pero no afectarán el color del texto. ¿Qué me estoy perdiendo? En lugar del texto negro y el botón de menú negro, prefiero un texto blanco y botones de menú blancos:

Answer 1

Esto es lo que se conoce como DarkActionBar, lo que significa que debe usar el siguiente tema para obtener el estilo deseado:

<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="@dimen/triple_height_toolbar"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Answer 2

Hola, si desea aplicar el tema Material solo para Android 5.0, puede agregar este tema en él

<style name="AppHomeTheme" parent="@android:style/Theme.Material.Light">
<!-- customize the color palette -->
<item name="android:colorPrimary">@color/blue_dark_bg</item>
<item name="android:colorPrimaryDark">@color/blue_status_bar</item>
<item name="android:colorAccent">@color/blue_color_accent</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:actionMenuTextColor">@android:color/black</item>
</style> 

La siguiente línea es responsable del color del texto de la barra de acción del diseño de material.

<item name="android:textColorPrimary">@android:color/white</item>

Answer 3

Logra esto usando la toolbar como esta:

<android.support.v7.widget.Toolbar
android:id="@+id/base_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Answer 4

Para las personas que usan AppCompatActivity con Toolbar como fondo blanco. Usa este código.

Actualizado: diciembre de 2017

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/ThemeOverlay.AppCompat.Light">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_edit"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.AppBarOverlay"
app:title="Edit Your Profile"/>
</android.support.design.widget.AppBarLayout>

Answer 5

Pruebe esto en su styles.xml:

colorPrimary será el color de la barra de herramientas.

<resources>
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_pressed</item>
<item name="colorAccent">@color/accent</item>
</style>

¿Construiste esto en Eclipse por cierto?

Answer 6

Puede cambiar el color del texto en la barra de herramientas con estos:

<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>

Answer 7

Puede establecer un color de elemento de barra de herramientas personalizado dinámicamente creando una clase de barra de herramientas personalizada:

package view;
import android.app.Activity;
import android.content.Context;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.internal.view.menu.ActionMenuItemView;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
public class CustomToolbar extends Toolbar{
public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
}
public CustomToolbar(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public CustomToolbar(Context context) {
super(context);
// TODO Auto-generated constructor stub
ctxt = context;
}
int itemColor;
Context ctxt;
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
Log.d("LL", "onLayout");
super.onLayout(changed, l, t, r, b);
colorizeToolbar(this, itemColor, (Activity) ctxt);
}
public void setItemColor(int color){
itemColor = color;
colorizeToolbar(this, itemColor, (Activity) ctxt);
}
/**
* Use this method to colorize toolbar icons to the desired target color
* @param toolbarView toolbar view being colored
* @param toolbarIconsColor the target color of toolbar icons
* @param activity reference to activity needed to register observers
*/
public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
final PorterDuffColorFilter colorFilter
= new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);
for(int i = 0; i < toolbarView.getChildCount(); i++) {
final View v = toolbarView.getChildAt(i);
doColorizing(v, colorFilter, toolbarIconsColor);
}
//Step 3: Changing the color of title and subtitle.
toolbarView.setTitleTextColor(toolbarIconsColor);
toolbarView.setSubtitleTextColor(toolbarIconsColor);
}
public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
if(v instanceof ImageButton) {
((ImageButton)v).getDrawable().setAlpha(255);
((ImageButton)v).getDrawable().setColorFilter(colorFilter);
}
if(v instanceof ImageView) {
((ImageView)v).getDrawable().setAlpha(255);
((ImageView)v).getDrawable().setColorFilter(colorFilter);
}
if(v instanceof AutoCompleteTextView) {
((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
}
if(v instanceof TextView) {
((TextView)v).setTextColor(toolbarIconsColor);
}
if(v instanceof EditText) {
((EditText)v).setTextColor(toolbarIconsColor);
}
if (v instanceof ViewGroup){
for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
}
}
if(v instanceof ActionMenuView) {
for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {
//Step 2: Changing the color of any ActionMenuViews - icons that
//are not back button, nor text, nor overflow menu icon.
final View innerView = ((ActionMenuView)v).getChildAt(j);
if(innerView instanceof ActionMenuItemView) {
int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
for(int k = 0; k < drawablesCount; k++) {
if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
final int finalK = k;
//Important to set the color filter in seperate thread,
//by adding it to the message queue
//Won''t work otherwise.
//Works fine for my case but needs more testing
((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
// innerView.post(new Runnable() {
// @Override
// public void run() {
// ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
// }
// });
}
}
}
}
}
}
}

luego consúltelo en su archivo de diseño. Ahora puede establecer un color personalizado usando

toolbar.setItemColor(Color.Red);

Fuentes:

Encontré la información para hacer esto aquí: Cómo cambiar dinámicamente el color de los iconos de la barra de herramientas de Android

y luego lo GitHub:AndroidDynamicToolbarItemColor , lo mejoré y lo GitHub:AndroidDynamicToolbarItemColor aquí: GitHub:AndroidDynamicToolbarItemColor

Answer 8

Si desea cambiar el color de su barra de herramientas en toda su aplicación, aproveche styles.xml. En general, evito alterar los componentes de la interfaz de usuario en mi código Java a menos que esté tratando de hacer algo programáticamente. Si este es un conjunto único, entonces debería hacerlo en xml para que su código sea más limpio. Así se verá su styles.xml:

 <!-- Base application theme. -->
<style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Color Primary will be your toolbar color -->
<item name="colorPrimary">@color/colorPrimary</item>
<!-- Color Primary Dark will be your default status bar color -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Asegúrese de usar el estilo anterior en su AndroidManifext.xml como tal:

 <application
android:theme="@style/YourAppName.AppTheme">
</application>

Quería diferentes colores de barra de herramientas para diferentes actividades. Así que aproveché los estilos nuevamente así:

 <style name="YourAppName.AppTheme.Activity1">
<item name="colorPrimary">@color/activity1_primary</item>
<item name="colorPrimaryDark">@color/activity1_primaryDark</item>
</style>
<style name="YourAppName.AppTheme.Activity2">
<item name="colorPrimary">@color/activity2_primary</item>
<item name="colorPrimaryDark">@color/activity2_primaryDark</item>
</style>

nuevamente, aplique los estilos a cada actividad en su AndroidManifest.xml como tal:

<activity
android:name=".Activity2"
android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>
<activity
android:name=".Activity1"
android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>

Answer 9

de nuevo, todo esto está en el enlace que proporcionó

para cambiar el texto a blanco todo lo que tienes que hacer es cambiar el tema.

usa este tema

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Answer 10

resolví este problema después de más estudios ...

para Api21 y más uso

 <item name="android:textColorPrimary">@color/white</item>

para versiones inferiores use

 <item name="actionMenuTextColor">@color/white</item>

Answer 11

ACTUALIZACIÓN 12/11/2019: Biblioteca de componentes de material

Con las bibliotecas de componentes materiales y Androidx puede usar:

• el atributo android:background en el diseño:

  <com.google.android.material.appbar.MaterialToolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"

• aplique el estilo predeterminado: style="@style/Widget.MaterialComponents.Toolbar.Primary" o personalice el estilo heredado de él:

  <com.google.android.material.appbar.MaterialToolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  style="@style/Widget.MaterialComponents.Toolbar.Primary"

• anular el color predeterminado usando el atributo android:theme :

  <com.google.android.material.appbar.MaterialToolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:theme="@style/MyThemeOverlay_Toolbar"

con:

 <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textColorPrimary">....</item>
<item name="colorPrimary">@color/.....
<item name="colorOnPrimary">@color/....</item>
</style>

ANTIGUO: Bibliotecas de soporte:
Puede usar una app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" como se sugiere en otras respuestas, pero también puede usar una solución como esta:

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="@style/HeaderBar"
app:theme="@style/ActionBarThemeOverlay"
app:popupTheme="@style/ActionBarPopupThemeOverlay"/>

Y puede tener el control total de sus elementos de interfaz de usuario con estos estilos:

<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
<style name="HeaderBar">
<item name="android:background">?colorPrimary</item>
</style>
<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
<item name="android:background">@android:color/white</item>
<item name="android:textColor">#000</item>
</style>