Fixed
Status Update
Comments
gg...@google.com <gg...@google.com>
il...@google.com <il...@google.com>
yb...@google.com <yb...@google.com>
at...@gmail.com <at...@gmail.com> #2
How should this work "else if (parent instanceof BottomSheetDialogFragment)"?
ma...@gmail.com <ma...@gmail.com> #3
Yeah, I just realized that it's not as simple as in the case of the DrawerLayout. When using a DrawerLayout, people mostly have something like this:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android "
xmlns:app="http://schemas.android.com/apk/res-auto "
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/header_container"/>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/main_nav_header"
android:fitsSystemWindows="true"
app:menu="@menu/main_drawercontent"/>
</android.support.v4.widget.DrawerLayout>
Obviously here the NavigationView is a direct child of the DrawerLayout, which is why the implementation we already have for handling the closing of the navigation drawer works like it does, by checking the NavigationView's parent.
But when using a BottomSheetDialogFragment, we can't rely on the NavigationView being a direct child of the BottomSheetDialogFragment. Since it's mostly a regular Fragment, people may use a layout like this (simplified):
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".view.BottomDrawerFragment">
<!-- Here we'd have views typically found in the navigation drawer,
such as a user profile picture or their name -->
<com.google.android.material.navigation.NavigationView
android:id="@+id/bottom_drawer_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/divider"
app:menu="@menu/bottom_drawer_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
My suggestion wouldn't work with this, as the NavigationView's parent is not the BottomSheetDialogFragment, but the ConstraintLayout. So we can't use the parent to detect when we should dismiss a BottomSheetDialogFragment.
A potential solution would probably have to use a different approach. Maybe in setupWithNavController() you could pass a reference to the BottomSheetDialogFragment directly, in addition to the NavigationView and NavController. Something similar happens already, for example when using a Toolbar that should be kept in sync also, the method call is NavigationUI.setupWithNavController(collapsingToolbarLayout, toolbar, navController) for that.
So we could end up having an implementation of setupWithNavController just for our case with the BottomSheetDialogFragment that goes something like this:
public static void setupWithNavController(
@NonNull BottomSheetDialogFragment bottomSheetDialogFragment,
@NonNull final NavigationView navigationView,
@NonNull final NavController navController) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
boolean handled = onNavDestinationSelected(item, navController, true);
if (handled) {
bottomSheetDialogFragment.dismiss();
}
return handled;
}
});
final WeakReference<NavigationView> weakReference = new WeakReference<>(navigationView);
navController.addOnNavigatedListener(new NavController.OnNavigatedListener() {
@Override
public void onNavigated(@NonNull NavController controller,
@NonNull NavDestination destination) {
NavigationView view = weakReference.get();
if (view == null) {
controller.removeOnNavigatedListener(this);
return;
}
Menu menu = view.getMenu();
for (int h = 0, size = menu.size(); h < size; h++) {
MenuItem item = menu.getItem(h);
item.setChecked(matchDestination(destination, item.getItemId()));
}
}
});
}
And we'd use it in our example like so:
public class BottomDrawerFragment extends BottomSheetDialogFragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_bottom_drawer, container, false);
NavigationView navigationView = view.findViewById(R.id.bottom_drawer_navigation);
NavigationUI.setupWithNavController(this, navigationView, Navigation.findNavController(getActivity(), R.id.nav_host_fragment));
return view;
}
}
<android.support.v4.widget.DrawerLayout xmlns:android="
xmlns:app="
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/header_container"/>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/main_nav_header"
android:fitsSystemWindows="true"
app:menu="@menu/main_drawercontent"/>
</android.support.v4.widget.DrawerLayout>
Obviously here the NavigationView is a direct child of the DrawerLayout, which is why the implementation we already have for handling the closing of the navigation drawer works like it does, by checking the NavigationView's parent.
But when using a BottomSheetDialogFragment, we can't rely on the NavigationView being a direct child of the BottomSheetDialogFragment. Since it's mostly a regular Fragment, people may use a layout like this (simplified):
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="
xmlns:app="
xmlns:tools="
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.BottomDrawerFragment">
<!-- Here we'd have views typically found in the navigation drawer,
such as a user profile picture or their name -->
<com.google.android.material.navigation.NavigationView
android:id="@+id/bottom_drawer_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/divider"
app:menu="@menu/bottom_drawer_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
My suggestion wouldn't work with this, as the NavigationView's parent is not the BottomSheetDialogFragment, but the ConstraintLayout. So we can't use the parent to detect when we should dismiss a BottomSheetDialogFragment.
A potential solution would probably have to use a different approach. Maybe in setupWithNavController() you could pass a reference to the BottomSheetDialogFragment directly, in addition to the NavigationView and NavController. Something similar happens already, for example when using a Toolbar that should be kept in sync also, the method call is NavigationUI.setupWithNavController(collapsingToolbarLayout, toolbar, navController) for that.
So we could end up having an implementation of setupWithNavController just for our case with the BottomSheetDialogFragment that goes something like this:
public static void setupWithNavController(
@NonNull BottomSheetDialogFragment bottomSheetDialogFragment,
@NonNull final NavigationView navigationView,
@NonNull final NavController navController) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
boolean handled = onNavDestinationSelected(item, navController, true);
if (handled) {
bottomSheetDialogFragment.dismiss();
}
return handled;
}
});
final WeakReference<NavigationView> weakReference = new WeakReference<>(navigationView);
navController.addOnNavigatedListener(new NavController.OnNavigatedListener() {
@Override
public void onNavigated(@NonNull NavController controller,
@NonNull NavDestination destination) {
NavigationView view = weakReference.get();
if (view == null) {
controller.removeOnNavigatedListener(this);
return;
}
Menu menu = view.getMenu();
for (int h = 0, size = menu.size(); h < size; h++) {
MenuItem item = menu.getItem(h);
item.setChecked(matchDestination(destination, item.getItemId()));
}
}
});
}
And we'd use it in our example like so:
public class BottomDrawerFragment extends BottomSheetDialogFragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_bottom_drawer, container, false);
NavigationView navigationView = view.findViewById(R.id.bottom_drawer_navigation);
NavigationUI.setupWithNavController(this, navigationView, Navigation.findNavController(getActivity(), R.id.nav_host_fragment));
return view;
}
}
at...@gmail.com <at...@gmail.com> #4
You nailed it man. Thanks for your investigation!
il...@google.com <il...@google.com> #5
Are there any cases where you'd have a NavigationView in a BottomSheet of any type and not expect the bottom sheet to be hidden when you tap on a NavigationView item?
If you'd always expect it to be hidden, we could use BottomSheetBehavior.from(navigationView) to find the bottom sheet, avoiding the need to create another setup method.
If you'd always expect it to be hidden, we could use BottomSheetBehavior.from(navigationView) to find the bottom sheet, avoiding the need to create another setup method.
ma...@gmail.com <ma...@gmail.com> #6
Not that I can think of. According to the Material Design spec, there are standard bottom sheets which remain open while the user interacts with the main UI region or the sheet itself, and modal bottom sheets which must be dismissed to interact with the underlying content.
Examples for standard bottom sheets are playback controls inside a music player or the location information in Google Maps, while modal bottom sheets provide a set of choices and are an alternative to inline menus.
This makes it pretty clear that modal bottom sheets should be used for any kind of menu, and modal bottom sheets are always dismissed by tapping a menu item or action. That being said, it's not unlikely that someone is going to use a NavigationView inside a standard bottom sheet at some point. While the spec doesn't explicitly prohibit that, it's clearly not the intention, so I wouldn't consider this case in the implementation.
With that in mind, I think using BottomSheetBehavior.from(navigationView) is a good solution.
Examples for standard bottom sheets are playback controls inside a music player or the location information in Google Maps, while modal bottom sheets provide a set of choices and are an alternative to inline menus.
This makes it pretty clear that modal bottom sheets should be used for any kind of menu, and modal bottom sheets are always dismissed by tapping a menu item or action. That being said, it's not unlikely that someone is going to use a NavigationView inside a standard bottom sheet at some point. While the spec doesn't explicitly prohibit that, it's clearly not the intention, so I wouldn't consider this case in the implementation.
With that in mind, I think using BottomSheetBehavior.from(navigationView) is a good solution.
il...@google.com <il...@google.com>
ap...@google.com <ap...@google.com> #8
Project: platform/frameworks/support
Branch: androidx-master-dev
commit 43e060b8c23a7163673f77ee42e5a1e3cb1f7c14
Author: Ian Lake <ilake@google.com>
Date: Fri Aug 31 14:11:51 2018
Close bottom sheets when tapping a NavigationView
When a NavigationView is contained within a bottom
sheet (such as is the case for the common
BottomAppBar use case), tapping on a menu item that
navigates to a destination will also hide the
bottom sheet.
Test: manual testing
Change-Id: Ia6cf92288988fe160ffd1136de417066b33377f2
Fixes: 112158843
M navigation/ui/src/main/java/androidx/navigation/ui/NavigationUI.java
https://android-review.googlesource.com/743749
https://goto.google.com/android-sha1/43e060b8c23a7163673f77ee42e5a1e3cb1f7c14
Branch: androidx-master-dev
commit 43e060b8c23a7163673f77ee42e5a1e3cb1f7c14
Author: Ian Lake <ilake@google.com>
Date: Fri Aug 31 14:11:51 2018
Close bottom sheets when tapping a NavigationView
When a NavigationView is contained within a bottom
sheet (such as is the case for the common
BottomAppBar use case), tapping on a menu item that
navigates to a destination will also hide the
bottom sheet.
Test: manual testing
Change-Id: Ia6cf92288988fe160ffd1136de417066b33377f2
Fixes: 112158843
M navigation/ui/src/main/java/androidx/navigation/ui/NavigationUI.java
ma...@gmail.com <ma...@gmail.com> #9
Nicely done, works just as expected. Thank you!
at...@gmail.com <at...@gmail.com> #10
Is it possible to see when I can use this code officially?
il...@google.com <il...@google.com> #11
It'll be part of the upcoming 1.0.0-alpha06 release.
at...@gmail.com <at...@gmail.com> #12
Can you show me your CustomBottomSheetDialofFragment and the associated layout please. I get the error message "The view is not a child of CoordinatorLayout".
at...@gmail.com <at...@gmail.com> #13
This is what would work if you use a simple bottom sheet layout with a ConstraintLayout as root view as pointed out in comment #3 :
if (parent instanceof DrawerLayout) {
((DrawerLayout) parent).closeDrawer(navigationView);
} else {
BottomSheetBehavior bottomSheetBehavior =
BottomSheetBehavior.from((View) navigationView.getParent().getParent());
if (bottomSheetBehavior != null) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
}
but only
BottomSheetBehavior bottomSheetBehavior =
BottomSheetBehavior.from(navigationView);
would expect, that the navigationView is a direct child of a CoordinatorLayout and would have the app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" attribute. That can't work or did I miss something?
if (parent instanceof DrawerLayout) {
((DrawerLayout) parent).closeDrawer(navigationView);
} else {
BottomSheetBehavior bottomSheetBehavior =
BottomSheetBehavior.from((View) navigationView.getParent().getParent());
if (bottomSheetBehavior != null) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
}
but only
BottomSheetBehavior bottomSheetBehavior =
BottomSheetBehavior.from(navigationView);
would expect, that the navigationView is a direct child of a CoordinatorLayout and would have the app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" attribute. That can't work or did I miss something?
il...@google.com <il...@google.com> #14
Yeah, we should avoid BottomSheetBehavior.from()'s overzealous throwing of exceptions and handle cases like BottomSheetDialogFragment where the NavigationView is a few layers below the CoordinatorLayout.
ap...@google.com <ap...@google.com> #15
Project: platform/frameworks/support
Branch: androidx-master-dev
commit 4fb1acaf8ee002979bc161e362c1e83f89195205
Author: Ian Lake <ilake@google.com>
Date: Tue Sep 18 13:38:07 2018
Fix NavigationUI for use with BottomSheetDialogFragment
Replace using BottomSheetBehavior.from() which
throws IllegalArgumentExceptions to a safe
method that searches up the view hierarchy
for a CoordinatorLayout to determine if the
NavigationView is within a bottom sheet.
Test: example added to the integration-tests/testapp
BUG: 112158843
Change-Id: I774991ef1b23085e075e6bac6fa820ee3e001a31
M navigation/integration-tests/testapp/build.gradle
M navigation/integration-tests/testapp/src/main/java/androidx/navigation/testapp/HelpActivity.kt
M navigation/integration-tests/testapp/src/main/res/layout/activity_help.xml
A navigation/integration-tests/testapp/src/main/res/layout/bottom_bar_menu.xml
M navigation/ui/src/main/java/androidx/navigation/ui/NavigationUI.java
https://android-review.googlesource.com/760505
https://goto.google.com/android-sha1/4fb1acaf8ee002979bc161e362c1e83f89195205
Branch: androidx-master-dev
commit 4fb1acaf8ee002979bc161e362c1e83f89195205
Author: Ian Lake <ilake@google.com>
Date: Tue Sep 18 13:38:07 2018
Fix NavigationUI for use with BottomSheetDialogFragment
Replace using BottomSheetBehavior.from() which
throws IllegalArgumentExceptions to a safe
method that searches up the view hierarchy
for a CoordinatorLayout to determine if the
NavigationView is within a bottom sheet.
Test: example added to the integration-tests/testapp
BUG: 112158843
Change-Id: I774991ef1b23085e075e6bac6fa820ee3e001a31
M navigation/integration-tests/testapp/build.gradle
M navigation/integration-tests/testapp/src/main/java/androidx/navigation/testapp/HelpActivity.kt
M navigation/integration-tests/testapp/src/main/res/layout/activity_help.xml
A navigation/integration-tests/testapp/src/main/res/layout/bottom_bar_menu.xml
M navigation/ui/src/main/java/androidx/navigation/ui/NavigationUI.java
il...@google.com <il...@google.com> #16
Thanks for catching the oversight! The new code should work considerably better for other bottom sheet cases without the IllegalArgumentExceptions :)
Description
The Navigation Component has this very useful function to sync up menu items from a NavigationView with the NavController. It makes sure that the selected item is checked, can close the navigation drawer on selection if a DrawerLayout is used, or set the title of an ActionBar/Toolbar according to the current destination.
With the addition of the bottom app bar in Material Design we've also begun using the bottom navigation drawer (
public class BottomDrawerFragment extends BottomSheetDialogFragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_bottom_drawer, container, false);
NavigationView navigationView = view.findViewById(R.id.bottom_drawer_navigation);
NavigationUI.setupWithNavController(navigationView, Navigation.findNavController(getActivity(), R.id.nav_host_fragment));
return view;
}
}
This works well, but because NavigationUI currently doesn't dismiss the BottomSheetDialogFragment when a menu item has been selected like it closes the DrawerLayout, the bottom navigation drawer remains open and needs to be dismissed in another way (which comes with additional code overhead and issues).
Since AndroidX is now part of AOSP, I took a look at the implementation and I think that support for this could be added with two lines of code (see '+' characters at beginning of lines below) by doing for the DialogFragment what is already done for the DrawerLayout (excerpt from androidx-master-dev/navigation/ui/src/main/java/androidx/navigation/ui/NavigationUI.java).
public static void setupWithNavController(@NonNull final NavigationView navigationView,
@NonNull final NavController navController) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
boolean handled = onNavDestinationSelected(item, navController, true);
if (handled) {
ViewParent parent = navigationView.getParent();
if (parent instanceof DrawerLayout) {
((DrawerLayout) parent).closeDrawer(navigationView);
+ } else if (parent instanceof BottomSheetDialogFragment) {
+ ((DialogFragment) parent).dismiss();
}
}
return handled;
}
});
navController.addOnNavigatedListener(new NavController.OnNavigatedListener() {
@Override
public void onNavigated(@NonNull NavController controller,
@NonNull NavDestination destination) {
Menu menu = navigationView.getMenu();
for (int h = 0, size = menu.size(); h < size; h++) {
MenuItem item = menu.getItem(h);
item.setChecked(matchDestination(destination, item.getItemId()));
}
}
});
}
The most active owner of the Navigation Component is Ian Lake and it he's been adding support for more and more UI components to the NavigationUI class in the past months, so I think he's the person to talk to about this. Assuming this doesn't introduce any issues, he could probably get it done in a couple of minutes.
Alternatively, I could implement this and the accompanying test myself, contribute it and try to get it reviewed.