Android navigation bar java

Bottom Navigation Bar in Android Applications

A Bottom Navigation View navigation tool enables users to explore and change to different views in an application. A Navigation Component is a set of libraries developed by Google to manage complex navigation functions like animations, transitions, etc.

Introduction

Bottom Navigation View makes applications more user-friendly during navigation. Before 2017, navigation to different fragments in an application used Fragment transactions. For applications with many fragments, writing fragment transactions became tedious.

Google developed the Navigation Component, which made the navigation process more manageable. Selecting a Bottom Navigation View icon enables users to switch to a selected view or refresh an active view.

We use a Bottom Navigation View when an application has the following:

A few popular mobile applications that use this navigation component are Instagram, Twitter, Youtube, etc.

Structure of a Bottom Navigation Bar

A Bottom Navigation bar is a container that contains the following:

• Inactive icon.
• Inactive text label (optional).
• Active icon.
• Active text label.

Structure of a Navigation Component

A navigation component consists of the following:

Advantages of a Bottom Navigation View using a Navigation Component

• It makes applications more user friendly.
• It eases the development processes of an application.
• It enables implementing and handling Deep Linking.
• It allows the handling of fragment transactions.
• It Offers ViewModel support.
• It offers animations and transitions support.

Disadvantages of a Bottom Navigation View using a Navigation Component

• Applications with less than three destinations cannot use it.
• Limited to only Mobiles and Tablets.
• It is challenging to implement a TabLayout

Useful Terminology

• Bottom Navigation Bar — a navigation component that enables users to explore and change to different applications’ views.
• Dependency — a statement SDK that allows us to add an external library into our projects.
• Fragment — a fragment is a sub-activity which enables more modular activity design.
• Navigation Component — a resource file that contains information used for navigation.
• Navigation Graph — a resource file that contains all the destinations in an application together with the actions and logical connections required for navigation.
• NavHost — an empty container used to display destinations contained in the navigation graph.
• NavController — an object within the NavHost that manages navigation.

Prerequisites

• You should have Android Studio installed.
• It would be best to have basic knowledge of creating Android applications.
• A basic knowledge and understanding of Java programming language and XML.

Step 1 – Create a New Project

• Open Android Studio. Select Start a new Android Studio project with an Empty Activity. We will name the project BottomNavigationBar. Click Finish and wait for the project to build.

Step 2 – Create a Navigation Graph

In this step, we will create a Navigation Graph. Add the following dependencies in your app module level build.gradle file:

dependencies   implementation 'androidx.navigation:navigation-fragment:2.3.1'  implementation 'androidx.navigation:navigation-ui:2.3.1'  implementation 'androidx.legacy:legacy-support-v4:1.0.0' > 

Right-click the res directory, click New → Android Resource File . A menu will pop up.

We will name our resource file nav_graph.. For the Resource Type, select Navigation and then click OK . Next, we will add the destinations.

Structure of a destination

• Name — indicates whether a destination is as an activity, fragment, or a custom class.
• Label — name of the destination’s layout resource file.
• ID — contains an ID used to refer to a destination.
• Layout – the layout resource file of a destination.

  xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  xmlns:tools="http://schemas.android.com/tools"  android:id="@+id/mobile_navigation"  app:startDestination="@+id/navigation_home">     android:id="@+id/navigation_home"  android:name="com.example.bottomnavigationbar.home"  android:label="@string/title_home"  tools:layout="@layout/fragment_home" />     android:id="@+id/navigation_favourites"  android:name="com.example.bottomnavigationbar.favourites"  android:label="@string/title_favourites"  tools:layout="@layout/fragment_favourites" />     android:id="@+id/navigation_search"  android:name="com.example.bottomnavigationbar.search"  android:label="@string/title_search"  tools:layout="@layout/fragment_search" />     android:id="@+id/navigation_profile"  android:name="com.example.bottomnavigationbar.profile"  android:label="@string/title_profile"  tools:layout="@layout/fragment_profile" />  

Step 3 – Create a Bottom Navigation View

In this step, we will add the Bottom Navigation View to our activity’s resource file. Add a Bottom Navigation View and a NavHost in your XML Layout file.

  xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  android:id="@+id/myContainer"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:paddingTop="?attr/actionBarSize"  android:background="@color/white">     android:id="@+id/bottomNav_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_menu" />     android:id="@+id/navHostFragment"  android:name="androidx.navigation.fragment.NavHostFragment"  android:layout_width="match_parent"  android:layout_height="match_parent"  app:defaultNavHost="true"  app:layout_constraintBottom_toTopOf="@id/bottomNav_view"  app:layout_constraintLeft_toLeftOf="parent"  app:layout_constraintRight_toRightOf="parent"  app:layout_constraintTop_toTopOf="parent"  app:navGraph="@navigation/nav_graph" />  

A NavHost is an empty container used to display destinations from the navigation graph.

