Bottom Navigation With Drawer Android Studio Tutorial

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

BottomNavigationBar

Why do we need a
Bottom Navigation Kafe?

  • 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:

BottonNavigationView

Steps for Creating Bottom Navigation Restoran

Step 1: Create a new Android Bengkel seni project

To create a new project in Android Bengkel seni please refer to
How to Create/Mulai a New Project in Android Studio.

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:

implementation ‘com.google.android.material:material:1.2.0’

Step 3: Working with activity_main.xml file

For this example, create a basic app with a
FrameLayout
and a
Bottom Navigation Kafe. TheFrameLayout
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

<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>

<
androidx.constraintlayout.widget.ConstraintLayout


android:layout_width
=
"match_parent"


android:layout_height
=
"match_parent"


tools:context
=
".MainActivity"
>


<
FrameLayout


android:id
=
"@+id/flFragment"


android:layout_width
=
"match_parent"


android:layout_height
=
"0dp"


app:layout_constraintBottom_toTopOf
=
"@+id/bottomNavigationView"


app:layout_constraintEnd_toEndOf
=
"parent"


app:layout_constraintHorizontal_bias
=
"0.5"


app:layout_constraintStart_toStartOf
=
"parent"


app:layout_constraintTop_toTopOf
=
"parent"
/>


<
com.google.android.material.bottomnavigation.BottomNavigationView


android:id
=
"@+id/bottomNavigationView"


android:layout_width
=
"match_parent"


android:layout_height
=
"75dp"


app:layout_constraintBottom_toBottomOf
=
"parent"


app:layout_constraintEnd_toEndOf
=
"parent"


app:layout_constraintHorizontal_bias
=
"0.5"


app:layout_constraintStart_toStartOf
=
"parent"


app:menu
=
"@menu/bottom_nav_menu"
/>

</
androidx.constraintlayout.widget.ConstraintLayout
>

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
.

Menu Directory

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

menu resource file

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.

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:

XML

<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>


<
item


android:id
=
"@+id/person"


android:title
=
"Person"


android:icon
=
"@drawable/ic_person_foreground"
/>


<
item


android:id
=
"@+id/home"


android:title
=
"Home"


android:icon
=
"@drawable/ic_home_foreground"
/>


<
item


android:id
=
"@+id/settings"


android:title
=
"Settings"


android:icon
=
"@drawable/ic_settings_foreground"
/>

</
menu
>

Step 5: Changing the Action Bar style

Since we are using
Google’s Material Design Library, we need to change the action kantin’s style to use the same library otherwise the Bottom Navigation Bar will be black and its items will be invisible. To change it, navigate to
styles.xml
by clicking on the
app
->
res
->
values
->
styles.xml
and change the
style
opening tag as:

 <style name=”AppTheme” parent=”Theme.MaterialComponents.Light.DarkActionBar”>

This is how the
styles.xml
file looks like:

XML

<
resources
>


<
style
name
=
"AppTheme"
parent
=
"Theme.MaterialComponents.Light.DarkActionBar"
>


<
item
name
=
"colorPrimary"
>@color/colorPrimary</
item
>


<
item
name
=
"colorPrimaryDark"
>@color/colorPrimaryDark</
item
>


<
item
name
=
"colorAccent"
>@color/colorAccent</
item
>


</
style
>

</
resources
>

Step 6: Creating Fragments to display

Now that we have our Bottom Navigation Bar, we would want it to be functional by taking us to a different fragment/activity when an item is clicked. In this example, create a fragment for each item and navigate to them whenever a corresponding item is clicked. Since we created three items in the Bottom Navigation Kafe, we will be creating three Fragments. To create a Fragment, click on the
app(right-click) ->
New
->
Fragment
->
Fragment (Blank)
. Name the fragment as
FirstFragment
and the corresponding XML file as
fragment_first. To keep things simple, all three of the fragments will just contain a
TextView. However, we can tweak this as we want it to be in the app. This is how the
fragment_first.xml
looks like after adding a
TextView:

XML

<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>

<
androidx.constraintlayout.widget.ConstraintLayout


android:layout_width
=
"match_parent"


android:layout_height
=
"match_parent"


tools:context
=
".MainActivity"
>


<
TextView


android:id
=
"@+id/firstFragment"


android:layout_width
=
"wrap_content"


android:layout_height
=
"wrap_content"


android:text
=
"Geeks for Geeks"


android:textColor
=
"#43a047"


android:textSize
=
"40sp"


android:textStyle
=
"italic|bold"


app:layout_constraintBottom_toBottomOf
=
"parent"


app:layout_constraintEnd_toEndOf
=
"parent"


app:layout_constraintHorizontal_bias
=
"0.5"


app:layout_constraintStart_toStartOf
=
"parent"


app:layout_constraintTop_toTopOf
=
"parent"
/>

</
androidx.constraintlayout.widget.ConstraintLayout
>

Next, code the
FirstFragment
to display the
fragment_first.xml. For this, delete all the previously written code in
FirstFragment
and replace it with the below code. The below code just takes the layout we created for our fragment and inflates it.


Note:
If we want our fragment to have any logic or perform any task, we will add that code in our

FirstFragment.

Kotlin

import
androidx.fragment.app.Fragment

class
FirstFragment:Fragment(R.layout.fragment_first) {

}

Java

import
java.io.*;

import
androidx.fragment.app.Fragment

public
class
FirstFragment

extends
Fragment {


public
FirstFragment(){


}


@Override


public
View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


return
inflater.inflate(R.layout.fragment_first, container,

false
);


}

}

Similarly, create two more fragments for the remaining two items. Below are the
fragment_second.xml, SecondFragment, fragment_third.xml, and
ThirdFragment
files respectively.

