--- title: Navigation Architecture Component. Android answer to iOS Storyboards? description: What are the secrets of the Navigation Architecture Component? Is Android responding to Apple's iOS Storyboards? Read more in our article! image: https://blog-hubspot.railwaymen.org/hubfs/pexels-photo-297755-1920x1254.jpg --- [![Railwaymen](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/Railwaymen_September2018/Images/logo_bia%C5%82e.png?width=260&height=70&name=logo_bia%C5%82e.png "Railwaymen")](https://railwaymen.org/) - [Blog Main Page](https://blog-hubspot.railwaymen.org) - [About Us](https://railwaymen.org/about-us) - [Our Work](https://railwaymen.org/case-studies) - [FAQ](https://railwaymen.org/our-ai-knowledge-base) - [Contact Us](https://railwaymen.org/contact-us) ![navigation architecture component. android answer to ios storyboards?](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/pexels-photo-297755-1920x1254.jpg?width=1320&name=pexels-photo-297755-1920x1254.jpg) [Mobile Development](https://blog-hubspot.railwaymen.org/tag/mobile-development) # Navigation Architecture Component. Android answer to iOS Storyboards? - [Agnieszka Piędzio](https://blog-hubspot.railwaymen.org/author/agnieszka-piedzio-senior-android-developer) - [16th November '18](https://blog-hubspot.railwaymen.org/the-navigation-architecture-component-android-answer-to-ios-storyboards) In this article, we will introduce to you the navigation architecture component. If you are wondering how Android answer to iOS Storyboards, read the text! ### **Table of Contents:** [1. Android Jetpack](https://blog-hubspot.railwaymen.org/the-navigation-architecture-component-android-answer-to-ios-storyboards#pa) [2. Navigation](https://blog-hubspot.railwaymen.org/the-navigation-architecture-component-android-answer-to-ios-storyboards#pb) [3. Overview of Navigation](https://blog-hubspot.railwaymen.org/the-navigation-architecture-component-android-answer-to-ios-storyboards#pc) [4. Principles of Navigation](https://blog-hubspot.railwaymen.org/the-navigation-architecture-component-android-answer-to-ios-storyboards#pd) [5. Conclusion](https://blog-hubspot.railwaymen.org/the-navigation-architecture-component-android-answer-to-ios-storyboards#pe) ## **Android Jetpack** Android Jetpack is the newly created set of libraries and tools that were presented on the latest Google I/O event in 2018. With the vast increase of libraries released, Google recently came up with the idea to combine the old and new ones and organize those into 4 categories: Foundation, Architecture, Behaviour and UI. The aim of the Android Jetpack is to standardize and simplify the code without losing backward compatibility. ![android jetpack component](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/android%20jetpack%20component.jpg?width=501&height=185&name=android%20jetpack%20component.jpg) The main advantage of Android Jetpack is that the library is not bound to any particular version of Android system. Thanks to that developers are able to use new features in older systems. The Jetpack libraries use modern design patterns with cleaner and better separation of responsibilities thus providing greater testability. In addition, those libraries fully support Kotlin that allows more concise, robust and clean code. What is important is that all of those features greatly work together and are easy to integrate.   ![android jetpack donut](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/jetpack_donut-4.jpg?width=501&height=253&name=jetpack_donut-4.jpg) Android Jetpack Components. Source: Google The release of Android Studio 3.2 gave us 5 new libraries: - **WorkManager** - alpha release - **Navigation** - alpha release - **Paging** - stable release - **Slices** - alpha release - **Android KTX (Kotlin Extensions)** - alpha release One of the most interesting components is the Navigation which we will cover here in greater detail. ## **Navigation** The Navigation Architecture is still in it's Alpha stage. That means that the functionality can change and there is a possibility that it can still contain some bugs. Despite that, Google has provided Android developers with the possibility to explore it's features. The early adopting developers can help and report all issues that they have to [Google Issue Tracker](https://issuetracker.google.com/issues?q=status:open). The navigation is one of the main components of the mobile application which needs to be solved constantly across different applications. The Jetpack Navigation component allows us to: define the flow of the screens, automatically builds the correct up/back behavior, use deep linking, allows passing arguments in a safe way, deals with the back stack and it can declare transitions between screens. Additionally, with the Android Studio 3.2 Google introduced the Navigation Editor tool which can be used in conjunction with the Navigation Component to inspect and define the app navigation flow. [![android studio navigation graph editor](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/Imported_Blog_Media/navigation-4.png?width=535&height=365&name=navigation-4.png)](https://github.com/googlesamples/android-architecture-components/tree/master/NavigationBasicSample) Android Studio’s new Navigation Graph Editor - the sample app Instead of manually creating the XML structure, we can use the graphical editor to generate it. The editor may look very similar for developers that were using iOS Xcode storyboards editor. It's worth mentioning that the Navigation Editor is an experimental feature that is disabled by default. To enable it, we need to check that option under the Experimental tab in IDE Settings/Preferences. ![editor settings](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/Imported_Blog_Media/image1-4.png?width=501&height=303&name=image1-4.png) ## **Overview of Navigation** The basic elements that you need to implement to use the Navigation Component functionality are: Navigation Graph, NavHostFragment and NavController. Navigation Graph is an XML resource that contains the app navigation.To define the entry point we need to set the startDestination attribute in the main node. The navigation paths between fragments are defined using the destination attribute placed in node. ``` ``` In such an implementation, we define that we will navigate from blankFragment to blankFragment2. The next step to setup the app navigation is to implement the NavHostFragment in XML view. The NavHostFragment is a widget provided by the framework that you can add to your layout. After adding the NavHostFragment we need to link it to the Navigation Graph using the navGraph attribute. We can see an example of the implementation below: ``` ``` The last step to finish setup of the Navigation Controller is to implement the NavController class. The class is used when performing the navigation between destinations. To fetch the proper instance of the NavController class we can use one of three static methods: - NavHostFragment.findNavController(Fragment) - Navigation.findNavController(Activity, @IdRes int viewId) - Navigation.findNavController(View) Having the instance of NavController we can navigate to specific destination using the navigate() method. As the parameter we can use id of the action or id of the destination as in example: ``` navController.navigate(R.id.actionId) // or navController.navigate(R.id.destinationId) ``` The pros of using the action id instead of the resource id of the destination is that we can associate transition with our navigation. To sum up, you will use the NavController object to tell where you want to go or what specific path you want to take in your Navigation Graph. Then you will fetch the NavController instance and call a transition to the appropriate destination in the NavHostFragment. If you want to learn more about the implementation of the Navigation Architecture Component you can visit the [official android documentation site](https://developer.android.com/topic/libraries/architecture/navigation/navigation-implementing). ## **Principles of Navigation** At the end I would like to mention that if you are using Navigation Components for your navigation, you are adhering to the [Principles of Navigation](https://developer.android.com/topic/libraries/architecture/navigation/navigation-principles) officially established by Google: - The app should have a fixed starting destination. - A stack is used to represent the navigation state of an app. - The Navigation Up function never exits your app. - Up and Back should function identical in all the other cases. - Deep linking to a destination or navigating to the same destination should yield the same stack. Generally the aim of all navigation within the application should be clear and consistent usage experience which the Navigation Components enable us to do. ## **Conclusion** The main point of Navigation Component is to help developers implement and manage app navigation faster and more efficiently. It reduces the boilerplate code written by automatically building the correct up/back behavior, supports deep linking, gives developers the mechanism for safely passing arguments and transitions. Such amount of features looks very promising and inviting to use. The important question now is how the Navigation Component will be able to handle complex cases. Today, it is hard to predict such things but we will see how the Google developers will solve this. To add more, the Navigation Component is still in its alpha stage, containing a lot of bugs and the usage in production environments are heavily discouraged the Google. Fortunately for us, those issues are quickly addressed and more and more improvements are added. This is why I encourage you to experiment with the library and I am eagerly waiting for the stable release. [Mobile Development](https://blog-hubspot.railwaymen.org/tag/mobile-development) - Share: - - - - - ![Agnieszka Piędzio](https://blog-hubspot.railwaymen.org/hubfs/Author%20Images/agnieszka-piedzio.jpg) Author #### [Agnieszka Piędzio](https://blog-hubspot.railwaymen.org/author/agnieszka-piedzio-senior-android-developer) - Agnieszka (Senior Android Developer) is one of the employees from whom the Android has no secrets. Experienced worker who pays attention to details. ##### [![7 ways to make a mobile app successful - proven to keep users engaged](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/how%20to%20make%20a%20mobile%20app%20successful.jpg?width=305&name=how%20to%20make%20a%20mobile%20app%20successful.jpg) Related Article Business and Technology 7 Ways to Make a Mobile App Successful - Proven to Keep Users Engaged 12 min read Full Article](https://blog-hubspot.railwaymen.org/how-can-a-mobile-app-become-a-game-changer) ##### [![how gpt-5 will change your business and give you a competitive edge?](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/GPT-5%20(1).jpg?width=305&name=GPT-5%20(1).jpg) Related Article Business and Technology How GPT-5 will change your business and give you a competitive edge? 5 min read Full Article](https://blog-hubspot.railwaymen.org/gpt-5-revolution-business-advantage) ##### [![how to choose the best mobile app development company](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/the%20best%20Mobile%20App%20Development%20Company.jpg?width=305&name=the%20best%20Mobile%20App%20Development%20Company.jpg) Related Article Business and Technology How to Choose the Best Mobile App Development Company 12 min read Full Article](https://blog-hubspot.railwaymen.org/best-mobile-app-development-company) ## [![flutter - a modern open source sdk solution from google](https://blog-hubspot.railwaymen.org/hs-fs/hubfs/SDK%20Flutter%20presentation%20(1).jpg?width=1905&height=510&name=SDK%20Flutter%20presentation%20(1).jpg) Next Post --- Flutter - a modern open source SDK solution from Google Mobile Development](https://blog-hubspot.railwaymen.org/flutterlive) [![Railwaymen Logo](https://railwaymen.org/assets/svgs/rwm-logo-white-ae5182ba602bcbf3713fd6bb3a5288956e484b62ddf1c647e53f2fb72644913d.svg)](https://railwaymen.org) Railwaymen Sp. z o.o. Email: info@railwaymen.org NIP: 6793065841 [![European Funds Smart Growth](https://railwaymen.org/assets/icons/logos/unia-98bb8c7ed12fa79f2ddbe0e00b222213700102dba79748d59f43a304d9803de6.png)](https://railwaymen.org/grants) [Estimate Project](https://railwaymen.org/estimate-project) [Newsletter Subscribe](https://learn.railwaymen.org/newsletter) - - - - - - - ##### Company - [Services](https://railwaymen.org/services) - [Our Work](https://railwaymen.org/case-studies) - [About us](https://railwaymen.org/about-us) - [Blog](https://blog.railwaymen.org) - [Career](https://railwaymen.org/careers) - [Personal Data Protection](https://railwaymen.org/personal-data-protection) - [Cookies Policy](https://railwaymen.org/docs/Cookie_Policy.pdf) - Cookie Settings ##### Services - [Web Development](https://railwaymen.org/services/web-development) - [Mobile Development](https://railwaymen.org/services/mobile-development) - [Product Design](https://railwaymen.org/services/product-design) - [Discovery Phase](https://railwaymen.org/services/discovery-phase) - [MVP Development](https://railwaymen.org/services/mvp-development) - [Digital Transformation](https://railwaymen.org/services/digital-transformation) - [Social Networking Software](https://railwaymen.org/services/social-networking-software) - [Restaurant App Development](https://railwaymen.org/services/restaurant-app-development) - [Construction Sofware Development](https://railwaymen.org/services/construction-software-development) - [Custom Marketing Software Development](https://railwaymen.org/services/custom-marketing-software-development) - [FinTech App Development](https://railwaymen.org/services/fintech-development) ##### Our Experts Must - Reads - [Is Ruby on Rails Dead in 2025?](https://blog.railwaymen.org/is-ruby-on-rails-dead) - [How to Start an App Development Project? \[Checklist\]](https://blog.railwaymen.org/checklist-what-you-have-to-do-to-start-the-app-development-project) - [How to Build an MVP? \[5 Steps\]](https://blog.railwaymen.org/how-to-build-an-mvp) - [How Long Does it Take to Make An App in 2025?](https://blog.railwaymen.org/how-long-does-it-take-to-make-an-app) - [Agile Discovery Phase: a Must Have for Your Business](https://blog.railwaymen.org/why-a-discovery-phase-is-a-must-have-for-your-project) - [Railwaymen App Development Cost Breakdown - How Much do We Charge and Why?](https://blog.railwaymen.org/app-development-cost-breakdown) - [FAQ: Web & Mobile Development With Us Explained](https://blog.railwaymen.org/railwaymen-faq-web-and-mobile-development-with-us-explained) Awards [![Clutch Recognition Best B2B Companies Global](https://railwaymen.org/assets/awards/Top_B2B_Companies_Global_2018-5d1c8e5358737540e214ce8d51e450fe06ac4be35a0a220c0c2ccfa912787879.png)](https://clutch.co/profile/railwaymen)[![Clutch Recognition Best Ruby on Rails Developers](https://railwaymen.org/assets/awards/ClutchAward2021-013bdba335eecb6eb59319b0475d099899bbb2fa50e4596186ea2126d5b606af.png)](https://clutch.co/press-releases/recognizes-top-performing-development-companies-poland-2021)[![Clutch Top Ruby on Rails Developer Poland 2022](https://railwaymen.org/assets/awards/ClutchTopSoftwareDeveloperPoland_2022-d094b46bd3ce96c9355d21d0c6a05bc4f5959ec255f6815af8797c0a938a6b9e.png)](https://clutch.co/profile/railwaymen)[![Clutch Top React Native Developer Poland 2022](https://railwaymen.org/assets/awards/ClutchTopReactNativePoland_2022-a50094d73ac73fec5c868c5544048db746c9a086fcbe9e7dcf3644875c47762c.png)](https://clutch.co/profile/railwaymen)[![Clutch Top Ruby on Rails Developer Poland 2022](https://railwaymen.org/assets/awards/ClutchTopRubyOnRailsPoland_2022-dc90eec21384445755158dd53914b6e3ef947e75cfe6dba521822c73bd64b789.png)](https://clutch.co/profile/railwaymen)[![Clutch Top Software Developer Fintech 2022](https://railwaymen.org/assets/awards/ClutchTopSoftwareDeveloperFintech_2022-ba75658f45c04d38d0fa4f9dcbfc78e2982b62222d681d6dc3f2f40fe2cafc9b.png)](https://clutch.co/profile/railwaymen)[![Clutch B2B Services 2022](https://railwaymen.org/assets/awards/Best-PerformingB2B2022-4a7057260a703088e644083b31320fe6fdafbfe3491eadf7e9a711fa9e3f9174.png)](https://clutch.co/profile/railwaymen) [![Clutch Recognition Best App Development Company](https://railwaymen.org/assets/awards/TheClutch1000-a5cd5e3433659ee45539838fa945002f147b6ed9065166f8ba9ff56d216173eb.png)](https://blog.railwaymen.org/railwaymen-named-global-leaders-top-10-ruby-on-rails-developers-2018?_gl=1*1lggq91*_gcl_au*MTY4NzY2MDQ5Mi4xNzMxNDAxMDg4*_ga*MTY1MzUxNjI1Ni4xNzMxNDAxMDg4*_ga_1TW68M8Z6C*MTczMjcwMDE4Ny4xNi4xLjE3MzI3MDExMzYuMzIuMC4w)[![Top Software Development Company](https://railwaymen.org/assets/awards/Custom-Software-Development-Companies-1c56b8d73fbc48c21514311021c65f85a53cd955a3f910a9c2347a6c4a934b0f.png)](https://www.softwareworld.co/top-custom-software-development-companies/)[![Hire elite software development vendors at Pangea](https://railwaymen.org/assets/awards/Pangea-3db009da8ad6d19dfdafc66c51d16928730a715c3195776579bff5e0df4c13d4.png)](https://www.pangea.ai/vendors/railwaymen/)[![GoodFirms Badge](https://railwaymen.org/assets/awards/goodfirms-6880d7b6b80ee00d7189656a8236466571c5f94f146a8d42f5421d85f53b05df.svg)](https://www.goodfirms.co/company/railwaymen)[![Digital Knights](https://railwaymen.org/assets/awards/dk-8e9cb01c4fb52cd6dd812212e5d6925772aa6399c71d47387e3f8a8d5d58ac59.svg)](https://www.digitalknights.co/) Railwaymen locations - Kraków Na Zjeździe 11, 30-527 - San Francisco Silicon Valley Acceleration Center. 180 Sansome Street You can change your cookie settings at any time Close and don't show again © 2026 Railwaymen ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Agnieszka Piędzio", "url" : "https://blog-hubspot.railwaymen.org/author/agnieszka-piedzio-senior-android-developer" }, "dateModified" : "2025-03-22T13:35:27.467Z", "datePublished" : "2018-11-16T11:16:53.000Z", "headline" : "Navigation Architecture Component. Android answer to iOS Storyboards?", "image" : [ "https://blog-hubspot.railwaymen.org/hubfs/pexels-photo-297755-1920x1254.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog-hubspot.railwaymen.org/the-navigation-architecture-component-android-answer-to-ios-storyboards", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog-hubspot.railwaymen.org/hubfs/new%20website/rwm%20logotype.png" }, "name" : "Railwaymen Sp. z o.o." } } ```