studio programacion para móviles libro edición desarrollo desarrollar curso aprende aplicaciones android themes toolbar

para - manual de programacion android pdf



¿Cómo se configura el color del título para la nueva barra de herramientas? (14)

Estoy usando la nueva barra de herramientas v7 y por mi vida no puedo entender cómo cambiar el color del título. Establecí el @style de la barra de herramientas en un estilo declarado en styles.xml y apliqué un titleTextStyle con textColor. ¿Me estoy perdiendo de algo? Estoy codificando Lollipop pero actualmente estoy probando en un dispositivo Kitkat.

styles.xml

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="@style/Theme.AppCompat.Light"> <item name="android:windowNoTitle">true</item> <item name="windowActionBar">false</item> </style> <style name="ActionBar" parent="Theme.AppCompat"> <item name="android:background">@color/actionbar_background</item> <item name="android:titleTextStyle">@style/ActionBar.TitleTextStyle</item> </style> <style name="ActionBar.TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textColor">@color/actionbar_title_text</item> </style> </resources>

actionbar.xml:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar_actionbar" android:layout_width="match_parent" android:layout_height="?actionBarSize" style="@style/ActionBar"/>


Opción 1) La forma rápida y fácil (solo barra de herramientas)

Desde appcompat-v7-r23 puede usar los siguientes atributos directamente en su Toolbar o su estilo:

app:titleTextColor="@color/primary_text" app:subtitleTextColor="@color/secondary_text"

Si su SDK mínimo es 23 y usa la Toolbar nativa, simplemente cambie el prefijo del espacio de nombres a android .

En Java puedes usar los siguientes métodos:

toolbar.setTitleTextColor(Color.WHITE); toolbar.setSubtitleTextColor(Color.WHITE);

¡Estos métodos toman un color int, no un ID de recurso de color!

Opción 2) Anular atributos de estilo y tema de la barra de herramientas

layout / xxx.xml

<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/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.MyApp.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" style="@style/Widget.MyApp.Toolbar.Solid"/>

valores / styles.xml

<style name="Widget.MyApp.Toolbar.Solid" parent="Widget.AppCompat.ActionBar"> <item name="android:background">@color/actionbar_color</item> <item name="android:elevation" tools:ignore="NewApi">4dp</item> <item name="titleTextAppearance">...</item> </style> <style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar"> <!-- Parent theme sets colorControlNormal to textColorPrimary. --> <item name="android:textColorPrimary">@color/actionbar_title_text</item> </style>

¡Ayuda! ¡Mis iconos también cambiaron de color!

@PeterKnut informó que esto afecta el color del botón de desbordamiento, el botón del cajón de navegación y el botón de retroceso. También cambia el color del texto de SearchView .

En cuanto a los colores del icono: el colorControlNormal hereda de

  • android:textColorPrimary para temas oscuros (blanco sobre negro)
  • android:textColorSecondary para temas claros (negro sobre blanco)

Si aplica esto al tema de la barra de acción , puede personalizar el color del icono.

<item name="colorControlNormal">#de000000</item>

Hubo un error en appcompat-v7 hasta r23 que requería que también anulara la contraparte nativa de esta manera:

<item name="android:colorControlNormal" tools:ignore="NewApi">?colorControlNormal</item>

¡Ayuda! ¡Mi SearchView es un desastre!

Nota: esta sección es posiblemente obsoleta.

Dado que utiliza el widget de búsqueda que, por alguna razón, utiliza una flecha hacia atrás (no visualmente, técnicamente) diferente a la incluida con appcompat-v7, debe configurarlo manualmente en el tema de la aplicación . Los dibujables de la biblioteca de soporte se tiñen correctamente. De lo contrario, siempre sería blanco.

<item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>

En cuanto al texto de la vista de búsqueda ... no hay una manera fácil. Después de buscar en su fuente, encontré una manera de llegar a la vista de texto. No he probado esto, así que avíseme en los comentarios si esto no funcionó.

SearchView sv = ...; // get your search view instance in onCreateOptionsMenu // prefix identifier with "android:" if you''re using native SearchView TextView tv = sv.findViewById(getResources().getIdentifier("id/search_src_text", null, null)); tv.setTextColor(Color.GREEN); // and of course specify your own color

Bonificación: anular los atributos de estilo y tema de ActionBar

El estilo apropiado para una barra de acción de acción predeterminada appcompat-v7 se vería así:

<!-- ActionBar vs Toolbar. --> <style name="Widget.MyApp.ActionBar.Solid" parent="Widget.AppCompat.ActionBar.Solid"> <item name="background">@color/actionbar_color</item> <!-- No prefix. --> <item name="elevation">4dp</item> <!-- No prefix. --> <item name="titleTextStyle">...</item> <!-- Style vs appearance. --> </style> <style name="Theme.MyApp" parent="Theme.AppCompat"> <item name="actionBarStyle">@style/Widget.MyApp.ActionBar.Solid</item> <item name="actionBarTheme">@style/ThemeOverlay.MyApp.ActionBar</item> <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item> </style>


Aquí está mi solución si necesita cambiar solo el color del título y no el color del texto en el widget de búsqueda.

layout / toolbar.xml

<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/toolbar" android:background="@color/toolbar_bg" app:theme="@style/AppTheme.Toolbar" app:titleTextAppearance="@style/AppTheme.Toolbar.Title" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize"/>

valores / themes.xml

<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="windowActionBar">false</item> </style> <style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar"> <!-- Customize color of navigation drawer icon and back arrow --> <item name="colorControlNormal">@color/toolbar_icon</item> </style> <style name="AppTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"> <!-- Set proper title size --> <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item> <!-- Set title color --> <item name="android:textColor">@color/toolbar_title</item> </style> </resources>

De manera similar, puede establecer también subtitleTextAppearance.


Configuración de la app:titleTextColor en mi android.support.v7.widget.Toolbar funciona para mí en Android 4.4 y en 6.0 también con com.android.support:appcompat-v7:23.1.0 :

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" app:titleTextColor="@android:color/white" />


Cree una barra de herramientas en su xml ... toolbar.xml:

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" </android.support.v7.widget.Toolbar>

Luego agregue lo siguiente en su toolbar.xml:

app:titleTextColor="@color/colorText" app:title="@string/app_name">

Recuerde @ color / colorText es simplemente su archivo color.xml con el atributo de color llamado colorText y su color. Esta es la mejor manera de llamar sus cadenas en lugar de codificar su color dentro de su toolbar.xml. También tiene otras opciones para modificar su texto, como: textAppearance ... etc ... simplemente escriba app: text ... e intelisense le dará opciones en Android Studio.

su barra de herramientas final debería verse así:

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/Theme.AppCompat" app:subtitleTextAppearance="@drawable/icon" app:title="@string/app_name"> </android.support.v7.widget.Toolbar>

NB: esta barra de herramientas debe estar dentro de tu activity_main.xml.Easy Peasie

Otra opción es hacerlo todo en tu clase:

Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); toolbar.setTitleTextColor(Color.WHITE);

Buena suerte


Esto funciono para mi

<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/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:fitsSystemWindows="true" android:minHeight="?attr/actionBarSize" app:navigationIcon="@drawable/ic_back" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:subtitleTextColor="@color/white" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:title="This week stats" app:titleTextColor="@color/white"> <ImageView android:id="@+id/submitEditNote" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_gravity="right" android:layout_marginRight="10dp" android:src="@android:drawable/ic_menu_manage" /> </android.support.v7.widget.Toolbar>


Esto me molestó un tiempo y no me gustaron las respuestas, así que eché un vistazo a la fuente para ver cómo funciona.

FractalWrench está en el camino correcto, pero se puede usar debajo de API 23 y no tiene que establecerse en la barra de herramientas.

Como otros han dicho, puede establecer un estilo en la barra de herramientas con

app:theme="@style/ActionBar"

y en ese estilo puedes establecer el color del texto del título con

<item name="titleTextColor">#00f</item>

para pre API 23 o para 23+

<item name="android:titleTextColor">your colour</item>

Xml completo

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:theme="@style/ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> <style name="ActionBar" parent="@style/ThemeOverlay.AppCompat.ActionBar"> <item name="android:titleTextStyle">@style/ActionBarTextStyle</item> <item name="titleTextColor">your colour</item> <item name="android:background">#ff9900</item> </style>

Aquí están todos los atributos que se pueden establecer para una barra de herramientas

