Look what I made over last weekend, SliderView!!!!

MichaelWatsonMichaelWatson USXamarin Team Xamurai
edited June 2015 in Xamarin.Forms

Hey Forms Community! I was hacking around last weekend to make some kind of SliderView that I could use instead of a CarouselPage. I wanted to share this with the community in the hopes that it will help someone out until the Xamarin.Forms team is able to release a real CarouselView. I only created this for iOS and Android; I'm not the best at Windows Phone, but if anyone wants to finish that potion I will happily put it in the GitHub.

EDIT

Here are the videos that I forgot to add:

iOS:

Android:

How did I do this?

I came up with an idea to make a canvas, then animate views into the canvas to create a sliding action. To accomplish this, I utilized a ContentView for my SliderView and then created ViewRenderers to bring in Gesture Recognizers on the iOS and Android platforms. The SliderView has two main properties that are key to making this work: A ViewScreen property that is an AbsoluteLayout and a Children property that is an ObservableCollection of Xamarin.Forms Views. The ViewScreen is what will actually be considered the "View Window" on the phone and the Children will be all the views in the Slider.

As you swipe in either direction, SliderView places the next view off screen and then uses the TranslateTo animation to bring the CurrentView onto the ViewScreen. I also created a little StackLayout for the tiny white dots that we all know and love. I did not implement the click event for the dots. The dots are buttons and you could use the click event to set the CurrentPage property and then have that fire off the TranslateTo, but you would need to build that in. Personally, I hate the little white dots with the click feature because they are too small to be of any use on mobile. That is my personal opinion and I know probably a lot of people will disagree with me, but the option is there for anyone to build it in. I personally have never used them so I made that decision for my applications. Below is a picture that depicts what is going on in SliderView:

SliderView Construction

Great! So I bet a lot of people are probably thinking about the performance of the images on Android. If you look in the project (GitHub link at bottom of this post), you'll see that I have images in the drawable, drawable-hdpi, drawable-xhdpi, and drawable-xxhdpi folders. The images were properly scaled to meet the various pixel densities that we see across the fragmented Android devices. I wanted to take this opportunity to show just how much memory can be saved on image performance when they are scaled to the appropriate sizes.

I created some test scripts that I ran in Xamarin Test Cloud. If you want to see the specs of the devices, check out the GitHub link at the bottom and it's all in the README with more details.

I ran three tests:

  1. Using Original Images (minimum of 2500x1500 pixels for all images)
  2. Using images scaled to 1080 pixel width
  3. Using scaled images for all of the different densities

Below are the results from Test Cloud:

Slider

Look at how much memory was saved on all android devices tested. So if you don't scale your images, that is probably one source of performance issues. I hope this helps new Xamarin.Forms users to better understand what you should be doing on the Android side.

This is super cool! I'm able to have pretty awesome performance with this SliderView and I can pass in any kind of Xamarin.Forms View into it. I also was able to see that when I navigate away and then reload the SliderView, my memory doesn't grow from the first time I loaded the SliderView. Perfect!

I think this is awesome that I can make controls like this in Xamarin.Forms! I hope this helps out someone. I also went through all my code and put comments in it so anyone can understand what is going on when they look at the . Go Forms!

GitHub link to the code:
https://github.com/xamarin/customersuccess/tree/master/samples/Xamarin.Forms/SliderView

