top of page

Enhancing Your Events with Rx

I was recently working on a walkthrough library that I can reuse in my apps, and I wanted to blend the background colors together as you swipe through each page using a scroll event. After implementing it, I planned to add animations and other effects in the same way. Turns out this wasn’t as straight forward as I thought, but Rx allowed me to use a different approach to implement it. In this post we will take a look at the walkthrough control from a high level using Xamarin.Android, and in more detail, how I used Reactive Extensions (Rx) to achieve the desired result by enhancing the ViewPager.ScrolledEvent.

Tutorial Screens are Easy, Right?

**(Insert phone video here)**

Every app has one these days; A few pages when you first open the app that tell you how the app works. Each page usually has an icon along with a description below it, and varying amounts of polish along with it. Setting this up in Xamarin. Android is pretty easy, we just add an Activity that has a ViewPager and a FragmentStatePagerAdapter as members to our project. The ViewPager is the UI control which will manage the transitions between pages and provide us with the scroll event we want, and our FragmentStatePagerAdapter will feed it the Fragments that represent each page in the walkthrough.

Shortfalls of the PageTransformer

If you are an Android developer you might be wondering why we aren’t using the recommended approach from the Android walkthrough Using ViewPager for Screen Sliders, which is to use a PageTransformer. After wrestling with it for a bit, I eventually ditched it in favour of Rx because:

  1. The project is written using the MVVM pattern and PageTransformer only takes a View. I wanted everything from coloring, etc. to be driven by the View Models.

  2. We need a scroll direction and you’re only given the current position.

  3. It’s somewhat difficult to debug because its tranformPage method is called simultaneously for 2 or 3 Views.

  4. I wanted to have the background do a nice color blending transition, but the out of the box experience made this very difficult.​

Shortfalls of the PageTransformer

**(Insert code here)**

Let’s have a look at how we replaced the PageTransformer with an enhanced version of the PageScrolled event using Rx. Have a glance at this code You can probably see what it’s doing without any further explanation, which is one of the nice things about Rx -readability. When you write code using the Rx, it starts to tell a story. There are no callbacks, no jumping around code files. Just a nice block of code that tells you where data comes in and how it gets processed.

**(Insert code here)**

Starting at the beginning, we convert the event into an IObservable and provide a lambda used for subscribing and unsubscribing from the event. This is boilerplate Rx functionality and makes managing the event easy because, each time the event fires off, this observable will emit a value. In our case, as the pages scroll, we will be notified of all those changes as a stream of data. We can also filter down the results. In this case, we are only really interested in the EventArgs and not the sender.

**(Insert code here)**

Since the observable is essentially a stream of events, we can do cool things with it, such as prime the stream. In this case, we tell the observable to start with a default value. Since this observable is based off of events, there is no guarantee when the first one will fire off, so we just instruct the observable to use t