Bottom Navigation Bar

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorPrimary" />

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="@menu/bottom_navigation" />
</LinearLayout>
</RelativeLayout>
MainActivity.java
package in.hindicode.example;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.FrameLayout;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationBarView;

public class MainActivity extends AppCompatActivity {

private FrameLayout frameLayout;
private BottomNavigationView bottomNavigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Initializing widgets
frameLayout = findViewById(R.id.frameLayout);
bottomNavigationView = findViewById(R.id.bottomNavigation);

// Setting default fragment
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new HomeFragment()).commit();
}

// Bottom Navigation
bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
// Getting MenuItem id in a variable
int id = menuItem.getItemId();

// If else if statement for fragment
if (id == R.id.bottom_nav_home) {
getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new HomeFragment()).commit();
} else if (id == R.id.bottom_nav_account) {
getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new AccountFragment()).commit();
} else if (id == R.id.bottom_nav_setting) {
getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new SettingFragment()).commit();
}
return true;
}
});
}
}
bottom_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/bottom_nav_home"
android:icon="@drawable/ic_home"
android:title="Home" />
<item
android:id="@+id/bottom_nav_account"
android:icon="@drawable/ic_account"
android:title="Account" />
<item
android:id="@+id/bottom_nav_setting"
android:icon="@drawable/ic_setting"
android:title="Setting" />
</menu>

Fragments xml files

fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/tomato"
android:gravity="center"
tools:context=".HomeFragment">

<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="Home Fragment"
android:textColor="@color/white"
android:gravity="center"/>
</LinearLayout>
fragment_account.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/green"
android:gravity="center"
android:orientation="vertical"
tools:context=".AccountFragment">

<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Account Fragment"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
fragment_setting.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue_dark"
android:gravity="center"
android:orientation="vertical"
tools:context=".SettingFragment">

<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Setting Fragment"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>

Fragments Java files

HomeFragment.java
package in.hindicode.example;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class HomeFragment extends Fragment {

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

// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_home, container, false);
}
}
AccountFragment.java
package in.hindicode.example;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class AccountFragment extends Fragment {

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

// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_account, container, false);
}
}
SettingFragment.java
package in.hindicode.example;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SettingFragment extends Fragment {

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

// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_setting, container, false);
}
}

Video for Bottom Navigation Bar

Article By: Brajlal Prasad
Created on: 30 Apr 2024  710  Views
 Print Article
Report Error

If you want to report an error, or any suggestion please send us an email to [email protected]

Financial Calculator

Financial Calculator

Take control of your finances with our powerful Financial Calculator app—calculate loans, SIP, PPF, NPS and more all in one place!

Play Store