Android Navigation Components — Part 1
Last week I attended the Google I/O 2018 in Mountain View, California.
It was a great event and a lot of things were announced. From all these things, the Navigation component was the one that captured most of my attention.
I don’t know if it was due to the the visuals in the demos or how simple it was claiming to be, but they were all I thought about during the conference.
This made me start thinking how could I use it in the projects I am currently working on.
I decided to start the exploration with a personal project with the hope to take it to the projects I am working on at Shopify ASAP.
It took me less than an hour to learn the basics from the docs and convert the first flow of one of my personal projects. I thought this was impressive, but as soon as I started to convert the other flows and try to put them together things became hard.
These difficulties were not related to the Navigation library itself but were the impact of the decisions I have made earlier while designing the app.
I intend to write a series of posts to explain how to use the Navigation Components.
Instead of jumping right into the implementation, in this post I will start by going through the pre-work I think it is required to ensure your app is very well structured.
I hope that doing the presented pre-work on this post will make the process of translating your app to use the Navigation Components a bit easier task when we reach the implementation stage.
Understanding App Structure
The most important thing when talking about navigation is structure.
A structure comes in many different ways, in many different systems we have around us. A structure provides support to the system and mechanisms to allow the communication or movement of the different parts of a system.
A house blueprint is a common structure and very easy to visualize. It puts together the different house compartments and ways to move(hallways, stair cases, doors) between each one of them.
The apps we build also present these characteristics and have places that need to be interconnected.
Saying this, we need to ensure our apps have a great structure. According to this video at Google I/O 2013, a well structured app has the following three properties:
1. Makes it easy and efficient to get things done.
2. Keeps related things together and unrelated things separate.
3. Manages complexity through consistent navigation.
How to create a good App Structure.
Creating a good app structure starts by understanding first what your app does.
If you already have a mature app in the Play Store it might sound tempting to say that this is not applicable to you. But there is a great value in rethinking about going back to the drawing board. It will help you find any holes upfront or reassure that your or your team already did a great job and you’re ready to start the transition.
To find your app structure you will need to model your app in a way that is focused on expressing the user goals. Not too abstract from a business level or too complex as a detailed feature.
To do this we start by understanding the app use cases and represent them using use cases diagrams.
In case you don’t know, use cases diagrams represent the relationship between different part of a system with an actor. The system being our application and the actor, the user.
To create a use case diagram, you will need to:
1. Create an inventory of all your actors and things your app does.
2. Prioritize the most important things your actors need to do.
3. Connect the actions to the actor in a sequence that makes sense.
If we follow those three steps to model an app that allows users to find nearby events and buy tickets, we would do:
1. Inventory -Who are the users? What are they trying to do?
Actors: Event Attendee
Actions:
- Find Nearby Events;
- View Event Details;
- View Ticket Details;
- Share Event;
- Add Review to Event;
- Add Tickets to Cart;
- Buy Event Tickets;
2. Prioritize — What are the most important things the actors will do first or often?
High Priority:
- Find Nearby Events
- View Event Details
- Buy Event Tickets
Medium Priority:
- View Ticket Details
Low Priority:
- Add Review to Event.
- Share Event;
3. Connection and Sequence.
By doing this step, we are ready to draw a use case diagram. The diagram for the example I am talking about will look like this:
What do I do with all this?
Now that we have a use case diagram, we not only have a good understanding of the user journey, but also the structure of the app was created naturally.
If you take the use case diagram and rotate it 90 degrees clockwise, you will realize that it looks like a tree.
This tree will show you a clear path on how your app should be organized to allow the user to achieve their goals efficiently.
This can be translated to an app in many different ways. One way to think about it is that each component on a level in the tree is a Fragment and they will share the same Activity.
Regardless of which way you translate the diagram to the actual app, doing this exercise will help you with 80% of the problems you might run into while creating a new project or converting an existing one to use the Navigation components.
I would love to hear if you and or your team have a different process of doing this and hope to see you on the next post where I will start translating all this into an app using the Navigation components.
If you have any questions or comments, please feel free to drop them in the comments section below or send me a tweet.
See you next time!
Resources
Structure In Android App Design — Google I/O 2013