Posts

  • GeorgeCookGeorgeCook PEUniversity ✭✭✭

    Cool. You got a video of it working?

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    @MichaelWatson I love the charts showing performance, but you forgot to post some screenshots with the actual control

  • MaruMaru DEMember ✭✭

    @MichaelWatson

    Look at how much memory was saved on all android devices tested. So if you don't scale your images, that is probably one source of performance issues.

    Do you mean scaling inside the app (Image.Scale) or scaling the images prior so they fit the different densities?

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    Just Edited my original post to add some videos. Sorry about that!

    @Maru
    I didn't do any scaling of the images inside the app. I scaled all my images using Sketch and then added them to my project. There is a way to scale images on Android, but you need to use the BitMap Factory for all of that. You can do this with a Custom Renderer.

  • chris_riesgochris_riesgo USUniversity ✭✭✭
    edited June 2015

    I also made a custom Pager Layout control. Blog post to come. Video link below:

    Xamarin.Forms Pager Layout

  • NicolasHotterbeekxNicolasHotterbeekx USMember ✭✭✭

    @MichaelWatson, nice work, I recently created a control like yours in a simular way (my translateTo is done in Xamarin.Forms). But I struggled with the gestures. After a quick test of your code, I noticed you have the same problem.

    If you add a tapgesture to a view inside your slider, the swipe gesture will no longer be detected. For example a swipe gesture on the label in RandomAbsoluteLayout will suffocate the swipe left or right.

    To fix that you should handle the swipe gesture on the level of the viewgroup, I had a little forum thread where @
    to solve this: http://forums.xamarin.com/discussion/comment/129647#Comment_129647

  • JensDemeyJensDemey USMember ✭✭

    @MichaelWatson
    First off, thanks for sharing your findings with the community.
    But there is one thing that I do not completely understand. In the chart that you have made we can see that the red 1080p line has a value of 100 for the Samsung Galaxy S4. Then next up is the green line or the "scaled" version of the image which has a value of 55. But for the Samsung Galaxy S4 wouldn't the scaled version also be 1080p (xxdpi) just like the red line? If so why does the value for the green and red line differ?

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    @NicolasHotterbeekx Thanks for pointing this out! I have a branch open that I'll be working on these changes, a much better way of getting the entire group. Also just good information on understanding how GestureDetectors work on Android. I already have it working, but I need to tweak some things to fix my little dots. Once I have the changes finished, I'll run the test again with the optimized images to see how this impacts performance. I think it's going to be better just because there are a lot of checks this eliminates. Stay tuned!

    @JensDemey
    You're right and I thought this was strange also (same thing with LG Nexus 5). The only thing I can say for that, is even though I scaled the images to 1080px width, I put them all in the drawable folder, not the drawable-xxhdpi folder. I didn't think that would not have an impact at all so I don't have a great explanation for that. I'll ask some of our Android experts to see if I can figure out a reason why.

    @chris_riesgo Looks great. Does that use Pages for the views?

  • chris_riesgochris_riesgo USUniversity ✭✭✭

    @MichaelWatson - Just ContentView controls. Can make the content area any size you'd like.

  • MaruMaru DEMember ✭✭

    @MichaelWatson How is your branch coming along? :)

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    @Maru: Sorry! I finally got some time this weekend to work on everything and got the branch up. Now the swipe gestures propagate through the ViewGroup thanks to @NicolasHotterbeekx feedback. I didn't notice too much change in the performance, but the code is more easily digestible.

    @chris_riesgo : Nice work and thanks for sharing it with the community! Just checked it all out and I like your design. Much more built out then mine at this time and a great blog post to follow it up with.

    Anyone who is reading this for the first time, these are more great examples of how you can create custom controls to fit your applications needs with Xamarin.Forms.

  • rohitasthanarohitasthana USMember

    I used Chris's Control in my opensource app though its good but still need improvement https://github.com/asthanarht/CPXamarin

  • rohitasthanarohitasthana USMember

    @MichaelWatson - You control will not swipe in android if there is only child of custom view and no Image. Is it known bug?

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    @rohitasthana - What is the child custom view subclass from? I don't believe a bug is affecting this, more likely the custom view doesn't have the OnClickListener in it.

    NicolasShotterBeekx recommended some changes that propagate the click listener through the children. I implemented them and added it to another branch in GitHub. If you would like to give it a shot with the link below, it might solve the problem. The changes are primarily in the Android Custom Renderer.

    https://github.com/xamarin/customer-success/tree/test-sliderview-nicolashotterbeekx/samples/Xamarin.Forms/SliderView

  • NicolasHotterbeekxNicolasHotterbeekx USMember ✭✭✭

    That's a nice way to write my name :) But it's nice you picked it up again. I will definitely check it out!

  • rohitasthanarohitasthana USMember

    It works but transition is not smooth and each custom view took time to load during transition. Thanks Anyway

  • Must get a WindowsPhone version of this running - it's brilliant!

  • @MichaelWatson SliderView doesnt swipe in carouselpagein Android. Any workaround?

Sign In or Register to comment.