Android BottomNavigationView Tutorial.
This is an android bottomnavigationview tutorial and examples. We start by seeing what BottomNavigation is as a general design pattern, then see the BottomNavigationView for android, then look at some examples.
What is BottomNavigationView
BottomNavigationView is a navigation bar or view designed to sit at the bottom of your page with clickable tabs. It implements material design bottom navigation guidelines.
With BottomNavigationViews, users can easily switch and explore top-level pages with single taps. According to the material design guidelines, it should be used when application has three to five top-level destinations. That means you assign your BottomNavigationView three to five bottom navigation items.
Video Tutorial
Here’s an equivalent video tutorial.
MainActivity.java
Here is our main activity file. This is the only java we write in this example.
package info.camposha.bottomnavigationexample; import android.support.annotation.NonNull; import android.support.design.widget.BottomNavigationView; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MenuItem; import android.view.View; import android.widget.TextView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final TextView newsTextView = findViewById(R.id.newsTextView); final TextView techTextView = findViewById(R.id.techTextView); final TextView entertainmentTextView = findViewById(R.id.entertainmentTextView); BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation); bottomNavigationView.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_news: newsTextView.setVisibility(View.VISIBLE); techTextView.setVisibility(View.GONE); entertainmentTextView.setVisibility(View.GONE); break; case R.id.action_tech: newsTextView.setVisibility(View.GONE); techTextView.setVisibility(View.VISIBLE); entertainmentTextView.setVisibility(View.GONE); break; case R.id.action_entertainment: newsTextView.setVisibility(View.GONE); techTextView.setVisibility(View.GONE); entertainmentTextView.setVisibility(View.VISIBLE); break; } return false; } }); } }
activity_main.xml
Here’s our main activity’s layout.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android_layout_width="match_parent" android_layout_height="match_parent"> <TextView android_id="@+id/newsTextView" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_centerInParent="true" android_text="@string/txt_news" /> <TextView android_id="@+id/techTextView" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_centerInParent="true" android_text="@string/txt_tech" android_visibility="gone" /> <TextView android_id="@+id/entertainmentTextView" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_centerInParent="true" android_text="@string/txt_entertainment" android_visibility="gone" /> <android.support.design.widget.BottomNavigationView android_id="@+id/bottom_navigation" android_layout_width="match_parent" android_layout_height="wrap_content" android_layout_alignParentBottom="true" app_itemBackground="@color/colorPrimary" app_itemIconTint="@color/white" app_itemTextColor="@color/white" app_menu="@menu/bottom_navigation_main" /> </RelativeLayout>
bottom_navigation_main.xml
This is our menu. Place it under the menu
resource directory.
<?xml version="1.0" encoding="utf-8"?> <menu > <item android_id="@+id/action_news" android_enabled="true" android_icon="@drawable/ic_favorite_white_24dp" android_title="@string/txt_news" app_showAsAction="ifRoom" /> <item android_id="@+id/action_tech" android_enabled="true" android_icon="@drawable/ic_access_time_white_24dp" android_title="@string/txt_tech" app_showAsAction="ifRoom" /> <item android_id="@+id/action_entertainment" android_enabled="true" android_icon="@drawable/ic_audiotrack_white_24dp" android_title="@string/txt_entertainment" app_showAsAction="ifRoom" /> </menu>