XML

<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>

<
androidx.constraintlayout.widget.ConstraintLayout


android:layout_width
=
"match_parent"


android:layout_height
=
"match_parent"


tools:context
=
".MainActivity"
>


<
TextView


android:id
=
"@+id/secondFragment"


android:layout_width
=
"wrap_content"


android:layout_height
=
"wrap_content"


android:text
=
"Data Structures"


android:textColor
=
"#43a047"


android:textSize
=
"40sp"


android:textStyle
=
"italic|bold"


app:layout_constraintBottom_toBottomOf
=
"parent"


app:layout_constraintEnd_toEndOf
=
"parent"


app:layout_constraintHorizontal_bias
=
"0.5"


app:layout_constraintStart_toStartOf
=
"parent"


app:layout_constraintTop_toTopOf
=
"parent"
/>

</
androidx.constraintlayout.widget.ConstraintLayout
>

Kotlin

import
androidx.fragment.app.Fragment

class
SecondFragment:Fragment(R.layout.fragment_second) {

}

Java

import
androidx.fragment.app.Fragment;

import
java.io.*;

public
class
SecondFragment

extends
Fragment {


public
SecondFragment(){


}


@Override


public
View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


return
inflater.inflate(R.layout.fragment_second, container,

false
);


}

}

XML

<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>

<
androidx.constraintlayout.widget.ConstraintLayout


android:layout_width
=
"match_parent"


android:layout_height
=
"match_parent"


tools:context
=
".MainActivity"
>


<
TextView


android:id
=
"@+id/thirdFragment"


android:layout_width
=
"wrap_content"


android:layout_height
=
"wrap_content"


android:text
=
"Algorithms"


android:textColor
=
"#43a047"


android:textSize
=
"40sp"


android:textStyle
=
"italic|bold"


app:layout_constraintBottom_toBottomOf
=
"parent"


app:layout_constraintEnd_toEndOf
=
"parent"


app:layout_constraintHorizontal_bias
=
"0.5"


app:layout_constraintStart_toStartOf
=
"parent"


app:layout_constraintTop_toTopOf
=
"parent"
/>

</
androidx.constraintlayout.widget.ConstraintLayout
>

Kotlin

import
androidx.fragment.app.Fragment

class
ThirdFragment:Fragment(R.layout.fragment_third) {

}

Java

import
androidx.fragment.app.Fragment;

import
java.io.*;

public
class
ThirdFragment

extends
Fragment {


public
ThirdFragment(){


}


@Override


public
View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


return
inflater.inflate(R.layout.fragment_third, container,

false
);


}

}

Step 7: Working with the MainActivity file

Now we have everything that we need and lastly, we just need to code the
MainActivity
to connect everything to the application. Here, first, create a function called

setCurrentFragment()


that takes a Fragment as an argument and sets it in our
FrameLayout
of
activity_main.xml
file. Add a click listener to the items of the Bottom Navigation Bar so that we display the corresponding Fragment when an item is clicked. After adding all these codes, the
MainActivity
looks like this:

Kotlin

import
androidx.appcompat.app.AppCompatActivity

import
android.os.Bundle

import
androidx.fragment.app.Fragment

import
kotlinx.android.synthetic.main.activity_main.*

class
MainActivity : AppCompatActivity() {


override fun onCreate(savedInstanceState: Bundle?) {


super
.onCreate(savedInstanceState)


setContentView(R.layout.activity_main)


val firstFragment=FirstFragment()


val secondFragment=SecondFragment()


val thirdFragment=ThirdFragment()


setCurrentFragment(firstFragment)


bottomNavigationView.setOnNavigationItemSelectedListener {


when(it.itemId){


R.id.home->setCurrentFragment(firstFragment)


R.id.person->setCurrentFragment(secondFragment)


R.id.settings->setCurrentFragment(thirdFragment)


}


true


}


}


private
fun setCurrentFragment(fragment:Fragment)=


supportFragmentManager.beginTransaction().apply {


replace(R.id.flFragment,fragment)


commit()


}

}

Java

import
java.io.*;

import
androidx.appcompat.app.AppCompatActivity;

import
androidx.annotation.NonNull;

import
com.example.Fragment.*;

import
com.google.android.material.bottomnavigation.BottomNavigationView;

import
android.os.Bundle;

import
android.view.MenuItem;

public
class
MainActivity

extends
AppCompatActivity

implements
BottomNavigationView.OnNavigationItemSelectedListener {


BottomNavigationView bottomNavigationView;


@Override


protected
void
onCreate(Bundle savedInstanceState) {


super
.onCreate(savedInstanceState);


setContentView(R.layout.activity_main);


bottomNavigationView = findViewById(R.id.bottomNavigationView);


bottomNavigationView.setOnNavigationItemSelectedListener(
this
);


bottomNavigationView.setSelectedItemId(R.id.person);


}


FirstFragment firstFragment =

new
FirstFragment();


SecondFragment secondFragment =

new
SecondFragment();


ThirdFragment thirdFragment =

new
ThirdFragment();


@Override


public
boolean
onNavigationItemSelected(
@NonNull
MenuItem item) {


switch
(item.getItemId()) {


case
R.id.person:


getSupportFragmentManager().beginTransaction().replace(R.id.container, firstFragment).commit();


return
true
;


case
R.id.home:


getSupportFragmentManager().beginTransaction().replace(R.id.container, secondFragment).commit();


return
true
;


case
R.id.settings:


getSupportFragmentManager().beginTransaction().replace(R.id.container, thirdFragment).commit();


return
true
;


}


return
false
;


}

}

Output:

Source: https://www.geeksforgeeks.org/bottom-navigation-bar-in-android/