Creating a successful application isn’t just about ensuring that all of the components work; the layout and design of the application are also crucial. The design must be professional and engaging, and the layout should be easy for users to navigate. Design components, such as animations and navigation transitions, can also enhance the usability of the application.

For the past couple of months, I have been working with a design team to create an Android application. As I build each feature, the design team reviews and changes the layout to ensure that the user experience is as efficient and appealing as possible. When these design changes occur, we sometimes have to rethink how certain features have been built. 

One such area that we have focused on is the navigation from one screen to the next within the application. My background is in iOS development, so I am used to iOS navigation and transitions. I was therefore interested in seeing how we could implement some of my preferred navigation techniques in our Android application. 

In this post, I am going to outline the basics of Android navigation and present the transitions I created for use within this project. 

Introduction to Android Navigation

Before discussing Android navigation, it is important to understand the basic vocabulary associated with the navigation components:

• • Activity: The screen. The activity holds multiple fragments.  
  • Fragment: Parts of the activity that can be views, images, buttons, or anything else that is part of the layout.   
  • Intent: The messaging object that allows communication between fragments. For navigational purposes, when you want to start a new screen, you can pass data through the intent.
  • Android Navigation Components:
    • Graph: An XML resource that contains all navigation information, including both navigation paths and destinations. The graph highlights the different ways that fragments can be displayed, as well as how the user can move from one fragment to the next. 
    • Host: A container that displays destination fragments from the graph.
    • Controller: An object that manages the application navigation from the host. The controller can pass data between fragments, which allow users to move through your application. 

When we talk about navigation, we are referring to the interactions that allow a user to move between different locations within the application. A user will start on the home screen (also known as the fixed start screen) of the application. When the user wants to move to another destination, the controller responds by showing the appropriate destination within the host. 

When these navigational processes occur, the navigation transitions can help the user stay oriented within the application by depicting how the various sections of the application are related to one another. 

Transitions in Android and iOS

The guidelines for application design are different between iOS and Android. Android applications tend to follow the Material Design Guidelines, while iOS applications are created based on the Human Interface Guidelines. While the basic recommendations between the two sets of guidelines are similar, there are platform-specific transitions that users become accustomed to. 

iOS applications tend to use fluid changes that follow basic physics principles. For example, if a user opens a new view by sliding their finger from the top of the screen towards the bottom, they assume that they can hide the view by swiping in the opposite direction. To comply with these trends, iOS applications commonly use vertical and horizontal transitions that mirror the interactive animations.

Android application transitions tend to highlight hierarchy between activities based on how they fade or expand from the center of the screen. When a new view expands from the center, it expresses that it is a child element. When it collapses back towards the center, it shows that you are returning to the parent screen. In general, Android applications tend to have less consistent transitions, which can be detrimental to the overall success of the application.  

For our Android application, I wanted to create transitions that made the navigation seem a bit more exciting while still being logical for the user.

Using Intents to Create Screen Transitions

The basic way to move from one activity to the next within an Android application is by using the intent to bind data between the two activities in question. Therefore, I decided that the easiest way to create custom transitions was to attach the presentation type to the intent. 

I wanted to show the navigation from a parent screen to a child screen with a vertical transition, and the transition to a sibling screen with a push-animated horizontal transition. I created a presentation type and attached animation pairs that would perform the horizontal and vertical transitions. I then attached the presentation types to the applicable intents. 

When the user navigates from one activity to the next, the activity at the start of the transition sets the presentation type and the activity at the end of the transition knows the presentation type. The application can then use the information from the activities and the intent to create the transition. 

By binding the presentation type to the intent, I don’t have to create different functions for showing and dismissing an activity which streamlines the code. When the user goes back using the “up” navigation or the support action bar, it simply undoes the presentation type. From the user’s point of view, this simply completes the transition in reverse.

Now that I’ve figured out how to create my transitions, the next step in the process will be figuring out how I can make these transitions reusable without creating a massive inheritance. I can then work with the designers to choose the transitions that will best fit our final Android application.