How To Set Navigation Bar In Android

The cloth design team at Google defines the functionality of bottom navigation bars in Android as follows:

Lesser navigation bars brand it easy to explore and switch between height-level views in a single tap.

Tapping on a lesser navigation icon takes you directly to the associated view or refreshes the currently agile view.

Co-ordinate to the official Fabric Design guidelines for the Android lesser navigation bar, it should be used when your app has:

three to 5 top-level destinations
destinations requiring straight access

An instance of a popular app that implements the lesser navigation bar is the Google Discover Android app from Google, which uses it to navigate to different destinations of the app. You can run into this yourself past downloading the Google Find app from the Google Play Store (if yous don't already take information technology on your device). The post-obit screenshot is from the Google Discover app displaying an Android lesser navigation bar.

Android Studio Bottom Navigation Bar Tutorial Screenshot of Google Discover App With Android Bottom Bar

In this post, you'll larn how to display card items inside a bottom navigation bar in Android. You will employ AndroidX navigation, which is function of the Jetpack suite of libraries. Jetpack is a suite of libraries to help developers write code that works consistently across Android versions and devices. As a bonus, yous'll besides learn how to employ Android Studio templates to bootstrap your project with a bottom navigation bar quickly.

Getting Started

Open Android Studio, create a new projection, and select a Blank Action template, as shown below. Select the Kotlin language from the drib-down carte du jour and click Stop. Await for Android Studio to cease creating the project resources.

Add Projection Dependencies

The outset thing before we get started is to add together the project dependencies. Open the app'due south build.gradle file and add the post-obit dependencies.

dependencies {     implementation 'androidx.legacy:legacy-support-v4:one.0.0'     def nav_version = "2.3.5"      //The residuum of the dependencies hither      // Kotlin     implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"     implementation "androidx.navigation:navigation-ui-ktx:$nav_version"  }

Create a Navigation Graph

Anavigation graph is an XML resource file that contains all of your awarding destinations and actions. Right-click on theres directory and selectNew > Android Resource File. Provide a name and selectNavigation as the resource type, and clickOK. The navigation graph gets placed in the navigation folder, every bit shown in the construction beneath.

Add together Destinations to the Navigation Graph

The navigation file will contain all the destinations of our application. To add a destination, click on the plus (+) sign at the meridian of the design tab or choose an existing destination if you have already created the fragments.

Our awarding will have three screens, namely:

Dwelling folio
Profile page
Settings page

Therefore, we will add iii destinations to the navigation XML file. To add a new destination, click the plus(+)sign and select theCreate new destinationselection. On the next screen, select a blank fragment and provide the details as shown below.

Repeat the aforementioned steps and create two additional fragments for the Contour andSettings screens. The final navigation graph XML now looks like this.

Each fragment has its layout, which y'all tin can customize as you wish. Beneath is how each fragment looks afterward adding a text view at the heart of each fragment.

Add together a Nav Host Fragment and Bottom Navigation View

Next, define a host fragment in the master layout (main_activity.xml). A nav host fragment is an empty container where destinations are swapped in and out every bit a user navigates through your app. We will also add the BottomNavigationView in the main layout, as shown below.

<?xml version="ane.0" encoding="utf-eight"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-motorcar"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity">          <fragment     android:id="@+id/nav_fragment"     android:proper noun="androidx.navigation.fragment.NavHostFragment"     android:layout_width="match_parent"     android:layout_height="match_parent"     app:defaultNavHost="truthful"     app:layout_constraintBottom_toTopOf="@id/bottom_navigatin_view"     app:layout_constraintLeft_toLeftOf="parent"     app:layout_constraintRight_toRightOf="parent"     app:layout_constraintTop_toTopOf="parent"     app:navGraph="@navigation/nav_graph " />        <com.google.android.fabric.bottomnavigation.BottomNavigationView         android:id="@+id/bottom_navigatin_view"         android:layout_width="0dp"         android:layout_height="wrap_content"         android:layout_marginStart="0dp"         android:layout_marginEnd="0dp"         android:background="?android:attr/windowBackground"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent" />    </androidx.constraintlayout.widget.ConstraintLayout>

Add Menu Items

The next step is to add carte items for the bottom navigation view. Right-click on the res directory, selectNew > Android Resource Fileand select carte du jour, provide a name and clickOK.

Open up the bill of fare XML file and add together three menu items, as shown below.

<?xml version="ane.0" encoding="utf-8"?> <bill of fare xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:android="http://schemas.android.com/apk/res/android">      <item android:title="Home" />     <item android:title="Profile" />     <item android:title="Setting" />  </menu>

Add Vector Avails to Card Items

A vector asset is an XML file that defines a virtual image in its file. Vector avails guarantee precipitous images which can exist resized to any screen size without losing their quality. To add together a vector asset, right-click onDrawable >New > Create Vector Asset and choose a dwelling icon for the dwelling menu as shown beneath.

Repeat the same steps and create vector avails for the rest of the card items. Add the vector avails to the corresponding card items equally shown beneath.

<?xml version="1.0" encoding="utf-viii"?> <card xmlns:app="http://schemas.android.com/apk/res-car"     xmlns:android="http://schemas.android.com/apk/res/android">      <item android:championship="Abode"         android:icon="@drawable/dwelling"/>     <item android:title="Profile"         android:icon="@drawable/contour"/>     <detail android:title="Setting"         android:icon="@drawable/settings"/>  </menu>

The next step is to add id attributes to each carte item. The carte du jour particular'south id should be the aforementioned every bit the id of the navigation graph destinations in social club to allow navigation throughout the fragments.

<?xml version="1.0" encoding="utf-8"?> <carte du jour xmlns:app="http://schemas.android.com/apk/res-machine"     xmlns:android="http://schemas.android.com/apk/res/android">      <item         android:id="@+id/homeFragment"         android:championship="Dwelling house"         android:icon="@drawable/abode"/>     <item         android:id="@+id/profileFragment"         android:title="Profile"         android:icon="@drawable/profile"/>     <particular         android:id="@+id/settingsFragment"         android:title="Setting"         android:icon="@drawable/settings"/>  </menu>

Add Menu Item to Bottom Navigation View

The last step is to add the menu to the bottom navigation view. Openmain_activity.xml and add the app:carte du jour="@menu/bottom_nav" aspect to theBottomNvigationView.

<com.google.android.material.bottomnavigation.BottomNavigationView         android:id="@+id/bottom_navigatin_view"         android:layout_width="0dp"         android:layout_height="wrap_content"         android:layout_marginStart="0dp"         android:layout_marginEnd="0dp"         android:background="?android:attr/windowBackground"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:menu="@menu/bottom_nav" />

About the Nav Controller

TheNavController is an object that manages app navigation within aNavHost. Information technology coordinates the swapping of fragments equally users move through your app. In the master activity class, call setupWithNavController() from your main activity'sonCreate() method, as shown below.

form MainActivity : AppCompatActivity() {     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContentView(R.layout.activity_main)          //Initialize the bottom navigation view         //create lesser navigation view object         val bottomNavigationView = findViewById<BottomNavigationView                 >(R.id.bottom_navigatin_view)         val navController = findNavController(R.id.nav_fragment)         bottomNavigationView.setupWithNavController(navController         )       } }

Final App

The concluding app should now await like this:

Bonus: Using Android Studio Templates

Now that you've learnt near the APIs involved to create a bottom navigation bar from scratch in Android, I'll testify you a shortcut that will make information technology faster next time. Yous can but use a template instead of coding a navigation bar from scratch.

Android Studio provides code templates that follow the Android design and development all-time practices. These existing lawmaking templates (available in Java and Kotlin) tin help you quickly kicking-start your projection. Ane such template tin exist used to create a bottom navigation bar.

To apply this handy feature for a new project, kickoff fire up Android Studio.

Bottom Navigation Bar Tutorial Create Android Project dialog

Enter the application proper name and click theNext button. Y'all tin go out the defaults as they are in theTarget Android Devices dialog.

Click theAdjacent push button again.

In theAdd an Activity to Mobile dialog, selectBottom Navigation Activity.Click theNext button once more after that.

In the last dialog, you lot can rename the Activity, or change its layout proper noun or title if yous want. Finally, click theFinish push to accept all configurations.

Android Studio has now helped us to create a projection with a bottom navigation activity. Actually cool! You're strongly brash to explore the lawmaking generated.

In an existing Android Studio project, to use this template, merely go toFile > New > Activity > Lesser Navigation Activity.

Tiptop Android App Templates From CodeCanyon

Note that the templates that come included with Android Studio are good for uncomplicated layouts and making basic apps, just if you want to really kick-beginning your app, y'all might consider some of the app templates available from Envato Market.

They're a huge time-saver for experienced developers, helping them to cutting through the slog of creating an app from scratch and focus their talents instead on the unique and customised parts of creating a new app.

Let'south look at a few cool templates that will let you lot put your new Android bottom navigation bar coding skills to adept use.

1. Android App Builder: WooCommerce, WebView, WordPress and Much More

Creating native Android apps couldn't become simpler. The Android App builder template lets you lot plow your online presence into piece of cake-to-use mobile experiences. Plough your WooCommerce store, WordPress weblog, or HTML5 website into an app, with no coding experience necessary. Utilize the included tutorial to learn how to complete your app project.

2. RocketWeb: Configurable Android WebView App Template

Looking to create a stylish Android WebView app? Save yourself some time and hassle by using the RocketWeb template. Yous won't need any programming skills to get the well-nigh from this download. Just open information technology in Android Studio and first customising. Tweak the Kotlin lesser navigation bar for Android, the colours, and a whole lot more than with RocketWeb.

RocketWeb Web View Android App Template

3. Dating App for Web, iOS and Android

Connections are in the air with the Dating App template. It was built in Android Studio and Xcode with Swift, and so y'all can accept both an Android and an iOS app. On tiptop of the modern lesser navigation bar for Android and iOS, Dating App as well features:

unproblematic image gallery
Facebook signup
upgrades, AdMob banner, and in-app purchases
messaging and friends arrangement

4. AdForest: Classified Native Android App

Allow users take the classified section on the go with AdForest. Users will exist able to speedily sign up and verify their accounts with their mobile numbers. Once in, they can search for products, find nearby listings, bulletin vendors for more data, and a whole lot more than. Information technology's as easy to set up equally it is to navigate.

AdForest Classified Ads Android App Template

5. MaterialX: Android Textile Design UI Components

This Android app template is the perfect bundle for developers. It features all types of useful UI design elements to consummate your projects. At that place are more 315 unique layouts that come in more than than 31 categories. Some of the included components are:

Android lesser navigation bars
buttons, chips, and cards
dialog boxes
grids and lists
navigation drawer menus

MaterialX Android UI Component Templates

Find More Android App Templates From Envato Tuts+

The higher up templates are great premium options in their own right. But they're far from the only ones available to you! Our instructors have rounded up some of the all-time Android app templates from CodeCanyon that you should check out. No matter the niche, y'all can find a squeamish Android template that suits your needs from Envato Tuts+:

Conclusion

In this tutorial, you learned how to create a bottom navigation bar in Android from scratch, using Jetpack navigation. We also explored how to hands and quickly apply the Android Studio templates to create a bottom navigation activity.

I highly recommend checking out the official material pattern guidelines for bottom navigation confined to learn more about how to properly design and utilise the bottom navigation bar in Android.

To learn more about coding for Android, cheque out some of our other courses and tutorials here on Envato Tuts+!

This post has been updated with contributions from Nathan Umoh and Esther Vaati. Nathan is a staff writer for Envato Tuts+. Esther is a software developer and author for Envato Tuts+.