XBottomSheet sits over all UI always

[bardigolriz]

I'm trying to position a XBottomSheet directly above a TabBar on Xamarin.iOS. Unfortunately, no matter what I attempt, it always sits over the TabBar, therefore intercepting all taps meant for the Tab Bar.

What I'm trying to achieve is similar to apps, such as Apple Music, where you have an expandable playback bar that's on top of the app's bottom tab bar.

[AlexStefan]

@bardigolriz it will help me a lot if you could provide a small project with what you want to achieve. Can you do that?

[bardigolriz]

@AlexStefan sure Alex. Thanks for the prompt response! I'll try to put something together. The project I'm working on isn't suitable due to its size, so I'll need to do a sample project. For reference, this is for Appy Weather on iOS! Your XBottomSheet is potentially going to elevate the experience meaningfully 👍

[AlexStefan]

Nice! Will look over sample and see what we can do about it! Short q: is XBottomSheet used in the Android project as well?

[bardigolriz]

@AlexStefan nope, but if this experiment works, then I'll look at adding it to it too.

[bardigolriz]

Attached is a small sample. Sorry it took a while, but I'm still getting my head around (Xamarin.)iOS. It has a ViewController that uses an embedded TabController that fills up the entire screen (via a ContainerView) built using the Storyboard. And it then adds your XBottomSheet via the BaseViewController's code-behind. I made one tweak to the bottom state of the XBottomSheet so that in this state it still needs to be partially visible (I subtracted its value as set by you by 100 as a cheap way to get this effect). Hope this is enough for you to work with!

iOS.play.zip

[bardigolriz]

For perhaps a clearer visual, I'm trying to achieve something similar to https://github.com/LeoNatan/LNPopupController.

When XBottomSheet goes into a biggest state, I'm okay with it not actually being full-screen like in above URL. But it would be nice to have as an option too. I'm going off on a tangent though. If I can get it to sit above the TabBar, then I'll be delighted and will definitely use it.

[AlexStefan]

I will pick it up again tomorrow evening, now I left the laptop. Thank you for the sample and additional info!

[AlexStefan]

Didn't had that much time today to look over it, but I explore the idea of playing with where the subview is added. Basically the XBottomSheet will be added within a certain view, and in the general case is the parent view (same in tabs), but maybe there is an option to add it within the "content" view. I'm afraid that this might be trickier to be implemented with Storyboard. Is this also the approach from your project? Or do you have an UITabBarController?
Should the XBottomSheet should be available no matter which tab is selected? Or it can be tab specific? If it is tab specific, I imagine that you can add the XBottomSheet within the view from the tab's UIViewController.
Got quite few questions :D

[bardigolriz]

Thanks so much for investigating.

Unfortunately, I'm looking to have the same XBottomSheet for all three tabs (I think I got it to work if I embed individually within each tab's ViewController, but this wouldn't be right unless the content of the XBottomSheet is different per tab which it's not).

I don't know if I understood correctly, but in the sample project, I'm using a base controller with a XBottomSheet that also has a container view hooked up to a TabController. I went with this approach because when I tried to add the XBottomSheet to a TabController directly, it would consider it an extra tab. I'm not sure if the way I'm attempting to do it is the best way, but at least it results in no extra tab being created because of the XBottomSheet. Hope this makes sense.

[bardigolriz]

Hi Alex,

No pressure but I'm wondering whether this is something 1) you think you can accomplish (I know you said it won't be straightforward at least) and 2) actually have the time to make it happen (I know this isn't a full-time responsibility).

Sorry for asking, but it would be good to have a better idea because if either of the above is a no, then I'll need to re-consider the design (I'm trying to nail the design before moving forward with other work) with one option being I figure out a logical design reason for having three separate XBottomSheets per tab (they would need to hold at least slightly different content/controls to help better justify this approach).

[AlexStefan]

Hello,

Sorry, had some busy days. Is it ok with you if I come with an answer on Wednesday (12 feb)? Still have an idea in my head on how it might work, but didn't got to actually try it.

[AlexStefan]

Hello @bardigolriz,

Spent some time today and it doesn't look like I can manage to make the XBottomSheet to start from above the tabs. :( Managed to add a different one per each tab, but not the same. If you have any idea, please feel free to share, but at this moment I feel like I will only slow you down by not providing a clear answer.

[bardigolriz]

Hi @AlexStefan,

Thanks so much for the updates and for investigating this, it means a lot that you're trying regardless of whether you're successful.

Since the weekend, I figured a way to continue work on the app without committing to a design here. What I mean is whatever happens I'll have the XBottomSheet above the Tab Bar but depending on how you get on, I may end up with 3 instances of it (which although not ideal, I think I can make it work). Do you think there's no way to accomplish this? Or that you'll just need more time to possibly find a solution?

One idea is whether this is more possible if instead of using a standard tab controller, I (we) use a bespoke tab system (that is, I create a UI which is a custom tab bar that has a XBottomSheet over it)?

[AlexStefan]

Hi @bardigolriz,

You're very welcome! Sad I cannot do more at this moment.
I don't think it there is no way to accomplish this, I just have some problems with time. If it helps, I might get time to look over after 1st of March (but I think that is quite late already).
I'm not sure that I fully understand your idea. Do you want to include the tab layout in the custom view that will be assigned to the XBottomSheet?

[bardigolriz]

@AlexStefan I'll wait patiently :)

