[MUSIC] Otro de los elementos que tenemos también disponibles con material design, es nuestro appbar o nuestra barra de navegación que la vas a encontrar en la parte superior de las aplicaciones. Esta barra de navegación se ha incluido como un elemento nuevo de material design. Dado que esta va a tener una elevación por sobre de algunos de los elementos que van a componer tu interfaz gráfica. Entonces, si observamos un poco en nuestro proyecto, tengo aquà el layout donde está mi lista, mi list view. Recuerda que es nuestro list view con nuestros contactos. Solamente están los nombres de los contactos y ahorita el preview que estoy teniendo para esta lista de contactos es el API 23. Si yo cambio para el API 22, bueno no sucede mucho, solamente un problema en el rendereo de la información, pero no. Se sigue viendo mi app bar, si me bajo un poco más al API 21, en ese momento el app bar you no está disponible. Si voy al API 19, el app bar tampoco está disponible, y si voy un poco más abajo, tengo un app bar que ni siquiera tiene que ver con el estilo o con el diseño que yo habÃa definido en mis colores. De hecho es gris y tiene otro estilo, otro diseño. Básicamente lo que se planea en este módulo es que nosotros podamos diseñar nuestra propia app bar. Y que podamos unificarla que sea igual para versiones de material design en adelante, y versiones anteriores a Android Lollipop. Que nuestra barra de navegación que está en la parte superior se vea igual en cualquier versión de Android. Bien, entonces para ello. Lo primero que tengo que hacer es ir a mi archivo styles. El archivo esta vez lo voy a ubicar en la carpeta Res, en la carpeta Values, y ahà está mi archivo styles. Y lo primero que detecto es que el tema con el cual se ha creado esta aplicación, se llama Theme App Compat Light, de eso no hay probelma. Es uno de los temas de compatibilidad de material design. Pero observamos que dice Dark Action Bar. Es decir, por default nos está colocando el tema, una Action Bar, una barra. Que esta barra va ser variable o va ser con estilos diferentes dependiendo de la versión en la que yo esté en este momento visualizando mi aplicación. Entonces lo que voy hacer primeramente, es eliminar esa barra, que me está proveyendo el tema. La voy a eliminar y lo haré colocando el tema theme AppCompat.Light y NoActionBar. Ésta será la extensión que necesito, NoActionBar. No necesitamos una action bar que nos prevea el tema porque yo voy a diseñar mi propia action bar. Ustedes y yo diseñaremos nuestra propia action bar. Entonces como observas, pues en el API 15 you no está presente esa barra que tenÃamos anteriormente. Si nos vamos a otra API, pues tampoco está presente. Y esa es precisamente la idea. La idea era quitarla, eliminarla, deshacernos de ella. Para generar una action bar más linda y con diseño de material design. Perfecto. Entonces para desarrollar nuestra action bar, lo que vamos a tener que hacer es crear un nuevo layout. Un nuevo layout donde ahà vamos a diseñar cómo queremos que se vea nuestra app bar. Para crear un nuevo layout, voy a dar click derecho en layout, new layout resource file, y ahà voy a escribir el nombre de mi action bar. Le voy a poner tool bar. O podemos colocarle action bar, action bar, tal cual. Esto por default pues bueno, aquà estoy definiendo que me cree un linear layout, o lo que sea, finalmente pues voy a eliminar todo lo que esté por ahÃ. Bien, tengo esto, es un layout en blanco, se llama action bar, y voy a ir a la vista de texto. Lo primero que tengo en la vista de texto es mi linear layout que me crea por default. Vamos a quitarlo de ahÃ, vamos a borrarlo. Listo. Lo hemos borrado. Este linear layout no va a servir para crear una interfase como lo hemos estado haciendo, sino este layout lo único que va a ser es definir nuestra barra, es para lo único que va a a servir. Solamente ahà tendremos como widget nuestra tool bar, nuestra barra. Y bueno, este widget lo vamos a tener disponible en android.support.v7.widget.Toolbar. Éste es el widget que buscamos. Lo selecciono y cierro. Cierro la etiqueta. Bien. Ahora, aquà yo necesito colocar mis atributos obligatorios para cada etiqueta. Voy a colocar android: layout width, ¿y qué observamos? Observamos que no me está reconociendo el atributo Android, esto es porque no está dado de alta el name space que define ese atributo. Entonces si observas por ahi, lo único que hice fue dar control, barra espaciadora, control barra espaciadora. Y me salió esa sugerencia, que necesito importar el name space para esta propiedad. Entonces voy hacer alt enter, y automáticamente you me ha traÃdo el name space que necesito. Nada más voy a quitar esta propiedad Android, voy a pasar este name space para arriba, y dentro del pico paréntesis voy a estar escribiendo mis propiedades. Bien, si observas ahorita está en gris, eso no te preocupes, simplemente significa que no he utilizado la propiedad Android theme. Entonces voy a colocar Android y voy a empezar con mis comandos mis propiedades obligatoria. Voy a colocar en el width, el width de la barra debe ser match parent, siempre debe ajustarse al padre, al tamaño de la ventana de la aplicación. Entonces vamos a colocar match parent. En este momento no nos lo sugiere, porque no detecta que en algún momento you hayamos escrito o que you esté presente esa palabra en el editor. Esa palabra match parent. Ahora vamos con nuestro height. Y para el height vamos a utilizar un recurso y lo vamos a traer. Vamos a poner attr, diagonal, action, bar, size. Esto lo que hace es que trae un atributo donde me define el action bar size. Por aquà you se alcanza a ver mi barra, si yo pongo el mouse, se alcanza a ver mi barra. En este momento el color de la barra es transparente o es color blanco, por eso no se observan, no se identifican dónde está. Vamos precisamente a definir eso. Vamos a definir el color de fondo de nuestra barra, voy a colocar Android background. Y el color de una barra de estado siempre debe ser el primary color. Nuestro color primary. Ahà you se está observando. Y nuestro dark primary color está en la parte superior. Que es nuestra barra de notificaciones. Bien, ahà está nuestro color primary. Y otra cosa que también debemos colocar para nuestra barra es la elevación. Hay un punto muy interesante que no hemos tocado aun, y es que todos los elementos de material design. Todos y cada uno tienen asignada una elevación. Una elevación que debe tener un elemento con respecto a otro. Recuerda que con material design you no tenemos solamente un eje X y un eje Y para diseñar. Sino ahora tenemos también un eje Z. Un eje Z que va a significar que nuestro teléfono va estar en esta forma. Nuestros elementos asÃ, y nuestros elementos van a estar flotando en el eje Z. Para poder dar una coordinación a nuestros elementos en qué elemento va a estar arriba de otro, cuál va a estar debajo. Google a colocado una guÃa. En Design.Google.com o Google.com/design. Si vamos a la pestaña de resources. Bajamos un poco, y vamos aquà donde dice guide lines material design. Vamos a entrar. Y tenemos que buscar aquà en el menú la parte de estilo. Déjame buscar el menú. Y tenemos que buscar. En el menú. Donde dice "what is material?". "Elevation and shadows". Vamos a dar click ahÃ. Elevation. Y ahora, aquà me muestra. Las medidas de elevación que debe tener cada elemento. Por ejemplo, recuerda que todo está en las unidades de medida que son los dps. El componente dialog picker debe estar en una elevación de 24 dps. Un navigation drawer debe estar en una elevación de 16 dp. Mucho más abajo. Un right drawer, también un modal button sheet. Y tenemos un menú. Un SnackBar qué elevación puede tener. El Appbar que es lo que estamos nosotros diseñando. Nuestra Appbar debe estar en una elevación de 4 dps. A lo mejor esta tabla es un poco confusa. Más abajo tenemos aquÃ, en el gráfico, una forma de estar viendo mejor nuestras elevaciones. Como vemos el switch está en una elevación de 1dp. Un raise button está en una elevación de 2dp. Un card también está en una elevación de 2. Tenemos un refresh indicator, está en una elevación de tres. El appbar elevación de cuatro. Un snackbar en una elevación de seis y vemos que el navigation drawer está en la 16, y dialog o los picker están hasta arriba. Esos siempre debe estar en la parte superior en 24dp. Entonces aquà podemos ver la elevación que tiene cada elemento, Ãrsela asignando para tener una mejor coordinación con todos mis elementos. Bien, entonces vemos aquà que hemos creado un app bar, pero el app bar no tiene elevación. Simplemente se ve plano, el color se ve plano. Entonces, el app bar debe tener una elevación de 4dp. Vamos a dar de alta en el archivo dimens, nuestra elevación del app. Vamos a poner elevación action bar, y dijimos que debe ser 4dp. Ahora si regresamos a nuestro layout y colocaremos nuestro recursos Android, propiedad Android elevation. Y colocaremos elevation action bar. Y observamos que you se ha pintado una sombra. Una sombra que nos está indicando la elevación de ese elemento. Si yo coloco depronto 10dp, la sombra se incrementa. Entre mayor sombra tenga en un elemento la elevación es mucho mayor. Ojo, no hay que abusar de estas elevaciones. Es muy recomendable seguir las métricas de cómo se nos están indicando las elevaciones para cada elemento. Para este elemento está definido con 4dp. Con esto serÃa todo para declarar nuestro nuestro toolbar y ahora vamos a proceder simplemente a insertarlo en nuestro layout. Tenemos este toolbar como un recurso adicional, como un recurso independiente. Entonces yo iré a mi activity main, en la vista de texto tengo que mi activity name, recuerda éste tiene la lista. La lista de contactos. Antes de mi text view, antes de mi list view, voy a colocar. Mi toolbar. Con la etiqueta include, puedo incluir un layout o puedo incluir un recurso de XML en este layout. Entonces colocaré Android id, le voy a colocar id, y le voy a poner miActionBar. Y con la etiqueta, con la propiedad layout, voy a definir a qué layout corresponde éste. Coloco el que acabamos de crear. Y aquà está, aquà está nuestro actionbar, y puedo incrustarlo en todos los layout que necesite. Necesito también por acá un detalle de contacto, lo colocaremos aquÃ. Aquà está, vamos a quitar. Estos paddings que están aquÃ, y vamos asignarle los paddings a cada elemento que tenemos por aquÃ, para que esto se vea mejor. Perfecto. Bien, con esto you hemos creado un actionbar. Si nosotros corremos esto. En nuestro teléfono. La verdad es que si lo corremos en un teléfono. Si lo corremos en un teléfono con sistema operativo marshmallow o lollipop, la verdad es que esto va a ser casi invisible, pero se alcanza a ver el action bar. Se ve ahora diferente. Como vemos aquà en nuestro layout, está tapando el primer elemento de la lista, asà que voy a definir por acá la posición del list view. Después vamos a ver cómo coordinar todos estos elementos para que puedan quedar sobrepuestos uno encima de otro y lo haremos con otro tipo de layout que lo veremos más adelante. Simplemente a esta lista voy a decirle que esté debajo de mi action bar. Que siempre se mantenga ahà debajo. Corremos ésto nuevamente. Y ahà está, ahora si están todos nuestros elementos. Si yo entro a un elemento aquà veo mi action bar, de hecho se alcanza a ver una sombra que es la que define la posición, que es la que define la elevación. De esta forma podemos crear un action bar, un action bar que sea compatible con versiones anteriores a lollipop y con versiones también superiores a lollipop. Ok, otra cosa que también podemos colocar en nuestro tool bar en nuestro action bar es la propiedad Android theme. Que esto lo que nos ayudará es a que, bueno, nuestra app bar. Compact action bar, nuestra app bar tenga también por default el estilo de material design. Digamos que esto es a prueba de todo. Colocaremos también una propiedad que es app que no está declarada y que necesito declarar también su namespace. Cuando escribo app, automáticamente you me está sugiriendo que puedo colocar el name space para esa propiedad. Este lo voy a cortar y lo voy a poner hasta acá arriba. Si no te sale el name space, por acá, simplemente puedes dar Alt enter y automáticamente se va a importar el name space para que la propiedad app funcione. Voy a dar app, dos puntos, popup theme, colocaré @style theme overlay, que es lo mismo que está arriba, AppCompat.Light. Esto es dependiendo del tipo de tema que hayas definido. Bueno con estos dos estamos diciendo que automáticamente este elemento tome todo el estilo de material design. Y un último paso que debemos realizar es en nuestro main activity y en cada actividad en donde estemos trabajando nuestro app bar, debemos también declararlo. Lo voy a declarar inmediatamente después de set content view. Voy a colocar Toolbar, tenemos aquà dos opciones. Colocaré el toolbar support V7, toolbar y colocaré mi action bar. Y colocaré toolbar y pondré findViewById(R.id. Mi action bar, que es la que declaré por allá. Tengo que colocar set support action bar, para completar el soporte para que esto se vea muy bien en todas mis pantallas. Y listo. Ahora si puedo correrlo, puedo correr la aplicación puedo ponerlo en mi teléfono, y empezar a visualizar Puedo correrlo en mi teléfono, vamos a esperar a que cargue esto. Ok, y ahora sÃ. Aquà está, como ves you tengo una tool bar, aquà está apareciendo el texto. Ahorita es de este color, pero podemos modificarlo. Igualmente en la pantalla de detalle de contacto, no aparece el texto porque no he colocado el objeto toolbar como deberÃa de ser. También en mi clase detalle contacto. Y muy bien, es bien importante tener esto en nuestros proyectos. Poder manejar toolbars o actionbars, personalizadas para que bueno, puedas darle toda la personalidad que quieres lograr a tu aplicación. Y que además sea compatible con todas las versiones de Android, y tenga el elemento de material design. Nos vemos en el siguiente. [MUSIC]
