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.
Contents
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.