Saturday, November 25, 2017

Creating Draggable Sliding Up Panel in Xamarin Forms



There were library provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) to your Android application, But implementing across all platforms requires a couple of custom rendering and abstraction. Below are the popular apps that has draggable sliding up panel.


Google Maps




Umano








Creating Draggable Sliding Up Panel



Now lets start creating our own draggable sliding up panel in PURE xaml, No need to implement custom renderer or create bindings to an existing Android or iOS libraries (How is that possible?). Its simple we will just gonna need to subscribe to PanGestureRecognizer to the UI element in our case the bottom menu. [Below is the finish product.]








Creating Your Xamarin.Forms project 



Now let us create our new project and name it "SlidingUpPanel", you should be able to create three platforms project and atleast  one PCL project in my case i was created it in Visual Studio 2017 and im using Prism and Autofac.












The Secret in UI magic 



This is basically the classic tricks that we have done before in the previous project like "Custom Popup" you can read in this link. So first we have to wrap our content UI Elements around a GridLayout.







Now inside the GridLayout we will add a StackLayout and we will gonna name it as "QuickMenuPullLayout" this will be the container of the draggable UI (handle).







Now that we have completed the UI elements this time we will gonna wire up the animation in the backend code, we will gonna need extra help of one library that will gonna manage the subscription of events and to avoid memory leaked, We will gonna use Reactive Extension.




Wiring Up 



Just i have said earlier we will gonna need to subscribe to PanGestureRecognizer to the UI element in which is the bottom menu. with the help of the Reactive Extension we end up make it fluid and beautiful.







With the help of PanGestureRecognizer we were able to update the UI element and make it draggable. We can also make the element not go beyond the specified bounds using Math.Max and Math.Min please the sample code below.







Awesome! Let's see it in Action 


Below is the finished product, I hope it will help you to the journey of Xamarin.Form mobile Development. If you want the source code please browse in this link here.








Wrapping Up


Creating Xamarin.forms Application should be a breeze with a tricks that have proven over time, And Xamarin is getting improved all this time and we should utilized it. If you want more and advance topic you can catch us at this facebook groups  MondPH And Xamdavao.  If you want the full sample source you can check it right here LINK. enjoy coding.







3 comments:

  1. Nice blog. Thanks for sharing such great information.Inwizards Inc is a xamarin Development company offers quality xamarin development services best in web industries. Intrested click here - Xamarin services India, Hire xamarin developer india

    ReplyDelete
  2. After implementing I see a slight shaking every once in a while when dragging. I think that might be a small bug.
    Also, if you turn the screen the bar disappears and cannot be dragged out, but that seems easily fixable.
    Otherwise a pretty solution.
    Thank you

    ReplyDelete
  3. The flickering during the drag operation points to a much bigger issue. I'm not so sure this is the best approach as most of the code would have to be ripped out or drastically altered to get it to work. I'm thinking a different approach is needed.

    ReplyDelete