CarouselView doesn't render with AbsoluteLayout on Android

[jerone]

We have successfully implemented the CarouselView in our application. When trying to put a few buttons for navigation on top of the CarouselView (background red), it got weird. We use AbsoluteLayout, because at one point we'll use a transparent background so the buttons will hover over the carousel content. However it won't render on Android, while it does work on iOS (see screenshot below).

The XAML looks like:

    <AbsoluteLayout BackgroundColor="Yellow" VerticalOptions="Fill">
        <StackLayout BackgroundColor="Blue" VerticalOptions="FillAndExpand">
            <controls:CarouselViewControl
                x:Name="IntroCarousel"
                ItemTemplate="{StaticResource myTemplateSelector}"
                ItemsSource="{Binding Pages}"
                Position="0" />
        </StackLayout>
        <StackLayout
            AbsoluteLayout.LayoutBounds="1,1,.5,1" 
            AbsoluteLayout.LayoutFlags="All"
            BackgroundColor="Red"
            Orientation="Horizontal"
            VerticalOptions="End">
            <Button
                x:Name="prevBtn"
                IsVisible="false"
                Style="{StaticResource IntroPreviousBtnStyle}"
                Text="Previous" />
            <Button
                x:Name="nextBtn"
                Style="{StaticResource IntroNextBtnStyle}"
                Text="Next" />
        </StackLayout>
    </AbsoluteLayout>

Current situation

Screenshot of our app on iOS (working):

Screenshot of our app on Android (not working):

Expected situation

So we expected to see no yellow background and the first item of the CarouselView to be visible (purple).

Is this a bug with CarouselView?

---

XF 2.3.3.168 CarouselView 2.5.1

[jerone]

So it appeared to be some inconsistency between Xamarin.iOS and Xamarin.Android, because the following XAML code works:

    <AbsoluteLayout BackgroundColor="Yellow"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill">
        <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All"
                     BackgroundColor="Blue"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand">
            <controls:CarouselViewControl x:Name="IntroCarousel"
                                          HorizontalOptions="FillAndExpand"
                                          ItemTemplate="{StaticResource myTemplateSelector}"
                                          ItemsSource="{Binding Pages}"
                                          Position="0"
                                          VerticalOptions="FillAndExpand" />
        </StackLayout>
        <StackLayout AbsoluteLayout.LayoutBounds="1,1,0.9,1"
                     AbsoluteLayout.LayoutFlags="All"
                     BackgroundColor="Red"
                     Orientation="Horizontal"
                     VerticalOptions="End">
            <Button x:Name="prevBtn"
                    IsVisible="false"
                    Style="{StaticResource IntroPreviousBtnStyle}"
                    Text="Previous" />
            <Button x:Name="nextBtn"
                    Style="{StaticResource IntroNextBtnStyle}"
                    Text="Next" />
        </StackLayout>

Thanks for the great control.

[alexrainman]

Did you solved this?

[jerone]

@alexrainman commented on 2 dec. 2016 18:26 CET:

Did you solved this?

Yeah, see code above. The trick was to use the LayoutBounds on both StackLayout.

[alexrainman]

Yes, Forms has some problems in Android.

[jerone]

I'm not sure which one was correct (iOS or Android), but still weird that they behave differently. 😞

[alexrainman]

If my work is helping you, please help me back: https://xamarinhq.wufoo.com/forms/nominate-a-xamarin-mvp/

[alexrainman]

This is what i have done that is community visible:

• Alex has been pretty active sharing his knowledge and answering questions in StackOverflow, GitHub and Xamarin Forums.
• Alex has been open sourcing Xamarin components and plugin with the community, with more of 10 repositories being maintained on GitHub.
• One of Alex's Xamarin.Forms plugin, the CarouselView, is currently being pulled into the Xamarin.Forms core (xamarin/Xamarin.Forms#853). As an stable widget, this control has become the standard for Xamarin.Forms carousel screens with more that 16K downloads in NuGet and more than 100 solved and not open issues.
• Another Alex's plugin, the SegmentedControl (https://github.com/alexrainman/SegmentedControl), is a big candidate to be also pulled into Xamarin.Forms core.
• Plus Xamarin.Forms UI related plugins, Alex shares plugins to set app icon Badge, Google Analytics and KeyChain access.
• Alex shares his knowledge about cutting edge technologies like Couchbase NoSQL and MobileIron integration with Xamarin Apps.