Xamarin.Forms TitleView FillAndExpand not working with Android

Question

I created a TitleView in Xamarin.Forms. The view works on iOS, but on Android it will not fill up the parent:

The red area is the background of the Tabbar. Aqua the background of the TitleView. For me, it looks like there is some padding or margin?

This is my title view:


    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:ffi="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
                 xmlns:fft="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
                 x:Class="App.Views.TitleView"
                 BackgroundColor="Aqua"
                 HorizontalOptions=" FillAndExpand"
                 VerticalOptions="FillAndExpand">
        <ContentView.Content>
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Image Source="logo.png" HeightRequest="16" VerticalOptions="Center" HorizontalOptions="Center" ></Image>
                <Grid HorizontalOptions="End">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <ffi:SvgCachedImage Source="Images/info.svg" HeightRequest="20" HorizontalOptions="End">
                        <ffi:SvgCachedImage.Transformations>
                            <fft:TintTransformation HexColor="#ffff0000" EnableSolidColor="true"/>
                        </ffi:SvgCachedImage.Transformations>
                        <ffi:SvgCachedImage.GestureRecognizers>
                            <TapGestureRecognizer Tapped="infoIcon_Tapped" NumberOfTapsRequired="1" />
                        </ffi:SvgCachedImage.GestureRecognizers>
                    </ffi:SvgCachedImage>
                </Grid>
            </Grid>
        </ContentView.Content>
    </ContentView>

This is my content view:


    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:App"
                xmlns:pages="clr-namespace:App.Pages"
                xmlns:extensions="clr-namespace:App.Code.Extensions"
                xmlns:views="clr-namespace:App.Views"
                xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
                x:Class="App.MainPage"
                android:TabbedPage.ToolbarPlacement="Bottom">
        <NavigationPage.TitleView>
            <views:TitleView></views:TitleView>
        </NavigationPage.TitleView>
        <TabbedPage.Children>
            ...
        </TabbedPage.Children>
    </TabbedPage>

FreakyAli FreakyAli · Accepted Answer · 2018-12-05T13:14:52

Why don't you try something like this:

 <ContentView.Content>
        <StackLayout Spacing="0" Orientation="Horizontal"> 
            <Image Source="logo.png" HeightRequest="16" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" ></Image>                
                <ffi:SvgCachedImage Source="Images/info.svg" HeightRequest="20" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand >
                    <ffi:SvgCachedImage.Transformations>
                        <fft:TintTransformation HexColor="#ffff0000" EnableSolidColor="true"/>
                    </ffi:SvgCachedImage.Transformations>
                    <ffi:SvgCachedImage.GestureRecognizers>
                        <TapGestureRecognizer Tapped="infoIcon_Tapped" NumberOfTapsRequired="1" />
                    </ffi:SvgCachedImage.GestureRecognizers>
                </ffi:SvgCachedImage>             
    </ContentView.Content>

Xamarin.Forms TitleView FillAndExpand not working with Android

1 Answers