Note: An error for app:menu=»@menu/bottom_nav_menu» is seen. This is because it does not exist. To solve this, click Alt + Enter and select “Create resource file for bottom_nav_menu.xml”

Select OK and the error is fixed.

Step 4 — Creating a Fragment

A Fragment is a sub-activity. Fragments are used to simplify the reuse of components and logic in different layouts. First, navigate to the Java directory and right-click. Select New → Fragment → Fragment(Blank) .

Name the Fragment and select Finish.

Step 5 — Adding Details and Icons to the Bottom Navigation View

First, let us add the icons required. In the res/drawable directory, right-click the drawable folder.

• Asset type — provides an option of using a clipart or uploading a local file.
• Name — name of the icon.
• Size — the dimensions of the clipart
• Color — provides color options for the clipart.
• Opacity — deals with the visibility of the icon.

Select the icon next to clipart. A list of different clipart is displayed.

One can search for a clipart in the search bar and choose whether the design of the clipart should be filled or outlined. We will use the outlined design.

Once a clipart is selected, click OK → Next → Finish . Open the menu file in res/menu/bottom_navigation_menu and add the following lines of code:

  xmlns:android="http://schemas.android.com/apk/res/android">     android:id="@+id/navigation_home"  android:icon="@drawable/ic_outline_home_24"  android:title="@string/title_home" />    android:id="@+id/navigation_search"  android:icon="@drawable/ic_outline_search_24"  android:title="@string/title_search" />    android:id="@+id/navigation_favourites"  android:icon="@drawable/ic_baseline_favorite_border_24"  android:title="@string/title_favourites" />    android:id="@+id/navigation_profile"  android:icon="@drawable/ic_baseline_perm_identity_24"  android:title="@string/title_profile" />  

The menu file serves as a container for menu items. Item represents one item on the menu. Each item has a title and an icon.

Step 6 — Let’s Code.

In our MainActivity.java add the following lines of code below:

First, we will initialize the Bottom Navigation view in the Activity’s onCreate method. Next, we will initialize an AppBarConfiguration object.

It is used to manage the behavior of the icons in the Navigation View. We will then pass the ID of the different destinations in the Bottom Navigation View.

Lastly, we will set up the NavController and link it with the Bottom Navigation View.

 //Initialize Bottom Navigation View.  BottomNavigationView navView = findViewById(R.id.bottomNav_view);   //Pass the ID's of Different destinations  AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(  R.id.navigation_home, R.id.navigation_favourites, R.id.navigation_profile, R.id.navigation_search )  .build();   //Initialize NavController.  NavController navController = Navigation.findNavController(this, R.id.navHostFragment);  NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);  NavigationUI.setupWithNavController(navView, navController); 

We are done! Let’s run the app.

Access the source code on Github.

Download the sample APK on this Google Drive.

To Wrap Up

We just went through the advantages and disadvantages of a Bottom Navigation View and we went through how to integrate a Bottom Navigation View using a Navigation Component to add the Navigation Views in an Android application.

Peer Review Contributions by: Linus Muema

Источник

Bottom Navigation Bar in Android

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, let’s learn how to implement such a functional Bottom Navigation Bar in the Android app. Below is the preview of a sample Bottom Navigation Bar:

Why do we need a Bottom Navigation Bar?

• It allows the user to switch to different activities/fragments easily.
• It makes the user aware of the different screens available in the app.
• The user is able to check which screen are they on at the moment.

The following is an anatomy diagram for the Bottom Navigation Bar:

Steps for Creating Bottom Navigation Bar

Step 1: Create a new Android Studio project

Step 2: Adding the dependency to the build.gradle(:app) file

We will be using Android’s Material Design Library so we need to import it in the build.gradle(:app) file. Here’s the dependency we need to add:

Step 3: Working with activity_main.xml file

For this example, create a basic app with a FrameLayout and a Bottom Navigation Bar. The FrameLayout will contain Fragments which will change as the user click on the items in the Bottom Navigation Bar. This is how the activity_main.xml looks like:

XML

Step 4: Creating a menu for the Bottom Navigation Bar

The Navigation Bar needs to have some items which will create using Menu. To create a Menu, first, create a Menu Directory by clicking on the app -> res(right-click) -> New -> Android Resource Directory and select Menu in the Resource Type.

To create a Menu Resource File , click on the app -> res -> menu(right-click) -> New -> Menu Resource File and name it bottom_nav_menu.

Now the user can create as many items as he wants in the bottom_nav_menu.xml file. The user also needs to create an icon for each of these items. To create an icon, click on the app -> res -> drawable(right-click) -> New -> Image Asset.

In the window that opens, the user can name the icon whatever he wants but it should not comprise any uppercase letter. The user can select the icon he wants by searching it and when the user is done, click Next-> Finish.

Now add these items in the bottom_nav_menu.xml. This is how the bottom_nav_menu.xml file looks like after adding the items:

Источник