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 (CarouselView 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.