UI for Xamarin Deep Dive: Solid Organization with SideDrawer

Welcome to Day 3 of our UI for Xamarin control series. By now, you should have had a running start with the bits in your choice of IDE and proudly displaying list of items in a feature-rich ListView. Let's tackle another common app problem – content organization.

Most mobile apps are a collection of pages/views that the user navigates between. A good app strategy is to list out your main content and present a view that hints at everything else that your app has to offer. This is where the Telerik SideDrawer in UI for Xamarin shines – you get completely customizable placeholders to hold main and drawer content panels, and full flexibility over usage. This article dives into some of the features of the Telerik SideDrawer and how to tweak things to meet your app's specific needs.

Seeing is Believing

An UI control like the Telerik SideDrawer is very visual – you have to almost see how it works first hand. Below you can see the SideDrawer showing off its skills in the Telerik UI for Xamarin Examples app. Search for the app in your respective app Stores and play around with it.

Tuck Away Content

One of the keys to a successful mobile app is content organization – pages that make up the app should be easily discoverable and simple to navigate between. One common technique is to tuck away content that the user can discover with a gesture and allow navigation to other parts of the app.

The Telerik SideDrawer is a master at this trick – it hides away an entire view behind a swipe gesture that the user can discover easily. The SideDrawer is simply a placeholder – commonly used to house navigation, app/user settings or other appropriate UI. A little flick gesture from any configured edge of the screen allows the user to visualize the SideDrawer content – often accompanied by open/close transition animations. Here's a simple SideDrawer in an Aviation app's home page:

<TelerikPrimitives:RadSideDrawer x:Name="HomeDrawer" DrawerLength="150" DrawerLocation="Right">
    <TelerikPrimitives:RadSideDrawer.MainContent>
        <TelerikDataControls:RadListView x:Name="BizJetsList">
        ...
        ...
        </TelerikDataControls:RadListView>  
    </TelerikPrimitives:RadSideDrawer.MainContent>
    <TelerikPrimitives:RadSideDrawer.DrawerContent>
            <StackLayout>
                <Button Text="Business Jets" />
                <Button Text="Speed Check" />
                <Button Text="Supersonic Jets" />
            </StackLayout>
     </TelerikPrimitives:RadSideDrawer.DrawerContent>
</TelerikPrimitives:RadSideDrawer>

Here's the resulting app UI:

As you see, the SideDrawer simply presents a placeholder to house hidden content – in this case, three simple navigation buttons leading to other parts of the app. By convention, the MainContent of the SideDrawer is the main visible area, and the DrawerContent hides away the panel that slides in/out of view. And yes, you can render hamburger icons to provide a subtle hint to guide the user to the side drawer.

Easy Navigation

One of the nice things about the Telerik SideDrawer is how it supports easy navigation to other parts of the app – it is essentially a giant placeholder that you get to fill up with whatever content you desire. The content is a part of the visual tree for the given app page – just not visible without user or programmatic intervention. Accordingly, you can add easy navigation code as event handlers to your content's UI – here's an example:

<TelerikPrimitives:RadSideDrawer.DrawerContent>
        <StackLayout>
            <Button Text="Business Jets" Clicked="BizJet_Clicked" />
            <Button Text="Speed Check" Clicked="SpeedCheck_Clicked" />
            <Button Text="Supersonic Jets" Clicked="SupersonicJet_Clicked"/>
        </StackLayout>
    </TelerikPrimitives:RadSideDrawer.DrawerContent>
</TelerikPrimitives:RadSideDrawer>
// Code Behind
async void SupersonicJet_Clicked(object sender, System.EventArgs e)
{
    await Navigation.PushAsync(new SuperSonicJets());
}

As you can see, we can leverage simple click events from a button inside the SideDrawer content and respond with navigation code to take the user to other parts of the app. Did the user tap on the link for the same view that is already open? No worries – you can close the SideDrawer panel programmatically, like so:

void BizJet_Clicked(object sender, System.EventArgs e)
{
    this.HomeDrawer.IsOpen = false;
}

Transitions

Transitions are the animation effects applied to the SideDrawer while it is being opened and closed. It is the attention to detail – the little things like a drawer slide out animation – that delight users and have them come back to your app.

The Telerik SideDrawer supports several predefined transitions that developers get to choose from – simply set the DrawerTransitionType property to any of the enumeration values:

  1. Fade
  2. Push
  3. Reveal
  4. ReverseSlideOut
  5. ScaleUp
  6. SlideAlong
  7. SlideInOnTop
  8. Custom

If none of the built-in animations suit your needs, you should feel free to make custom ones yourself. All you'll need is to derive a class off of SideDrawerRenderer and override the CreateFadeLayer() and CreateCustomTransition() methods. Both iOS and Android require you register the custom renderer – the docs make it super easy.

Flexibility

Here are some more properties and events exposed by the Telerik SideDrawer that lends to developers having a lot of flexibility in how to use the UI for their specific app needs:

  • DrawerLength: Defines how much the drawer content should be extended over the main content in opened position.
  • DrawerLocation: Defines the location from which the drawer will be opened: Left, Right, Top or Bottom.
  • DrawerTransitionDuration: Defines the duration of the chosen transition.
  • DrawerOpening: Raised when the drawer starts opening.
  • DrawerOpened: Raised when the drawer is already opened.
  • DrawerClosing: Raised when the drawer starts closing.
  • DrawerClosed: Raised when the drawer is already closed.

Conclusion

That's all the important details about the SideDrawer – nice and simple. You don't need to fret about to how to organize your app's content – gently tuck away navigation or other panels for easy discoverability. You get the flexibility to control the transitions and work with commanding support if using an MVVM Framework. Take a look at the docs for a complete guide to using the SideDrawer and go use it to organize app content to your heart's content.

Other articles in this series:

Comments