Color change of tab item

[PSyron]

Hi, How to change color of tabItem instead of total different icon?

[jpbrocca]

Hi @PSyron, how are you?

I am not sure what you are trying to achieve...Is this about our Tab Control ? Could you provide more info and please add an image as reference if possible.

Regards and thanks JP

[PSyron]

im trying to change icon color instead of changing whole icon every select time. my tabs are branded by client colour

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Wolny od wirusów. www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

2017-10-11 15:38 GMT+02:00 jpbrocca notifications@github.com:

Hi @PSyron https://github.com/psyron, how are you?

I am not sure what you are trying to achieve...Is this about our Tab Control ? Could you provide more info and please add an image as reference if possible.

Regards and thanks JP

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/UXDivers/Grial-UI-Kit-Support/issues/274#issuecomment-335812342, or mute the thread https://github.com/notifications/unsubscribe-auth/AFYuYphr4zEzFSueJ6A_vYz02aqAUth3ks5srMTXgaJpZM4P1ZJv .

[jpbrocca]

You mean something like setting a 'tint' color for the icon? This is not supported in our Tab Control.

[PSyron]

So is there any posibility to set anything else than ImageSource? Sounds like a really bad restriction for IconSelected. I need to brand icon color depeneding on user choice (theme it dynamically). Cannot but there anything else. Or is there a way to work around it? Basically we bought pro package only for TabControler which we cannot make usefull

[jpbrocca]

Hi @PSyron, how are you? Ok, I think I better understand now what you need.

If you take a look at the sample provided with Grial, you will find you have the DataTemplate for the Tab Control.

You can replace the <Image> with <FFImageLoading>, then use their transformation to tint the image (last one on the page):

https://github.com/luberda-molinet/FFImageLoading/wiki/Transformations-Guide

You can then change the color to the one you need through setters on the icon style.

If you send me an email to jpbrocca@uxdivers.com with your Grial Order number I can send you by EOD a sample.

Best JP

[PSyron]

Ahh found it! gonna check in a sec. Thanks

[PSyron]

Ahh great it is working. But I have problem with lagging/stuck tabs on changing/clicking them. Any idea what might cause this issue? Its hard to debug/catch it

[jpbrocca]

Is this happening after adding the ffimageloading transformation?

[PSyron]

hmm i guess when i tap on tab icon or text it doesnt go with navigation event. I have 3 tabs that might cause some issue

[PSyron]

@jpbrocca Hi I have left with 2 issues.

1. when i tap on tab icon or text it doesnt go with navigation event. It might be caused due to 3 tabs
2. If I remove NavigationPage.HasNavigationBar="false" from ContentPage that has tabControl it doesnt "load". What I mean it doesnt show up BUT if i navigate somewhere else and go back it appears.

Cannot find proper solution for those.

[PSyron]

It appears that second scenario only applies to iOS

[jpbrocca]

Hi @PSyron, how are you? Could you describe more what you are trying to achieve? It seems you want to navigate to another page by clicking on tab items?

Just in case, the TabControl we provide it is meant to be used inside a page and it will allow to make visible specific parts of that page. It acts similar to a SegmentedControl in iOS.

If you want to switch between pages and not views, the TabbedPage from Xamarin Forms should be more suitable. However, this control doesn't allow customization through xaml.

Please if the above doesn't apply, then provide more context/details so we can understand properly your issue and help you more.

Best JP

[PSyron]

Hi. So basically I wanted to use it naturaly. Switch between views, but somehow in iOS implementation when I remove NavigationPage.HasNavigationBar="false" bottom bar disappear, appears again on coming back to this view . Scenario:

1. Show dashboard (showing only list view which is first tab) , no tabs at bottom
2. Navigate to new page from element of list
3. Go back to dashboard
4. Tabbar is shown properly.

Thats scenario from iOS, Android is working properly whole time. For now i made workaround cause i've needed custom NavBar anyway so i set NavigationPage.HasNavigationBar="false"

[dirivero]

Hi PSyron,

I don't understand the first problem you mention regarding the navigation event.

Can you send me a sample where this issues can be reproduced so I can take a look? Contact me at drivero at uxdivers.com

Thanks Diego

[PSyron]

Hi. Basically i manage to workaround all of those issues more or less pretty. Now I have a new problem. 1 tab of navbar has listView. On listview item click it makes pushasync for new modal view/page. When user goes back , navbar is going up(around by its height value), leaving some space below.

Any known issue? Sending code is not possible due to all NDA contracts.

[PSyron]

How to turn off fade in, fade out animation on switching tabs. That might be issue with this whole library wrongly working on sgs6 etc wiec tabControl

[jpbrocca]

Set ShowAnimateTransition="False" on your Tab Control.

Best, JP

[PSyron]

@jpbrocca seems good and i was trying to do so but there is no such property on TabControl

[PSyron]

Ohh i found it in sample. Its not used as You pointed but it is property in style