It's a little difficult for me to explain. Basically, I was thinking of having a UIViewController that consists of three ContainerViews: 1) the bottom one is the tabs, 2) sitting above is XBottomSheet and 3) above all is the content area view. Does this make sense?

[bardigolriz]

@AlexStefan in the meanwhile, what I'm looking at doing as a workaround (that may actually be the best way to do this in general) is to create a container view controller (instead of the tab controller) that has a XBottomSheet in its footer which in its default collapsed state acts as a tab bar, in its anchored state shows the second level of UI (think like the playback bar on Apple Music) and then shows everything when in its expanded state. I got the idea for this approach when I was checking out the Microsoft Teams app.

I'll give this a go next week. Before then, if possible, would be great, assuming you understand what I mean, for you to let me know (without doing any actual work) whether you think this could actually work (I know we'll know for sure until I try it out, but to have your confidence will give me 💪).

[AlexStefan]

@bardigolriz in my tryouts from last week I was actually going for a similar idea (with container view controller instead of tab controller) as I think it is easier to get the right view for the XBottomSheet. What I wanted to try was to force the component to start from a certain point (or at least give the feeling that this is happening) or to get the actual content view, but the footer part might actually be a nicer approach. Keep me posted with what you manage to do.

[bardigolriz]

Hey @AlexStefan,

I've been busy the last few weeks with other projects, but back on iOS dev starting today. Fortunately, it only took me this morning to find an approach that might work (based on the ideas shared previously):

1. root view controller consists of two container views (linked to their own view controllers): a) top one for the content area and b) bottom one acts as a tab bar

2. a)'s view controller, called ContentViewController, hosts the content for the currently selected tab. I add a child view controller (tab 1) and your XBottomSheet in code in the ContentViewController's ViewDidLoad().

3. when you switch tabs from my custom tab controller, what I do is remove the view controller of the active tab in ContentViewController's child view controllers list and then add the new selected tab's.

I've attached the solution so it's hopefully easier to follow from there.
iOS.play.02.03.20.zip

So this is working fine in my tests. But being new to iOS, I don't know whether this is an efficient approach (to add/remove view controllers based on tab selected). Or whether a better approach in general is for you to make the changes necessary to enable the XBottomSheet to be flexible enough that it can be dropped anywhere and be directed to sit specifically above a certain UI element, whether it's a TabBarController or anything else. Hopefully this is something you can work with!

[AlexStefan]

Hey @bardigolriz,

Sorry for delayed response. I was in process of moving to a different country. I finally managed to do something that might help you and make possible for XBottomSheet to start from any point on the screen (for example above the tabs). The only drawback with this approach is that is not as smooth as you might expect (please see the attached gif). Does this help you?
To make it smoother I have to dig a bit more and I was thinking that this might already help you.

[bardigolriz]

Hi @AlexStefan,

Thanks for coming back to me, and finding the time to look at this again despite being busy with a move! I know how stressful that can be...

That looks like fantastic progress and you're getting there. That said, the issue with smoothness is for me a deal-breaker (I think others who may be less considerate about this sort of attention to detail won't be bothered and may be fine with it).

Since my last message, I've slightly tweaked my approach so that I'm using a PageViewController for a) therefore removing the need to remove/add a ViewController when you change tabs. The XBottomSheet lives under the tab area, but at least it doesn't appear above it. Although it generally works fine, at least one disadvantage with this approach is my inability to have the tab area have a translucency effect as it will show the XBottomSheet (and not main content) if I do apply one. This isn't a deal-breaker, and I'll just have to accept it for the time... unless you manage to sort the issue with the smoothness in which case I'll change to how you do it :)

Hope you can find the time at some point in your busy schedule to finish this improvement, which I think generally speaking will make the control so much more flexible in use and allow it to be used like how most apps who use such a control do.

[AlexStefan]

Hello @bardigolriz,

Check the following gif. Please take into account that in order to make this work, the content of your screen should be responsive (as in to rearrange based on height - follow how the "Test" label remains always in the center). Do you think that this will work? Would it help if I create a beta nuget and you check it out?

[bardigolriz]

Amazing!

RE: responsive layout
I'm using AutoLayout (constraints) for the XBottomSheet so I guess that makes it responsive?

RE: beta
That would be helpful, yeah. Based on what you've shared it looks like it meets all the requirements, great work!

[AlexStefan]

@bardigolriz I've uploaded a new version of the nuget: "1.0.4 - preview" with this change. Check it out and tell me how it goes! Good luck!

[AlexStefan]

@bardigolriz I'd like to promote the nuget version from beta to release. Did you manage to add the new version to the project?

[bardigolriz]

@bardigolriz I'd like to promote the nuget version from beta to release. Did you manage to add the new version to the project?

So sorry @AlexStefan. Coronavirus has temporarily stopped dev work as I’ve my 3 year old at home and been unable to get any work done lately. Also not helped by a house move at the worst possible time. I should be able to confirm next week after I’ve settled back to the new “normal”, but I don’t know if it’s too late for you/necessary to wait.

[bardigolriz]

Big apology @AlexStefan for getting back so late.

I updated to the beta, and although the immediate impression seemed positive in terms of where everything was laid out to begin with, things started to go funny when I began to interact with it. I'm open to doing a quick video call where I can share my experience? And compare it to what I was using previously (which was actually working as intended). Please drop me an email Bardi.golriz@gmail.com if you'd like better clarification on the odd behaviour. In a best case scenario, it may be something I'm doing wrong!