Collapsing Nav Bar / Toolbar on Scroll

DH_HA1DH_HA1 USMember ✭✭✭
edited December 2016 in Xamarin.Forms

Summary

The ability to set a property on a ScrollView or ListView that allows the Navigation Bar / Toolbar to collapse on scroll up and appear on scroll down. This would require the page to be hosted inside a NavigationPage.

API Changes

Page
public View ScrollView { get; set; }

This would then listen to the scroll events to handle the collapse. On Android I would suggest using the CoordinatorLayout and CollapsingToolbarLayout.

Intended Use Case

Common UI practice to scroll the navigation bar away on scrolling down on a List / ScrollView to increase vertical real estate

Tagged:

Open · Last Updated

Posts

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    On Material, there seems to be multiple ways to accomplish this with several new layouts: https://bugzilla.xamarin.com/show_bug.cgi?id=45532. This will require FormsAppCompatActivity to leverage these instead of using a RelativeLayout as the top container.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    The API for enabling this needs to be more fleshed out. When a user is writing an app how would they use the feature specifically?

  • AdrianKnightAdrianKnight USMember ✭✭✭✭
    edited December 2016

    I think the visual hierarchy needs to be CoordinatorLayout -> AppBarLayout -> CollapsingToolbarLayout -> Toolbar and ScrollView or ListView will be a child of CoordinatorLayout. There could be a platform specific property on ScrollView and ListView which is going to map to app:layout_behavior. There are links in the above bug description that you could study to figure out how this should be implemented.

    Now, when you create a new ContentPage whose Content is a ScrollView / ListView, obviously the Content has a parent. Also, you seem to be adding a Platform wrapper. These things might make it difficult to implement this feature if CoordinatorLayout specifically expects a scrollable visual. My Android knowledge is limited, so I suggest that you test it out first. :)

    Also we will need a platform specific property for app:layout_scrollFlags.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    The implementation details can and will be worked out, lets focus on the API first. Implementation details are just that, details.

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    We could use a property on FormsAppCompatActivity named UseLegacyLayout which defaults to true. Devs will need to flip this flag off in MainActivity.cs so the layout tree can be constructed with the above layouts.

    Then we have a platform specific option to control scroll flags on Toolbar (a property of Application):

    public static readonly BindableProperty ToolbarScrollFlagsProperty = BindableProperty.Create(nameof(ToolbarScrollFlags), typeof(ScrollFlags), typeof(Application));
    
    [Flags]
    public enum ScrollFlags
    {
           None   = 0,
           Scroll  = 1 << 0,
           ExitUntilCollapsed = 1 << 1,
           EnterAlways  = 1 << 2,
           EnterAlwaysCollapsed = 1 << 3,
           Snap = 1 << 4
     }
    

    Then use it like so:

    App.Current.On<Android>().SetToolbarScrollFlags(ScrollFlags.Scroll | ScrollFlags.EnterAlways);

    On second thought, we might not need a platform specific option for app:layout_behavior="@string/appbar_scrolling_view_behavior" since most of the time the value is going to be the same, but if we want to customize this behavior, then we're looking at another API to control it.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Thats a fairly limiting solution. Why not having

    navPage.Current.On<Android>().SetCollapseStyle (SOME_ENUM_VALUE_HERE);
    

    If there happens to be a TabbedPage visible, no problem it works as expected. Don't worry about the implementation details here.

    Also these layouts allow a TitleView of sorts to collapse with it. Which I think brings a stronger argument for this being tied to the NavigationPage since we have a proposal for adding a TitleView there.

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    Where would this TabbedPage be? Usually, the right way to use it with NavigationPage is when a tab item is a navigation page. However, many people seem to be pushing a TabbedPage on the navigation stack so that it becomes a child of NavigationPage. If this is implementation detail to take care of, fine.

    I'm fine with the property being part of NavigationPage instead of Application.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Doesn't matter if the TabbedPage is the child or the parent, the visual result is the same.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Can we think of more "intuitive" enum value names here? The ones you posted while I get because I know android are terrible if you don't.

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    Are these APIs set in stone or can we not review them after PR submission? Also, we should consider adding inline documentation to make things more clear.

    That said, I'm not great with semantics, but here's one possible set of names.

    None,
    Scrollable,
    CollapseToMinimumHeight,
    ExpandToFullHeight,
    ExpandToMinimumHeightAndThenFullHeight,
    ExpandOrCollapseToClosestEdge 
    

    You should read the docs and test each value to verify its name makes sense and adjust the names as needed.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Oh yeah no the names are not set in stone here at all. I think the bigger thing is that before we start we get exactly what items we want in the enum (regardless of name) and a description of exactly what they do.

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    You could read the API here.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Sorry my implication being that Xamarin.Forms does not have to use flags here and that may not be the best API. We could of course bring in the flags more or less as is and directly consume/expose them, and Im not saying thats the wrong approach. Im saying its not the only one available to us. We could go as simple as a bool to toggle some behavior on or off, a couple predefined ones, a couple flags, or a full set of flags.

    The goal should be to provide the minimum API surface area required to really do what needs to be done. I guess in the writing of this response its become clear to me that we should indeed use the Android flags (potentially with minor name changes) but try to only bring in the ones we think are essential. We can expand the surface area later as needed that way.

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    Aren't all these flags essentially useful? I think each behavior is unique and could easily be picked up by a developer. It's only 5 flags, and devs can chain them up bitwise for more control. If there were a LOT more flags, then implementing a set of predefined ones would make more sense. My 2 cents.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    5 flags = 120 different ways to combine those flags. Now I realize the test matrix wont be quite that bad, but it wont be super fun.

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    If SCROLL_FLAG_SCROLL needs to be set for others to work as the documentation suggests, then it should be 24?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Ah yes, didn't think about that, still 24 is not a lot of fun to test either. I just want to make sure we are justifying what we add instead of blindly doing it. UI testing is not cheap or particularly glorious, it also takes a long long time.

  • BjornBBjornB USMember ✭✭✭

    How´s the progress with this one? This would really be a nice feature. I have an incoming project where the customer pointed out the "hide on scroll". The way Forms handles this now means I will probably have to go native or come up with some next level renderer magic :).

  • DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai

    Hi All, I just deleted a comment here that was off topic. Please remember our forum rules:

    https://forums.xamarin.com/discussion/87290/xamarin-forum-rules-and-guidelines#latest

    And here, posts need to be on topic.

    All posts responding to a thread should be responding to the content of the thread only.

  • TinoPetrinaTinoPetrina HRUniversity

    Any progress with this. I need to implement collapsing navigation bar as soon as possible

  • GiampaoloGabbaGiampaoloGabba USMember ✭✭✭

    @TinoPetrina said:
    Any progress with this. I need to implement collapsing navigation bar as soon as possible

    Dont hold your breath, this is not coming soon (maybe will never come) :)
    You can try with a custom layout (using absolute layout ecc..) or custom renderers.

  • TinoPetrinaTinoPetrina HRUniversity

    @GiampaoloGabba said:

    @TinoPetrina said:
    Any progress with this. I need to implement collapsing navigation bar as soon as possible

    Dont hold your breath, this is not coming soon (maybe will never come) :)
    You can try with a custom layout (using absolute layout ecc..) or custom renderers.

    Do you have any idea how to do it?
    I tried playing with renderers a bit but for now I'm getting nothing useful.

  • noob8129noob8129 Member ✭✭

    @TheRealJasonSmith Any work being done on this? We need a way on both iOS and Android to create a parallax scrolling effect with ListView. For Android, I think these new layouts are needed.

Sign In or Register to comment.