Create your own Animated Bottom Picker

OK guys, I’m still playing around in animation in Xamarin, so in this post I want to try out two other animation functions, which are TranslateTo and FadeTo. In order to do that, I created my own picker that comes up from the screen’s bottom , just like picker you would get if you used Swift or React Native. The picker itself would not really looks similar like the picker in that platforms but it would kinda works like them. My goal in this post will be just exploring different kind of animation in Xamarin. In my last post, I already used RotateTo for accordion list view which was awesome and I’m exited to dig deeper about this stuff. So, let’s begin.

Absolute Layout

First thing first, we need to create a layout that enable us to put our “picker” outside the screen when the app started because the picker will be showing up from the bottom of the screen. So, I used Absolute Layout to put some elements off the screen. If you are not familiar with Absolute Layout, basically anything you put inside this layout can have 2 important properties. First, LayoutBonds which takes 4 parameters, X position, Y position, Width and Height. Second, LayoutFlags which is the setting of the LayoutBound, whether you want to use pixel or screen proportion for those 4 parameters. You can read the complete explanation in the documentation, in this post I will only discuss what I did with my absolute layout. So, let’s take a look at the code first.

BottomPickerCode

So, I put everything inside absolute layout, but I only used absolute layout’s properties in two elements. First, in a BoxView, which I used to the background of the picker. I set layout flag to All, means the layout bound will be the screen’s proportion. With the layout bound 0,0,1,1; I put the background in upper left corner (0,0) and I set it as big as the screen (1,1). I’ll do the same for the Frame, which will be the picker and contain a list view. I just set different proportion to make it bellow the screen and has half of the screen size. For user interaction, I only used familiar function like entry’s Focused, list view’s ItemSelected and also GestureRecognizer for the box view. Now, let’s move to code behind and add some animations into our screen.

The Animation

I created two methods, Show_Picker and Hide_Picker to execute the animation that will be accessed from our event handlers. Here’s the code.

public partial class PickerButtomPage : ContentPage
{
    public ObservableCollection CountryList;

    public PickerButtomPage()
    {
        InitializeComponent();
        CountryList = new ObservableCollection()
        {
            new Country("Indonesia"),
            new Country("India"),
            new Country("United States"),
            new Country("Brazil"),
            new Country("United Kingdom")
        };
        PickerContry.ItemsSource = CountryList;
    }

    void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
    {
        ((ListView)sender).SelectedItem = null;
    }

    void Handle_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem == null)
            return;

        Country country = e.SelectedItem as Country;
        EntryCountry.Text = country.Name;

        Hide_Picker();
    }

    void Handle_Tapped(object sender, EventArgs e)
    {
        Hide_Picker();
    }

    void Handle_Focused(object sender, FocusEventArgs e)
    {
        Show_Picker();
    }

    void Show_Picker()
    {
        Background.FadeTo(0.4, 500, Easing.SinIn);
        PickerFrame.TranslateTo(0, -300, 500);
    }
void Hide_Picker()
    {
        Background.FadeTo(0, 500, Easing.SinOut);
        PickerFrame.TranslateTo(0, 300, 500);
        EntryHide.Focus();
    }
}

public class Country
{
    public Country(string name){ Name = name; }
    public string Name { get; set; }
}

So in Show_Picker, I faded in the background (box view) into opacity 0.4 in 0.5 second. Meanwhile I also moved the Frame Picker 300 pixels up, also in 0.5 second. I did the other way around for the Hide_Picker and then added one line to remove focus from the Entry.

Basically, this how my picker works. I trigger the picker to show up when the country entry is focused . Then when user choose one country or hide the picker by clicking the background, I set the focus to another entry I hide in the screen to prevent the user to type manually to the entry. And if it works as expected, it will look like this.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s