Estilizar la Action Bar

La Action Bar proporciona a tus usuarios un método familiar y predecible para realizar ciertas acciones y navegar por tu app, pero eso no significa que necesariamente tenga que tener el mismo aspecto visual que el resto de las apps. Si tu quieres estilizar la action bar para que encaje mejor con tu producto, puedes hacerlo fácilmente utilizando los recursos estilo y temas de Android.

Android incluye unos cuantos temas para la actividad, entre ellos permiten estilizar la action bar para que se vea “clara” u “oscura”. También puedes extender dichos temas para personalizar aún más el aspecto de tu action bar.

Nota: Si estás utilizando las APIs de la Support Library, entonces debes utilizar Theme.AppCompat.

Contenidos

Usar un Tema Android
Personalizar el Fondo
Personalizar el Texto
Toolbar

Usar un Tema Android

Android incluye dos temas base para indicar el color de la action bar:

android:Theme.Material para un tema “oscuro”.
android:Theme.Material.Light para un tema “claro”.

Puedes aplicar dichos temas en tu app al completo, declarándolas en el archivo manifest de tu app mediante el atributo android:theme en el elemento <application>, o de forma individual en cada elemento <activity>.

Por ejemplo:

0

1

2

3

4

5

6

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:theme="@android:style/Theme.Material.Light" >

Personalizar el Fondo

Para cambiar el color de la action bar debes utilizar el elemento <item name="colorPrimary">@color/ColorPrimary</item>. Por ejemplo:

0

1

2

3

4

5

6

7

</style>

Personalizar el Texto

Puedes personalizar aún más la Action Bar modificando la apariencia del título, ya sea variando el color o incluso el tamaño.

Por ejemplo, en aquí tienes un ejemplo de como modificar tanto el color del fondo como del título.

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<item name="colorPrimaryDark">@color/ColorPrimaryDark</item>

<item name="actionBarStyle">@style/ActionBarStyle</item>

</style>

<item name="titleTextStyle">@style/ActionBarTitleTextStyle</item>

<item name="background">@color/ColorPrimary</item>

</style>

<item name="android:textColor">@color/ColorActionBarTitle</item>

</style>

</resources>

Los colores utilizados han sido:

0

1

2

3

4

5

6

7

8

<?xml version="1.0" encoding="utf-8"?>

</resources>

Toolbar

Se ha introducido un nuevo elemento para añadir la action bar a tus layouts, el cual facilita una mayor personalización de un modo más sencillo. Este elemento se llama Toolbar. Puedes añadirlo del siguiente modo dentro de tu activity_main.xml:

0

1

2

3

4

5

6

7

8

9

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?colorPrimary"

android:elevation="4dp"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Los atributos android:layout_height y android:layout_width, permiten modificar la altura y anchura de la action bar, de ahora en adelante la llamaremos toolbar.
El atributo android:background permitemodificar el color de la toolbar.
El atributo android:elevation permite modificar la elevación, y por ende, la longitud y degradado de la sombra que se proyectará.
El atributo android:theme permite modificar la toolbar desde el archivo styles.xml, o utilizar uno de los estilos predefinidos que ya vienen incorporados, como lo es android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar".
El atributo app:popupTheme permite modificar la apariencia del menú overflow, ya sea tanto el fondo como el texto. En el ejemplo aparecerá con fondo blanco y el texto oscuro.

Tienes que tener en cuenta que para utilizar este widget, debes modificar tu estilo para que no incluya la action bar, ya que son incompatibles:

0

1

2

3

4

5

6

7

8

<item name="colorPrimary">@color/ColorPrimary</item>

<item name="colorPrimaryDark">@color/ColorPrimaryDark</item>

<item name="colorAccent">@color/ColorAccent</item>

</style>

</resources>

Los colores que utilizaremos en esta sección sobre la toolbar son:

0

1

2

3

4

5

6

7

8

9

10

<?xml version="1.0" encoding="utf-8"?>

</resources>

Además para que funcione correctamente, tienes que darle soporte desde tu archivo MainActivity.java:

0

1

2

3

4

5

6

7

8

9

10

11

12

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar;

toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

}

Como se ha mencionado anteriormente, con el atributo android:theme, puedes modificar la toolbar desde el archivo styles.xml. Por ejemplo:

Colocaremos la toolbar con estos atributos:

0

1

2

3

4

5

6

7

8

9

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?colorPrimary"

android:elevation="4dp"

android:theme="@style/Toolbar"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Y en nuestro estilos añadiremos lo siguiente:

0

1

2

3

4

5

6

7

8

9

10

11

12

13

<item name="colorPrimary">@color/ColorPrimary</item>

<item name="colorPrimaryDark">@color/ColorPrimaryDark</item>

<item name="colorAccent">@color/ColorAccent</item>

</style>

<item name="colorPrimary">@color/ColorPrimary2</item>

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

</style>

</resources>

Puedes observar que, gracias a las líneas destacadas, hemos modificado tanto el colorPrimary como el android:textColorprimary de la toolbar, es decir, el color de fondo ha pasado a ser rojo y el color del título a azul.

Sin embargo el colorPrimaryDark, el cual se encarga de modificar el color de la status bar, al no haberlo modificado, sigue utilizando el color azul oscuro ya que no se puede modificar añadiendolo dentro del estilo Toolbar. Si lo cambias en el estilo AppTheme, y utilizas el valor ColorPrimaryDark2, obtendrías una status bar de color rojo oscuro.

0

1

2

3

4

5

6

7

8

9

10

11

12

13

<item name="colorPrimary">@color/ColorPrimary</item>

<item name="colorPrimaryDark">@color/ColorPrimaryDark2</item>

<item name="colorAccent">@color/ColorAccent</item>

</style>

<item name="colorPrimary">@color/ColorPrimary2</item>

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

</style>

</resources>

También puedes cambiar tanto el color como el texto del título mediante estos dos métodos en java:

0

1

2

3

4

5

6

7

8

9

10

11

12

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

toolbar.setTitleTextColor(getResources().getColor(R.color.ColorPrimary));

getSupportActionBar().setTitle("Tu título");

}

Para ver más métodos visita el enlace a las referencias de la android.support.v7.widget.Toolbar.

Puedes ver más información sobre Estilizar la Action Bar en la página oficial de Google en inglés pulsando aquí.

Advertisements

Entrada anterior Añadir Botones de Acción Entrada siguiente Superponer la Action Bar

Usar un Tema Android

Personalizar el Fondo

Personalizar el Texto

Toolbar

Entradas relacionadas

Action Bar (Barra de Acciones)

Empezar

Configurar la Action Bar

Síguenos

Donar

Suscríbete a la newsletter

Usar un Tema Android

Personalizar el Fondo

Personalizar el Texto

Toolbar

Entradas relacionadas

Action Bar (Barra de Acciones)

Empezar

Configurar la Action Bar

Síguenos

Donar

Suscríbete a la newsletter

Etiquetas