design/patterns/navigation.jd

page.title=Navegacin con los botones Back y Up
page.tags="navigation","activity","task","up navigation","back navigation"
page.image=/design/media/navigation_between_siblings_gmail.png
@jd:body

<a class="notice-developers" href="{@docRoot}training/implementing-navigation/index.html">
  <div>
    <h3>Documentos para desarrolladores</h3>
    <p>Implementacin de la navegacin eficiente</p>
  </div>
</a>

<p itemprop="description">La navegacin coherente es un componente fundamental de la experiencia general del usuario. Pocas situaciones frustran ms a los
usuarios que la navegacin bsica que se comporta de forma irregular e inesperada. En Android 3.0,
se introdujeron cambios significativos en el comportamiento global de la navegacin. Si sigues detalladamente
las pautas de navegacin con los botones Back y Up, la navegacin en tu aplicacin ser predecible y confiable para los usuarios.</p>
<p>En Android 2.3 y versiones anteriores, se confi en el botn <em>Back</em> del sistema para respaldar la navegacin dentro de una
aplicacin. Con la introduccin de las barras de accin en Android 3.0, apareci un segundo mecanismo de navegacin:
el botn <em>Up</em>, que consiste en el icono de la aplicacin y una pequea flecha a la izquierda.</p>

<img src="{@docRoot}design/media/navigation_with_back_and_up.png">

<h2 id="up-vs-back">Up en comparacin con Back</h2>

<p>El botn Up se utiliza para navegar dentro de una aplicacin sobre la base de las relaciones jerrquicas
entre pantallas. Por ejemplo, si en la pantalla A se muestra una lista de elementos y, si se selecciona un elemento, se conduce al usuario a la
pantalla B (en la que se presenta ese elemento de forma ms detallada), entonces en la pantalla B se debe mostrar el botn Up para regresar
a la pantalla A.</p>
<p>Si una pantalla aparece en la parte superior de una aplicacin (es decir, en el inicio de la aplicacin), no debes incluir el botn Up
.</p>

<p>El botn Back del sistema se utiliza para navegar, en orden cronolgico inverso, por el historial
de pantallas en las que recientemente trabaj el usuario. Generalmente, se basa en las relaciones temporales
entre pantallas, y no en la jerarqua de la aplicacin.</p>

<p>Cuando la pantalla que se visit anteriormente es tambin el componente jerrquico primario de la pantalla actual, si se presiona el botn
Back, se obtendr el mismo resultado que si se presiona el botn Up, y esto es algo que sucede a
menudo. Sin embargo, a diferencia del botn Up, mediante el cual se garantiza que el usuario permanezca en la aplicacin, el botn Back
le permite al usuario regresar a la pantalla de inicio o, incluso, a otra aplicacin.</p>

<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png">

<p>El botn Back tambin permite diferentes comportamientos que no estn vinculados directamente con la navegacin entre pantallas:
</p>
<ul>
<li>descartar las ventanas flotantes (cuadros de dilogo o emergentes);</li>
<li>descartar las barras de accin contextuales y eliminar el resaltado de los elementos seleccionados;</li>
<li>ocultar el teclado en la pantalla (IME [Editores de mtodos de entrada]).</li>
</ul>
<h2 id="within-app">Navegacin dentro de tu aplicacin</h2>