<declare-styleable name="Toolbar"> <attr name="titleTextAppearance" format="reference" /> <attr name="subtitleTextAppearance" format="reference" /> <attr name="title" /> <attr name="subtitle" /> <attr name="gravity" /> <attr name="titleMargins" format="dimension" /> <attr name="titleMarginStart" format="dimension" /> <attr name="titleMarginEnd" format="dimension" /> <attr name="titleMarginTop" format="dimension" /> <attr name="titleMarginBottom" format="dimension" /> <attr name="contentInsetStart" /> <attr name="contentInsetEnd" /> <attr name="contentInsetLeft" /> <attr name="contentInsetRight" /> <attr name="maxButtonHeight" format="dimension" /> <attr name="navigationButtonStyle" format="reference" /> <attr name="buttonGravity"> <!-- Push object to the top of its container, not changing its size. --> <flag name="top" value="0x30" /> <!-- Push object to the bottom of its container, not changing its size. --> <flag name="bottom" value="0x50" /> </attr> <!-- Icon drawable to use for the collapse button. --> <attr name="collapseIcon" format="reference" /> <!-- Text to set as the content description for the collapse button. --> <attr name="collapseContentDescription" format="string" /> <!-- Reference to a theme that should be used to inflate popups shown by widgets in the toolbar. --> <attr name="popupTheme" format="reference" /> <!-- Icon drawable to use for the navigation button located at the start of the toolbar. --> <attr name="navigationIcon" format="reference" /> <!-- Text to set as the content description for the navigation button located at the start of the toolbar. --> <attr name="navigationContentDescription" format="string" /> <!-- Drawable to set as the logo that appears at the starting side of the Toolbar, just after the navigation button. --> <attr name="logo" /> <!-- A content description string to describe the appearance of the associated logo image. --> <attr name="logoDescription" format="string" /> <!-- A color to apply to the title string. --> <attr name="titleTextColor" format="color" /> <!-- A color to apply to the subtitle string. --> <attr name="subtitleTextColor" format="color" /> </declare-styleable>


Hágalo con toolbar.setTitleTextAppearance(context, R.style.TitleTextStyle);

// este es el estilo en el que puedes personalizar tu combinación de colores

<style name="TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title"> <item name="android:fontFamily">@string/you_font_family</item> <item name="android:textStyle">normal</item> <item name="android:textAppearance">@style/you_text_style</item> <item name="android:textColor">#000000</item> <item name="android:textSize">20sp</item> </style>


La forma más sencilla de cambiar el color del título de la Toolbar CollapsingToolbarLayout en CollapsingToolbarLayout .

Agregue los siguientes estilos a CollapsingToolbarLayout

<android.support.design.widget.CollapsingToolbarLayout app:collapsedTitleTextAppearance="@style/CollapsedAppBar" app:expandedTitleTextAppearance="@style/ExpandedAppBar">

styles.xml

<style name="ExpandedAppBar" parent="@android:style/TextAppearance"> <item name="android:textSize">24sp</item> <item name="android:textColor">@android:color/black</item> <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item> </style> <style name="CollapsedAppBar" parent="@android:style/TextAppearance"> <item name="android:textColor">@android:color/black</item> <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item> </style>


Muy simple, esto funcionó para mí (título e icono en blanco):

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="56dp" android:background="@color/PrimaryColor" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" android:elevation="4dp" />


Para cambiar el color

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:background="?attr/colorPrimary"

/>

Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar); myToolbar.setTitleTextColor(ContextCompat.getColor(getApplicationContext(), R.color.Auth_Background)); setSupportActionBar(myToolbar);


Si es compatible con API 23 y superior, ahora puede usar el atributo titleTextColor para establecer el color del título de la barra de herramientas.

layout / toolbar.xml

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:titleTextColor="@color/colorPrimary" />

MyActivity.java

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar) toolbar.setTitleTextColor(Color.WHITE);


Si puede usar la aplicación appcompat-v7 : titleTextColor = "# fff">

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:visibility="gone" app:titleTextColor="#fff"> </android.support.v7.widget.Toolbar>


public class MyToolbar extends android.support.v7.widget.Toolbar { public MyToolbar(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); AppCompatTextView textView = (AppCompatTextView) getChildAt(0); if (textView!=null) textView.setTextAppearance(getContext(), R.style.TitleStyle); }

}

O uso simple de MainActivity:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarMain); setSupportActionBar(toolbar); ((AppCompatTextView) toolbar.getChildAt(0)).setTextAppearance(this, R.style.TitleStyle);

style.xml

<style name="TileStyle" parent="TextAppearance.AppCompat"> <item name="android:textColor">@color/White</item> <item name="android:shadowColor">@color/Black</item> <item name="android:shadowDx">-1</item> <item name="android:shadowDy">1</item> <item name="android:shadowRadius">1</item> </style>


<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:titleTextColor="@color/white" android:background="@color/green" />