[PSyron]

Tried it and unfortunetly is stil not working as it should. Is there anyway maybe to put "onTap" event on all tabItem elements that will trigger navigation to this page? Or put transparent-overlay on item that will do same. Cause now for 3 tabs in sgs6 edge it works terrible. Changing between tabs. iOS + my OnePlus devices working well

[jpbrocca]

Hi @PSyron, how are you? Sorry, it seems my previous comment missed the word Resources.

It is hard to understand what you have there (and diagnose what could be happening) without seeing the code.

Is there any chance you could write the xaml outline for this tab content? Just to understand which elements do you have...something schematic, like:

    <ContentPage>
            <tab:TabControl>
                ...
                <tab:TabItem>
                      <StackLayout>
                          <ListView>
                               ...

Also, are you using the color transformation? Did you try (on the problematic phone) to just do the same with the ListView and navigation but commenting the TabControl? Do you get similar result or different about NavBar?

Best JP

[PSyron]

 <DataTemplate x:Key="iOSTabItemTemplate">
                <Grid Padding="0" Margin="0" ColumnSpacing="0" RowSpacing="0" Style="{ StaticResource iOSTabItemStyle }">
                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="20" />
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" Grid.Column="0" Margin="0,8,0,0" VerticalOptions="Start" IsVisible="{ Binding IsSelected, Converter={ StaticResource iOSInvertBoolConverter } }" Style="{ StaticResource iOSTabItemIconImageDefaultStateStyle }" Source="{ Binding Icon }" />
                    <ffimageloading:CachedImage Grid.Row="0" Grid.Column="0" Margin="0,8,0,0" VerticalOptions="Start" IsVisible="{ Binding IsSelected }" Style="{ StaticResource iOSTabItemIconImageActiveStateStyle }" Source="{ Binding IconSelected }">
                        <ffimageloading:CachedImage.Transformations>
                            <ffimagetransformations:TintTransformation HexColor="{x:Static local:ThemeHelper.AccentColorHex}" EnableSolidColor="true" />
                        </ffimageloading:CachedImage.Transformations>
                    </ffimageloading:CachedImage>
                    <Label Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,0,4" IsVisible="{Binding HasText}" Style="{ Binding IsSelected, Converter={ StaticResource iOSTabItemTextStateStyleConverter }, Mode=OneWay }" Text="{ Binding Text }" />
                </Grid>
            </DataTemplate>

<ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
                        <!-- CUSTOM NAVBAR -->
            <Grid Grid.Row="0" Style="{ StaticResource CustomNavBarStyle }" VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="{x:Static local:ThemeHelper.PrimaryColor}">
                        <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="6*"/>
                                <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                <StackLayout Padding="10,0,0,0" HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="0"><Image Source="{x:Static local:ThemeHelper.BrandLogo}"/></StackLayout>
                        <Button x:Name="btnSearch" Image="ic_search_white" Grid.Column="1" BorderColor="Transparent" BackgroundColor="Transparent"/>
            </Grid>
            <!-- END OF CUSTOM NAVBAR -->

            <ScrollView Orientation="Vertical" Grid.Row="1" Grid.RowSpan="1">
                <tab:TabControl x:Name="tabControl" TabStripPlacement="Bottom" StyleClass="iOSTabControlStyle">

                    <tab:TabItem x:Name="tabNotification" Text="{ local:Translate TabNotifications }" Icon="ic_notifications_white" IconSelected="ic_notifications_white">
                        <BoxView x:Name="secondTabContent" BackgroundColor="Aqua" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />
                    </tab:TabItem>
                     <tab:TabItem x:Name="tabHome" Text="{ local:Translate TabHome }" Icon="ic_home_white" IconSelected="ic_home_white">
                        <local:CategoryList x:Name="categoryList" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                    </tab:TabItem>
                    <tab:TabItem x:Name="tabSettings" Text="{ local:Translate TabSettings }" Icon="ic_settings_white" IconSelected="ic_settings_white">
                        <BoxView BackgroundColor="Fuchsia" HorizontalOptions="Center" VerticalOptions="Center" />

                    </tab:TabItem>
                </tab:TabControl>
            </ScrollView>
        </Grid>
    </ContentPage.Content>

[jpbrocca]

Hi @PSyron, how are you?

Thanks for posting the xaml code. There are a few things you could try to improve performance on the problematic device:

• you could remove the since it seems your content shouldn't scroll.
• it seems you are using the color transformation for the icons. That could potentially cause some performance issues. You could try removing it and check if it has an impact. If it is not causing any issue, then you could remove the and just have the to be always displayed but to only change the color through tint.
• you could also try to simplify the page layout to avoid nesting the second grid and the stacklayout.

About the navigation part: sorry, I am not sure what your goal is. Any chance you could send me by email a video or gif showing the main problem? Please send it to: jpbrocca@uxdivers.com

Best JP