Which view should be used for new Material Design Bottom Navigation?
BottomNavigationView is a component added in Google Support Library 25. It provides a quick navigation between top level views within an app. It should be used when application has three to five top-level destinations. My implementation includes the switching between Fragments on Selecting the Menu Items.
Add to the build.gradle of your project module
compile'com.android.support:design:25.3.1'
Create the BottomNavigationView in xml of your layout and provide a menu resource to it:
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
Create a file here navigation.xml in menu resource folder. This file is used for providing the MenuItems in BottomNavigationView
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
<item
android:id="@+id/navigation_settings"
android:icon="@drawable/ic_settings_black_24dp"
android:title="@string/title_settings" />
</menu>
With everything in line this much code shows up the BottomBar on running the app. Now lets set the listener for the Click Events OnNavigationItemSelectedListener and OnNavigationItemReselectedListener on Menu Items -
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
return true;
case R.id.navigation_dashboard:
return true;
case R.id.navigation_notifications:
return true;
case R.id.navigation_settings:
return true;
}
return true;
}
};
private BottomNavigationView.OnNavigationItemReselectedListener mOnNavigationItemReselectedListener = new BottomNavigationView.OnNavigationItemReselectedListener() {
@Override
public void onNavigationItemReselected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
Log.d(TAG, "Navigation Reselected ===");
break;
case R.id.navigation_dashboard:
Log.d(TAG, "Dashboard Reselected ===");
break;
case R.id.navigation_notifications:
Log.d(TAG, "Notification Reselected ===");
break;
case R.id.navigation_settings:
Log.d(TAG, "Settings Reselected ===");
break;
}
}
};
bottomNavigationView.setOnNavigationItemSelectedListener
(mOnNavigationItemSelectedListener);
bottomNavigationView.setOnNavigationItemReselectedListener
(mOnNavigationItemReselectedListener);
If the no of Menu Items are more than 3 then the selected Item will take more space in the BottomNavView and it looks a little weird as of now, may be intentionally Google has kept it like this.
This behavior is defined by ShiftingMode property of BottomNavigationView, which can't be disabled in a straightforward way as of now, as its api is not public. But there is a way through Reflection to do it :
BottomNavigationMenuView menuView = (BottomNavigationMenuView)
btmNavigationView.getChildAt(0);
try {
Field shiftingMode = menuView.getClass()
.getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView item =
(BottomNavigationItemView) menuView.getChildAt(i);
item.setShiftingMode(false);
//To update view, set the checked value again
item.setChecked(item.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
}
After calling above code result is :
For more information checkout my Github Project:
https://github.com/pmahsky/BottomNavigationViewDemo
Android new Bottom Navigation bar or BottomNavigationView
I think you might looking for this.
Here's a quick snippet to get started:
public class MainActivity extends AppCompatActivity {
private BottomBar mBottomBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Notice how you don't use the setContentView method here! Just
// pass your layout to bottom bar, it will be taken care of.
// Everything will be just like you're used to.
mBottomBar = BottomBar.bind(this, R.layout.activity_main,
savedInstanceState);
mBottomBar.setItems(
new BottomBarTab(R.drawable.ic_recents, "Recents"),
new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
new BottomBarTab(R.drawable.ic_friends, "Friends")
);
mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
@Override
public void onItemSelected(final int position) {
// the user selected a new tab
}
});
}
@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mBottomBar.onSaveInstanceState(outState);
}
}
Here is reference link.
https://github.com/roughike/BottomBar
EDIT New Releases.
The Bottom Navigation View has been in the material design guidelines for some time, but it hasn’t been easy for us to implement it into our apps. Some applications have built their own solutions, whilst others have relied on third-party open-source libraries to get the job done. Now the design support library is seeing the addition of this bottom navigation bar, let’s take a dive into how we can use it!
How to use ?
To begin with we need to update our dependency!
compile ‘com.android.support:design:25.0.0’
Design 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Content Container -->
<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>
Create menu as per your requirement.
<?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_favorites"
android:enabled="true"
android:icon="@drawable/ic_favorite_white_24dp"
android:title="@string/text_favorites"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_schedules"
android:enabled="true"
android:icon="@drawable/ic_access_time_white_24dp"
android:title="@string/text_schedules"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_music"
android:enabled="true"
android:icon="@drawable/ic_audiotrack_white_24dp"
android:title="@string/text_music"
app:showAsAction="ifRoom" />
</menu>
Handling Enabled / Disabled states. Make selector file.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:color="@color/colorPrimary" />
<item
android:state_checked="false"
android:color="@color/grey" />
</selector>
Handle click events.
BottomNavigationView 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_favorites:
break;
case R.id.action_schedules:
break;
case R.id.action_music:
break;
}
return false;
}
});
Edit : Using Androidx you just need to add below dependencies.
implementation 'com.google.android.material:material:1.2.0-alpha01'
Layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_gravity="bottom"
app:menu="@menu/bottom_navigation_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</FrameLayout>
If you want to read more about it's methods and how it works read this.
Surely it will help you.
live view of bottom navigation in design view is not showing icons and the menu resource
This problem occurred while using the new material io 1.5.0 library, and it's working fine on 1.3.0.
Thanks Niaj Mahmud for your help and support
BottomNavigation View OnNavigationItemSelectedListener is deprecated
Just use the OnItemSelectedListener interface:
kotlin
bottomNavigationView?.setOnItemSelectedListener {
// do stuff
return@setOnItemSelectedListener true
}
Java
bottomNavigationView.setOnItemSelectedListener(item -> {
// do stuff
return true;
});
how to make bottom app bar or bottom navigation bar like google home app?
@Artur's solution is a huge kick in the right direction, although it needs more fine tuning as google's material components has evolved.
my solution's screenshot:
build.gradle's dependencies:
implementation 'com.google.android.material:material:1.1.0-alpha10'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'
layout/activity_main.xml file:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.MainActivity"
android:background="@color/orange_500"
>
<!-- blah blah blah other content... -->
<!-- android:visibility="gone" -->
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
android:clickable="false"
android:focusable="false"
>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@android:color/transparent"
android:clickable="false"
app:fabAlignmentMode="center"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:background="@color/clear"
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/menu_bottom_navigation_main"
android:outlineAmbientShadowColor="@android:color/transparent"
android:outlineSpotShadowColor="@android:color/transparent"
/>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
style="@style/Widget.Design.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottom_bar"
android:src="@drawable/ic_add_white_24dp"
android:tint="@color/white"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
menu/menu_bottom_navigation_main.xml file:
<?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_view_all_expenses"
android:enabled="true"
android:icon="@drawable/ic_list_black_24dp"
android:title="View All"
app:showAsAction="always" />
<item
android:enabled="false"
android:title="Add Expense"
app:showAsAction="always"
android:checkable="false"
android:checked="false"
/>
<item
android:id="@+id/action_view_dashboard"
android:enabled="true"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="Dashboard"
app:showAsAction="withText" />
</menu>
A few remarks:
I had to remove the FrameLayout as the middle-man, it didn't go well.
My main root is a ConstraintLayout. I only needed to add a coordinator layout for the bottom to behave well. notice that the coordinator's height is
match_parentalthough it is only needed for the bottom app bar.the bottom navigation view had to add
android:outlineAmbientShadowColorandandroid:outlineSpotShadowColorastransparentand also transparent background, or devices running android q will have strange shadows painted on top of the bottom app bar.the bottom app bar had to add
app:contentInsetStartandapp:contentInsetStartWithNavigationto be0dpso that the navigation view won't get moved aside from the screen's start and look strange.if you will use ConstraintLyaout as the root view, you can't constraint to the bottom navigation view. instaed you will need to constraint's bottom to bottom of parent, and add margin bottom like this:
android:layout_marginBottom="@dimen/design_bottom_navigation_height"
How do I get the bottom navigation bar height for Material Design 3?
With Material3 the BottomNavigationView has a different minHeight.
You can apply something like:
<fragment
android:layout_marginBottom="@dimen/m3_bottom_nav_min_height"
Reference: android/material/bottomnavigation/res/values/dimens.xml#L32
Related Topics
Android - Ondatechangedlistener - How to Set This
Creating Different Layout for Android Phone and Tablet
Why Does Navigation Not Work in the Navigation Drawer Activity Template with Version 2.4.1
Adb Cannot Start Daemon, Createprocess Failure, Error 2
Manually Adding Aar with Dependency Pom/Iml File
Android Marshmallow: Test Permissions with Espresso
Tiled Drawable Sometimes Stretches
Align Top of Image to Top of Textview
Android Raw Folders - Creation and Reference
Handle a View Visibility Change Without Overriding the View
How to Detect App Removed from the Recent List
Using Intent.Action_Pick for Specific Path
Implement Double Click for Button in Android
Implementing a Simple Dagger2 Sample
Android Programming: Where to Start for Creating a Simple File Browser