<h4>Navegacin hacia pantallas con mltiples puntos de entrada</h4>
<p>En algunos casos, las pantallas no tienen una posicin fija dentro de la jerarqua de la aplicacin, y se puede acceder a ellas
desde mltiples puntos de entrada (como la pantalla de configuracin, a la que se puede acceder desde cualquier otra pantalla
de la aplicacin). En este caso, el botn Up debe permitir regresar a la pantalla remitente, por lo que se comportara
de forma idntica al botn Back.</p>
<h4>Cambio de vista dentro de una pantalla</h4>
<p>Cambiar las opciones de vista de una pantalla no modifica el comportamiento de los botones Up o Back: la pantalla sigue estando
en el mismo lugar dentro de la jerarqua de la aplicacin y no se crea ningn historial de navegacin nuevo.</p>
<p>Entre los ejemplos de cambios en las vistas, se encuentran los siguientes:</p>
<ul>
<li>cambio de vistas mediante las pestaas o los deslizamientos de izquierda a derecha;</li>
<li>cambio de vistas mediante un men desplegable (tambin conocido como pestaas colapsadas);</li>
<li>filtrado de listas;</li>
<li>clasificacin de listas;</li>
<li>modificacin de las caractersticas de la pantalla (como el zoom).</li>
</ul>
<h4>Navegacin entre pantallas relacionadas</h4>
<p>Si tu aplicacin es compatible con la navegacin desde una lista de elementos hacia una vista de detalles de alguno de esos elementos, generalmente,
es preferible respaldar la navegacin de direccin desde ese elemento a otro anterior
o siguiente en la lista. Por ejemplo, en Gmail, es fcil deslizarse hacia la izquierda o la derecha desde una conversacin
para ver una conversacin anterior o ms nueva en la misma bandeja de entrada. Al igual que cuando se cambia la vista dentro de una pantalla, en este tipo de
navegacin no se cambia el comportamiento de los botones Up o Back.</p>

<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png">

<p>Sin embargo, una excepcin importante a este caso se presenta cuando se explora entre vistas de detalles relacionadas que no estn vinculadas
mediante la lista que se est utilizando; por ejemplo, cuando se explora en Play Store entre diferentes aplicaciones
del mismo desarrollador o entre lbumes del mismo artista. En estos casos, si se sigue cada vnculo, esto queda registrado en el
historial, por lo que, a travs del botn Back, se regresa a cada pantalla que se visit anteriormente. El botn Up debe seguir omitiendo
estas pantallas relacionadas y navegar hacia la pantalla del contenedor visitada ms recientemente.</p>

<img src="{@docRoot}design/media/navigation_between_siblings_market1.png">

<p>Puedes lograr que el comportamiento del botn Up sea incluso ms inteligente teniendo en cuenta tus conocimientos de la vista
detallada. Si extendemos el ejemplo de Play Store mencionado antes, imaginemos que el usuario naveg desde el ltimo
libro visto hacia los detalles de la adaptacin de la pelcula. En ese caso, mediante el botn Up podrs regresar a un contenedor
(Pelculas) por el que el usuario no naveg anteriormente.</p>

<img src="{@docRoot}design/media/navigation_between_siblings_market2.png">

<h2 id="into-your-app">Navegacin dentro de la aplicacin a travs de los widgets y las notificaciones de la pantalla de inicio</h2>

<p>Podrs utilizar los widgets y las notificaciones de la pantalla de inicio para ayudar a los usuarios a navegar directamente hacia las pantallas
que se encuentran en posiciones ms profundas dentro de la jerarqua de tu aplicacin. Por ejemplo, tanto el widget de la bandeja de entrada de Gmail como las notificaciones de los mensajes nuevos
 pueden omitir la pantalla Bandeja de entrada y llevar al usuario directamente hacia una vista de conversacin.</p>

<p>En ambos casos, el botn Up se debe utilizar de la siguiente manera:</p>

<ul>
<li><em>Si a la pantalla de destino generalmente se llega desde una determinada pantalla dentro de su
aplicacin</em>, el botn Up debe permitir la navegacin hacia esa pantalla.</li>
<li><em>De lo contrario, </em>el botn Up debe permitir la navegacin hacia la pantalla que est en el nivel superior ("Inicio") de tu aplicacin.</li>
</ul>

<p>En el caso del botn Back, la navegacin debe ser ms predecible. Para ello, coloca en la
pila de retroceso de la tarea la ruta completa de la navegacin ascendente hacia la pantalla que se encuentra en el nivel superior de la aplicacin. De este modo, los usuarios que
no recuerdan cmo ingresaron a tu aplicacin podrn navegar hacia la pantalla del nivel superior de la aplicacin antes de
salir.</p>

