Duenice

Bottom navigation bar with fragments in android studio

In this article, we’re going to set up a simple (but functional) bottom navigation bar with fragments in android studio. We’ll also show some features of, along with customizations, the Android system provides us with.

bottom navigation bar with fragments in android studio
bottom navigation bar with fragments in android studio

Step 1: Create a new Android Studio project

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

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

 

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

 

Step 3: Working with activity_main.xml file

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

 

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/tab_appbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:theme="@style/AppTheme.AppBarOverlay">

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways" />

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</RelativeLayout>

Step 4: Working with navigation.xml menu file

To show the bottom navigation menu items to make a bottom navigation menu Bar.

<?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/navigation_home"
        android:icon="@drawable/ic_baseline_home_24"
        android:title="Home" />

    <item
        android:id="@+id/navigation_favorite"
        android:icon="@drawable/ic_baseline_favorite_24"
        android:title="Favorite" />

    <item
        android:id="@+id/navigation_notification"
        android:icon="@drawable/ic_baseline_notification_24"
        android:title="Notificatio" />
</menu>

Step 5: Working with the MainActivity.java file

Now we have everything that we need and lastly, we just need to code the MainActivity.java to connect everything to the application. After adding all these codes, the MainActivity.java looks like this:

public class MainActivity extends AppCompatActivity implements com.google.android.gms.location.LocationListener {
 
    private ViewPager mViewPager;
    private BottomNavigationView navigation;
    int pager_number = 3;

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

        AppBarLayout appBarLayout = findViewById(R.id.tab_appbar_layout);
        ((CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams()).setBehavior(new AppBarLayout.Behavior());
        viewPager = findViewById(R.id.viewpager);
        viewPager.setAdapter(new MainMyAdapter(getSupportFragmentManager()));
        viewPager.setOffscreenPageLimit(pager_number);
        navigation = findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.navigation_home:
                        viewPager.setCurrentItem(0);
                        return true;
                    case R.id.navigation_favorite:
                        viewPager.setCurrentItem(1);
                        return true;
                    case R.id.navigation_notification:
                        viewPager.setCurrentItem(2);
                        return true;
                }
                return false;
            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (prevMenuItem != null) {
                    prevMenuItem.setChecked(false);
                } else {
                    navigation.getMenu().getItem(0).setChecked(false);
                }
                navigation.getMenu().getItem(position).setChecked(true);
                prevMenuItem = navigation.getMenu().getItem(position);

                if (viewPager.getCurrentItem() == 1) {
                    toolbar.setTitle("Favorite"));
                } else if (viewPager.getCurrentItem() == 2) {
                    toolbar.setTitle("Notification");
                } else if (viewPager.getCurrentItem() == 3) {
                } else {
                    toolbar.setTitle(R.string.app_name);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        if (Config.ENABLE_RTL_MODE) {
            viewPager.setRotationY(180);
        }

    public class MainMyAdapter extends FragmentPagerAdapter {

        public MainMyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return new HomeFragment();
                case 1:
                    return new FragmentFavorite();
                case 2:
                    return new FragmentNotification();
            }
            return null;
        }

        @Override
        public int getCount() {
            return pager_number;
        }
    }

}

Conclusion

Bottom navigation is one of the most natural ways for users to navigate through their apps. It’s been a default choice for the Android system from the beginning, but not for the apps. even though some apps (like Instagram) have been using it despite no guideline specifications.

As a result, the bottom view being added to the Material Design Guidelines has been a welcome improvement in my opinion, and I’m glad that bottom navigation has been proposed as one of the solutions for app navigation.

This was an article that teaches you how the use the corresponding bottom navigation through BottomNavigationView and how to incorporate it into something meaningful, like them ViewPager one that’s synced with it.

Exit mobile version