Implement The BottomNavigationView In Xamarin.android

Introduction

In this article, I have explained the BottomNavigationViewin Xamarin.Android. Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations.

The bar contents can be populated by specifying a menu resource file. Each menu item title, icon, and enabled state will be used for displaying bottom navigation bar items. Menu items can also be used for programmatically selecting which destination is currently active. It can be done using MenuItem #setChecked(true)

Requirement

Install-Package Xamarin.Google.Android.Material -Version 1.4.0

Step 1

Create the BottomNavigationView design in required XML files like below and define the content page as required.

<?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"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <FrameLayout
       android:id="@+id/content_frame"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_above="@+id/bottom_navigation"/>
       <com.google.android.material.bottomnavigation.BottomNavigationView
           android:id="@+id/bottom_navigation"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_alignParentBottom="true"
           app:itemIconSize="40dp"
           app:elevation="10dp"
           app:labelVisibilityMode="unlabeled"
           app:menu="@menu/bottom_nav_menu" />
</RelativeLayout>

JavaScript

Copy

Step 2

Create the bottom_nav_menu.xml and write the selected tab logic with resource id as below,

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_network" android:enabled="true" android:icon="@drawable/ic_network" app:showAsAction="ifRoom" />
    <item android:id="@+id/action_vpn" android:enabled="true" android:icon="@drawable/ic_vpn" android:showAsAction="ifRoom" />
</menu>

JavaScript

Copy

Step 3

I have created the two XML fragment pages and navigating with the selected BottomNavigationView defined item id as below,

[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = false)]
public class MainActivity: AppCompatActivity {
        public static BottomNavigationView bottomnavigation;
        protected override void OnCreate(Bundle savedInstanceState) {
            try {
                base.OnCreate(savedInstanceState);
                Xamarin.Essentials.Platform.Init(this, savedInstanceState);
                SetContentView(Resource.Layout.activity_main);
                bottomnavigation = (BottomNavigationView) FindViewById(Resource.Id.bottom_navigation);
                bottomnavigation.NavigationItemSelected += NavigationItemSelected;
                LoadFragment(Resource.Id.action_network);
            } catch (Exception ex) {}
        }
        public void NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e) {
            LoadFragment(e.Item.ItemId);
        }
        public void LoadFragment(int id) {
            var frag = SupportFragmentManager.BeginTransaction();
            switch (id) {
                case Resource.Id.action_vpn:
                    VpnFragment vpnFragment = new VpnFragment();
                    frag.Replace(Resource.Id.content_frame, vpnFragment);
                    break;
                case Resource.Id.action_network:
                    NetworkFragment networkFragment = new NetworkFragment();
                    frag.Replace(Resource.Id.content_frame, networkFragment);
                    break;
            }
            frag.Commit();
        }

C#

Copy

Step 4

Create the two-fragment page VpnFragment.cs with content resource network_layout and NetworkFragment.cs with content resource vpn_layout as below,

public class NetworkFragment: AndroidX.Fragment.App.Fragment {
    View view;
    RecyclerView recyclerView;
    TextView txtDownSpeed, txtUpSpeed, txtNetworkType;
    private long mStartRX = 0;
    private long mStartTX = 0;
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.Inflate(Resource.Layout.network_layout, container, false);
        return view;
    }
}
public class VpnFragment: AndroidX.Fragment.App.Fragment {
    View view;
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.Inflate(Resource.Layout.vpn_layout, container, false);
        return view;
    }
}

C#

Copy

OUTPUT

Hopefully, this article has given you sufficient information for you to start creating your BottomNavigationView in your Xamarin.Android application. Feel free to leave a comment if you would like me to further elaborate on anything within this article.