<p>A modo de ejemplo, el widget de la pantalla Inicio de Gmail posee un botn para llevar al usuario directamente a la pantalla de
redaccin. Mediante los botones Up o Back de la pantalla de redaccin el usuario debera poder dirigirse hacia la Bandeja de entrada y, a partir de all, continuar hacia la pantalla Inicio
por medio del botn Back.</p>

<img src="{@docRoot}design/media/navigation_from_outside_back.png">

<h4>Notificaciones indirectas</h4>

<p>Cuando tu aplicacin necesita presentar informacin sobre mltiples eventos de forma simultnea, puede utilizar una
sola notificacin que dirija al usuario a una pantalla intersticial. En esta pantalla, se resumen dichos
eventos y se proporcionan rutas para que el usuario navegue ms profundamente por la aplicacin. Las notificaciones de este estilo se
denominan <em>notificaciones indirectas</em>.</p>

<p>A diferencia de las notificaciones estndar (directas), si se presiona Back desde una pantalla intersticial de una
notificacin indirecta, el usuario ser dirigido hacia el punto en el que se desencaden la notificacin. No se incluyen
pantallas adicionales en la pila de retroceso. Una vez que el usuario se dirige hacia la aplicacin desde la
pantalla intersticial, los botones Up y Back se comportan del mismo modo que lo hacen en las notificaciones estndar, como se describi antes:
navegan dentro de la aplicacin en lugar de regresar a la pantalla intersticial.</p>

<p>Por ejemplo, supongamos que un usuario de Gmail recibe una notificacin indirecta del calendario. Si se toca
esta notificacin, se abrir la pantalla intersticial, en la que se mostrarn recordatorios de varios
eventos diferentes. Si se toca Back desde la pantalla intersticial, el usuario volver a Gmail. Si se toca un evento
en particular, el usuario saldr de la pantalla intersticial e ingresar en la aplicacin Calendario, donde se mostrarn detalles del
evento. En la pantalla de detalles del evento, es posible navegar con los botones Up y Back hacia la visomunmenteta superior del calendario.</p>

<img src="{@docRoot}design/media/navigation_indirect_notification.png">

<h4>Notificaciones emergentes</h4>

<p><em>Las notificaciones emergentes</em> omiten el panel lateral de notificaciones y aparecen directamente
frente al usuario. Estas casi nunca se utilizan, y se <strong>deben reservar para ocasiones en las que es necesario proporcionar una
respuesta oportuna y es necesario realizar una interrupcin en el contexto del usuario</strong>. Por ejemplo,
en Talk se utiliza este estilo para alertar al usuario sobre una invitacin de un amigo para participar en una videocharla, ya que esta
invitacin caducar automticamente luego de algunos segundos.</p>

<p>En trminos de comportamiento de la navegacin, las notificaciones emergentes siguen, en gran medida, el comportamiento de la pantalla intersticial
de una notificacin indirecta. El botn Back le permite al usuario descartar la notificacin emergente. Si el usuario navega
desde la ventana emergente hacia la aplicacin que genera las notificaciones, los botones Up y Back seguirn las reglas para las notificaciones estndar
mientras se navega por la aplicacin.</p>

<img src="{@docRoot}design/media/navigation_popup_notification.png">

<h2 id="between-apps">Navegacin entre aplicaciones</h2>

<p>Una de las principales ventajas del sistema Android es la capacidad de las aplicaciones de activarse
mutuamente, por lo que el usuario puede navegar directamente desde una aplicacin hacia otra. Por ejemplo, una
aplicacin que debe tomar una fotografa puede area appactivar la aplicacin de la cmara, la cual mostrar la fotografa
en la aplicacin que la activ. Esto representa una gran ventaja tanto para el desarrollador, quien puede aprovechar fcilmente el
cdigo de otras aplicaciones, como para el usuario, quien disfruta de una experiencia coherente para acciones
que se realizan comnmente.</p>

