SfTabView DisplayMode="ImageWithText" displays text and font icon overlapped in Android

[Sadhik]

<ContentPage.Resources>

        <ResourceDictionary>

            <OnPlatform x:TypeArguments="x:String" x:Key="fontfamilyOriginal" iOS="icomoon" Android="Fonts/icomoon.ttf" />

        </ResourceDictionary>

    </ContentPage.Resources>

<tabView:SfTabView x:Name="SfTabViewAcadamicHistory" DisplayMode="ImageWithText" BackgroundColor="White" VisibleHeaderCount="6"  VerticalOptions="FillAndExpand" EnableSwiping="True" >

                <tabView:SfTabView.SelectionIndicatorSettings>

                    <tabView:SelectionIndicatorSettings Color="#A5D5EB" Position="Bottom" StrokeThickness="3" />

                </tabView:SfTabView.SelectionIndicatorSettings>

                <tabView:SfTabItem Title="INFO" TitleFontAttributes="Bold" FontIconFontColor="#4E5F70" SelectionColor="#57C3E8" TitleFontColor="#4E5F70" 

                                       IconFont="&#xe923;" FontIconFontFamily="{StaticResource fontfamilyOriginal}">

<tabView:SfTabItem.Content>

     <Label Text="Hai" />

</tabView:SfTabItem.Content>

</tabView:SfTabItem>

</tabView:SfTabView>

Please reply...

Attachment: Desktop_f289a82b.rar

[Mugundhan Saravanan]

Hi Sadhik,

Thanks for contacting Syncfusion support.

We have checked the reported issue “FontIcon and DisplayText are overlapped in android”. We have fixed the reported issue by sample level changes using “TabHeight” property. We have created a sample as like your given code snippet. Please check the sample from the following link

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewFontSample1962719250
Please let us know if you have any other concern.

Regards,
Mugundhan S.

[Sadhik]

That was easy :), thank you.

Keep up the good work.

[Mugundhan Saravanan]

Hi Sadhik,

Thanks for your update.

We are glad to know your problem has been solved.

Please let us know if you have any other concern.

Regards,
Mugundhan S.

[IoTFier]

Hi Mugundhan,

1> Does Title property support line break down at the word level?

2> In XAML - is it possible to configure DisplayMode as Image in the non-selected mode and 

      in the tab item selected mode make it to ImageWithText including increasing the size of the font Icon ?

     To make it fit in the phone's screen width, upon selected tabItem, the width of the surrounding tabItems should be shrunk a bit to provide wider space for the selected tabItem. This will especially be needed when the tabItem has a longer text or has two words in it.

Your help will be really appreciated.

Thanks,

[Praveen Koildasan]

Hi Sadhik,

Thanks for your update.

Query 1: Does Title property support line break down at the word level?

Yes. This requirement can be achieved by using label inside the HeaderContent property and set the LineBreakMode as WordWrap for the Label which added in the HeaderContent in TabItem.

Query 2: Is it possible to configure DisplayMode as Image in the non-selected mode and in the tab item selected mode make it to ImageWithText including increasing the size of the font Icon?

Yes. We have achieved your requirement by using HeaderContent property of SfTabItem. Please find the attached sample which contains the solution for your queries.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TabHeaderSample-updated-1230566978 

  

 In this sample, we have use the SelectionChangedEvent and set the IsVisbleProperty as False based on a selected TabItem

Regards,
Praveen K.