Can't remove the spacing of TabView with Centerbutton (Android)

[Paul Ruedisueli]

Hello,

I am using a Tabview with a Centerbutton. On iOS it looks great but Android has an ugly spacing between the tabs (see screenshot)

<syncfusion:SfTabView x:Name="tabView" AbsoluteLayout.LayoutBounds="1, 1, 1, 1"  AbsoluteLayout.LayoutFlags="SizeProportional, PositionProportional" OverflowMode="CenterButton" BackgroundColor="{StaticResource lichtGrijzeAchtergrond}" SelectionChanged="tabView_SelectionChanged" VerticalOptions="FillAndExpand" TabHeaderPosition="Bottom" DisplayMode="Image" TabHeaderBackgroundColor="White" VisibleHeaderCount="5">

            <syncfusion:SfTabView.SelectionIndicatorSettings>

                <syncfusion:SelectionIndicatorSettings Color="Transparent" />

            </syncfusion:SfTabView.SelectionIndicatorSettings>

            <syncfusion:SfTabView.CenterButtonSettings>

                <syncfusion:CenterButtonSettings Height="60" Width="60">

                </syncfusion:CenterButtonSettings>

            </syncfusion:SfTabView.CenterButtonSettings>

            <syncfusion:SfTabView.CenterButtonView>

                <Grid>

                    <ffsvg:SvgCachedImage VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="resource://AppviseursV2.Resources.icon_plus.svg">

                        <ffsvg:SvgCachedImage.Transformations>

                            <fftransf:TintTransformation HexColor="{StaticResource colorButtonsString}" EnableSolidColor="true"/>

                        </ffsvg:SvgCachedImage.Transformations>

                        <ffsvg:SvgCachedImage.GestureRecognizers>

                            <TapGestureRecognizer Tapped="CenterButton_Tapped"/>

                        </ffsvg:SvgCachedImage.GestureRecognizers>

                    </ffsvg:SvgCachedImage>

                </Grid>

            </syncfusion:SfTabView.CenterButtonView>

            <syncfusion:SfTabItem x:Name="dashboardPage">

                <syncfusion:SfTabItem.HeaderContent>

                    <StackLayout Spacing="0">

                        <BoxView IsVisible="{Binding BoxViewVisible}" HeightRequest="1" BackgroundColor="#c7c7c7"/>

                        <ffsvg:SvgCachedImage x:Name="homeImage" Style="{StaticResource menuIconsSmall}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Source="resource://AppviseursV2.Resources.icon_dashboard.svg">

                            <ffsvg:SvgCachedImage.Transformations>

                                <fftransf:TintTransformation EnableSolidColor="true"/>

                            </ffsvg:SvgCachedImage.Transformations>

                        </ffsvg:SvgCachedImage>

                    </StackLayout>

                </syncfusion:SfTabItem.HeaderContent>

            </syncfusion:SfTabItem>

How can I fix this?

[Mugundhan Saravanan]

Hi Jasper, 

 

Greetings from Syncfusion. 

 

Query : “Can't remove the spacing of TabView with Centerbutton (Android)” 

 

In our SfTabview.Android, we have drawn the tab item based on the VisibleHeaderCount with default TabWidth so it spacing may occur by using the custom tab header and this can be overcome by remove the visible header count property or set the TabWidth value based on the device, we have checked by removing VisibleHeaderCount property and working as expected, please check the following sample and let us know any concern. 

Before :

After:

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewCenterButtonSample-493056221


If the reported issue is still reproducing means, please modify the provided sample based on the replicated issue which will be helpful to proceed further 


Regards,
Mugundhan S. 

[Paul Ruedisueli]

Hello,

Yes thanks, that was the solution! 

The third button has a little spacing but it is okay! :)

Best regards,

Jasper

[Sakthivel Palaniyappan]

Hi Jasper,

Thanks for the update. Please get back us if you need any other assistance on this.

Regards,
Sakthivel P. 

[Sakthivel Palaniyappan]

Hi Jasper,

The third button has a little spacing for this we suggest to use CenterButtonSettings Width property as like below code snippet.

XAML: 

<syncfusion:SfTabView.CenterButtonSettings> 

                <syncfusion:CenterButtonSettings Height="60" Width="70"> 

                </syncfusion:CenterButtonSettings> 

            </syncfusion:SfTabView.CenterButtonSettings> 

Screenshot:



Please let us know if you have any other queries.

Regards,
Sakthivel P.