architecture-components-samples icon indicating copy to clipboard operation
architecture-components-samples copied to clipboard

How to use Navigation to show a master-detail layout?

Open Zhuinden opened this issue 7 years ago • 15 comments

It appears to me that you need to write your own navigator implementation that must handle the global navigate() method.

Is it a recommendation of sorts that the current destination's ID is persisted in an internal fragment directly into the FragmentManager?

Zhuinden avatar May 28 '18 01:05 Zhuinden

Hey @Zhuinden have you tried something? I'll like to see. I'm in need of this

KingIdee avatar Jun 02 '18 09:06 KingIdee

@KingIdee I have an idea, but I expect that because https://github.com/googlesamples/android-sunflower requires it, the Navigation team will figure something out for out-of-the-box management

(edit from 9 months later: i was naive https://github.com/googlesamples/android-sunflower/issues/312 )

Zhuinden avatar Jun 02 '18 10:06 Zhuinden

Okay. I hope we don't have to wait till io19 😄

KingIdee avatar Jun 02 '18 15:06 KingIdee

I saw https://proandroiddev.com/master-detail-views-with-navigation-components-a20405f31974 and it makes sense.

Zhuinden avatar Mar 27 '19 13:03 Zhuinden

Yeah. But what we can do if we need master/detail behavior not for tablet/phone but for portrait/landscape

PatrinAV avatar Mar 27 '19 13:03 PatrinAV

Yeah. But what we can do if we need master/detail behavior not for tablet/phone but for portrait/landscape

Then use layout-w600dp (actual screen width in current orientation) instead of layout-sw600dp (shortest width). You may have to do the navigation in the inner navigation graph again in onResume() after an orientation-change and store the current active model-element shown in the detail-view in the viewModel to do so (including null to navigate to an empty view if nothing has been selected yet or the selected element is deleted from the model). safeargs should make this very easy to handle.

If you change orientation from landscape to portrait, navigate to detail view in onResume() instead. From portrait to landscape you'd need to activity?.supportFragmentManager?.popBackStack() in the detail fragment's onResume(), so the master-fragment becomes visible and can show the apropriate detail-fragment in it's onResume().

Be careful if using the same detail-fragment, so it doesn't do the popBackStack() if it's part of the master-detail view. ;)

MarcusWolschon avatar Mar 27 '19 13:03 MarcusWolschon

@Zhuinden I read through the user's article and looked through the project's repository, and it seems they have a fragment inside of the layout of their fragment. I know this is a bit of an old post but is this really the correct approach to take? My team used a similar approach to tackle Master-Detail with Navigation components but the moment we began to use a Map we ran into a problem which led me down the rabbit hole to this post.

Doctrevil avatar Sep 12 '19 15:09 Doctrevil

@doctrevil if you need to change between master-detail and portrait based on orientation, your only bet is implementing FragmentNavigator yourself to be able to support this scenario.

Or just not use AAC Navigation for handling these screens, I guess.

Zhuinden avatar Sep 12 '19 16:09 Zhuinden

hey there!! I have one question, how do I pass data from the Master to the Detail fragment. I noticed that doesn't work with safeArgs because we need to use 2 graphs so there is no action to be able to use safeArgs. Anyone knows how to do it?

tiagomcouto avatar Mar 11 '20 18:03 tiagomcouto

I don't think you need 2 graphs for a master detail, that sounds tricky to manage 🤔

Zhuinden avatar Mar 11 '20 20:03 Zhuinden

how would you manage a master detail with only 1 graph :o ? using navigation. If you have a way let me know :P

tiagomcouto avatar Mar 12 '20 10:03 tiagomcouto

because if I'm not mistaken you can't do master detail with only 1 fragment, you need 2 fragments. Therefore u will have to use a different graph in each one. because my problem is for example I have a list of recepies in my Master and once I click in a recepie it's shown the information of that recepie in the right side ( detail ).

tiagomcouto avatar Mar 12 '20 10:03 tiagomcouto

Therefore u will have to use a different graph in each one.

Not necessarily... I was putting off an example like this because I don't really use navigation, although I'm ok with it with the advances introduced in 2.2.0.

(Before that, I wouldn't have considered using it at all. But now that NavBackStackEntry scopes ViewModel and can retrieve SavedStateHandle even for a shared super-scope NavGraph, now you can actually describe what you need... I think.)

Maybe I'll consider writing that custom navigator implementation that would handle master-detail.

Zhuinden avatar Mar 12 '20 11:03 Zhuinden

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:navigation/integration-tests/testapp/src/main/java/androidx/navigation/testapp/TwoPaneFragment.kt?q=abstractlistdetailfragment

Zhuinden avatar Oct 12 '22 20:10 Zhuinden

hey there!! I have one question, how do I pass data from the Master to the Detail fragment.

A navigation graph as a whole can have arguments (that match arguments of the start-location).

MarcusWolschon avatar Oct 17 '22 21:10 MarcusWolschon