<p>Para comprender la navegacin entre aplicaciones, es importante que se entienda el comportamiento del framework de Android,
que se explica a continuacin.</p>

<h4>Actividades, tareas e intentos</h4>

<p>En Android, una <strong>actividad</strong> es un componente de la aplicacin que define una pantalla de
informacin y todas las acciones relacionadas que el usuario puede llevar a cabo. Tu aplicacin es un conjunto de
actividades formado por las actividades que creas y aquellas que reutilizas de otras aplicaciones.</p>

<p>Una <strong>tarea</strong> es la secuencia de actividades que un usuario realiza para lograr un objetivo. En
una sola tarea, se pueden utilizar actividades de una sola aplicacin o se pueden utilizar actividades de varias
aplicaciones diferentes.</p>

<p>Un <strong>intento</strong> es un mecanismo mediante el cual una aplicacin indica que necesita la ayuda de
otra aplicacin para realizar una accin. Las actividades de una aplicacin pueden indicar los intentos
a los que pueden dar respuesta. En el caso de los intentos comunes, como "Compartir", es posible que el usuario tenga instaladas varias aplicaciones
que pueden cumplir con esta solicitud.</p>

<h4>Ejemplo: navegacin entre aplicaciones para respaldar el uso compartido</h4>

<p>Para comprender cmo las actividades, las tareas y los intentos (intents) funcionan en conjunto, considera cmo una aplicacin les permite a los usuarios
compartir contenido a travs de otra aplicacin. Por ejemplo, si se ejecuta la aplicacin Play Store desde la pantalla de inicio, se iniciar
una nueva tarea A (consulta la imagen a continuacin). Despus de navegar por Play Store y de tocar un libro promocionado
para ver su informacin detallada, el usuario permanece en la misma tarea y la extiende al agregar actividades. Si se desencadena la accin
Compartir, se le mostrar al usuario un cuadro de dilogo con una lista de todas las actividades (provenientes de diferentes aplicaciones)
que se registraron para concretar el intento de compartir.</p>

<img src="{@docRoot}design/media/navigation_between_apps_inward.png">

<p>Si el usuario decide compartir el contenido a travs de Gmail, la actividad de redaccin de Gmail se agrega como una continuacin de la
tarea A; no se crea una tarea nueva. Si Gmail estaba ejecutando su propia tarea en segundo plano, esta
no debera verse afectada.</p>

<p>Desde la actividad de redaccin, si se enva el mensaje o se toca el botn Back, se dirigir nuevamente al usuario hacia
la actividad de detalles del libro. Si se sigue tocando el botn Back, el usuario seguir navegando por Play
Store y, finalmente, llegar a la pantalla de inicio.</p>

<img src="{@docRoot}design/media/navigation_between_apps_back.png">

<p>Sin embargo, si el usuario toca el botn Up desde la actividad de redaccin, estar indicando su deseo de permanecer dentro de
Gmail. Por consiguiente, aparecer la actividad de la lista de conversaciones de Gmail y se crear una nueva tarea B para esto. La ruta raz de las nuevas tareas siempre conduce
a la pantalla Inicio, por lo que, si se toca el botn Back desde la lista de conversaciones, se regresar a dicha pantalla.</p>

<img src="{@docRoot}design/media/navigation_between_apps_up.png">

<p>La tarea A permanece en segundo plano, y el usuario podr regresar a ella despus (por ejemplo, a travs de la pantalla
Recientes). Si Gmail ya estaba ejecutando su propia tarea en segundo plano, esta se reemplazar con la
tarea B, y el contexto anterior se abandonar para darle preferencia al nuevo objetivo del usuario.</p>

<p>Cuando tu aplicacin se registre para manipular los intentos de una actividad que se encuentra en un nivel profundo dentro de la jerarqua de la aplicacin,
consulta <a href="#into-your-app">Navegacin dentro de la aplicacin a travs de los widgets y
las notificaciones de la pantalla de inicio</a> para obtener informacin sobre cmo especificar la navegacin del botn Up.</p>