Putting an image on navigation bar.

shubham1shubham1 Member ✭✭✭

How to put an image/icon on the navigation bar of the tabbed page?
Like the screenshot which is created on core Android.
How to do that in xamarin forms.

Help

Best Answers

Answers

  • shubham1shubham1 Member ✭✭✭

    Hi @AlessandroCaliaro here is my Xaml Code

     <TabbedPage.Children>
    
        <pages:AddJar/>
        <pages:KitchenActivities/>
        <pages:ShoppingCart/>
    
    </TabbedPage.Children>
    
    <NavigationPage.TitleView>
    
        <StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
    
            <Image Source="dropdown.png">
                <!--<Image.GestureRecognizers>
                    <Image.TapGestureRecognizer
                        Tapped="HandleTapped" />
                </Image.GestureRecognizers>-->
            </Image>
    
            <!--<Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />-->
    
        </StackLayout>
    
    </NavigationPage.TitleView>
    
    <TabbedPage.ToolbarItems>
    
        <ToolbarItem Icon="ic_user_small.png" Priority="1" Order="Default" x:Name="user_Icon"/>
        <ToolbarItem Icon="notification_icon.png" Priority="1" Order="Primary" x:Name="notification_Icon"/>
    
    </TabbedPage.ToolbarItems>
    

    But I am getting this error

    ** No property, bindable property, or event found for 'TitleView', or mismatching type between value and property.**
    
  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    maybe a problem with TabbedPage? I don't know, it's new and I have never used it.
    Try this sample

    https://developer.xamarin.com/samples/xamarin-forms/Navigation/TitleView/

  • shubham1shubham1 Member ✭✭✭

    @AlessandroCaliaro Now it is giving error
    Xamarin.Forms.NavigationPage.TitleViewProperty not found

  • NMackayNMackay GBInsider, University mod
    edited September 2018

    There's a few open bugs for TitleView including this one I reported.

    https://github.com/xamarin/Xamarin.Forms/issues/3834

    I'd check if there's any open issues, obviously your TabbedPage has to be wrapped in a navigation page, i'm guessing it is.

    I haven't tested with TabbedPage

  • shubham1shubham1 Member ✭✭✭

    Hi @NMackay , Thanks for the reply.

    Here is my Tabbed Page

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SmartJar.TabbedPage1"
            xmlns:pages="clr-namespace:SmartJar.Pages;assembly=SmartJar"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="#000000"
            android:TabbedPage.BarSelectedItemColor="#F6694A"
            android:TabbedPage.IsSwipePagingEnabled="True">
    
    <TabbedPage.Children>
        <pages:AddJar/>
        <pages:KitchenActivities/>
        <pages:ShoppingCart/>
    </TabbedPage.Children>
    
    <!--<ContentPage>-->
        <NavigationPage.TitleView>
    
            <StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
    
            <Image Source="dropdown.png">
                <!--<Image.GestureRecognizers>
                        <Image.TapGestureRecognizer
                        Tapped="HandleTapped" />
                    </Image.GestureRecognizers>-->
            </Image>
            <Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />
    
            </StackLayout>
    
        </NavigationPage.TitleView>
    <!--</ContentPage>-->
    <!--<ContentPage>
    
    </ContentPage>-->
    
    <TabbedPage.ToolbarItems>
        <ToolbarItem Icon="ic_user_small.png" Priority="1" Order="Default" x:Name="user_Icon"/>
        <ToolbarItem Icon="notification_icon.png" Priority="1" Order="Primary" x:Name="notification_Icon"/>
    </TabbedPage.ToolbarItems>
    

    And what obviously your TabbedPage has to be wrapped in a navigation page means?

  • shubham1shubham1 Member ✭✭✭
    edited September 2018

    Hi @NMackay , Good Morning.
    I am doing the same.
    But I am getting run time error

    **System.TypeLoadException: Could not resolve type with token 0100005c (from typeref, class/assembly Xamarin.Forms.Xaml.IReferenceProvider, Xamarin.Forms.Core**
    

    I don't know why. Did I need to write some code on MainActivity Page?

    and one more thing when I update the xamarin.form in both PCL and Project.Android it is giving error
    like

    Severity Code Description Project File Line Suppression State
    Error Exception while loading assemblies: System.IO.FileNotFoundException: Could not load assembly 'Xamarin.Android.Support.Design, Version=1.0.0.0, Culture=neutral, PublicKeyToken='. Perhaps it doesn't exist in the Mono for Android profile?
    File name: 'Xamarin.Android.Support.Design.dll'
    at Java.Interop.Tools.Cecil.DirectoryAssemblyResolver.Resolve(AssemblyNameReference reference, ReaderParameters parameters)
    at Xamarin.Android.Tasks.ResolveAssemblies.AddAssemblyReferences(DirectoryAssemblyResolver resolver, ICollection`1 assemblies, AssemblyDefinition assembly, Boolean topLevel)
    at Xamarin.Android.Tasks.ResolveAssemblies.Execute(DirectoryAssemblyResolver resolver) SmartJar.Android

  • NMackayNMackay GBInsider, University mod

    @shubham1

    Weird, not sure what to suggest, maybe attach your solution with a zip (delete all ob & bin folders & packages) and I'll try and have a look in my lunch hour.

    I'd suggest deleting all obj & bin folders, close VS, open VS again (don't open solution), clear your nuget cache (tools->options_.nuget package manager), open solutions, restore packages , rebuild the app package try rebuilding teh ANdroid project.

  • shubham1shubham1 Member ✭✭✭

    Here is my sample..
    @NMackay

  • NMackayNMackay GBInsider, University mod

    I had a quick look, your nuget packages are really screwed up,

    Your app references for 3..0-pre when it should be referencing 3.2 stable unless you wanted to target 3.3, Your android project is referencing Xamarin Forms 3.1 (which wouldn't have the Android implementation of TitleView). You Android project also has a package dependency on Xamarin.Android.Support.v4 25.4.0.2 which means you can't upgrade the Android project to Forms 3.2 as that has a dependency on Xamarin.Android.Support.v4 27.0.2.

    https://www.nuget.org/packages/Xamarin.Forms/

    You'll need to figure out which package in Android has the dependency Xamarin.Android.Support.v4 25.4.0.2 and either upgrade it or stop using it if you want to use Xamarin Forms 3.2.0.839982.

    All your projects should also use the same version of Forms, the iOS and UWP projects reference Forms 2.5.0.

    Just to be clear, to use TitleView, all your projects need to reference Xamarin Forms 3.2.0.839982 or higher and your Android project has to reference Xamarin.Android.Support.v4 27.0.2 or higher.

  • shubham1shubham1 Member ✭✭✭

    @NMackay ,
    Thank you for the solution, I have tried your solution but unable to achieve that.
    Can you please do some changes and sent it to me?

  • NMackayNMackay GBInsider, University mod

    @ColeX Could you assist?

    Thanks.

  • shubham1shubham1 Member ✭✭✭

    @NMackay and @AlessandroCaliaro

    Thanks a lot to both of you. Your solution makes me able to implement TitleView.

    Thanks

  • UnreachableCodeUnreachableCode USMember ✭✭✭

    @NMackay I couldn't get your approach to work on a TabbedPage. I set the TitleView but nothing appeared:

    <TabbedPage 
            ...
                android:TabbedPage.ToolbarPlacement="Bottom"
                BarBackgroundColor="#302E31"
                BarTextColor="White"
                android:TabbedPage.BarItemColor="#FFFFFF">
        <NavigationPage.TitleView>
           <Label Text="test" />
        </NavigationPage.TitleView>
    

    I wanted to set the Title Icon for 5 tabs in just one place. But what I've ended up having to do was this:

                <NavigationPage Title="First Tab" BarBackgroundColor="#302E31">
                    <x:Arguments>
                        <local:TimeSheetEntryPage NavigationPage.TitleIcon="customerLogo.png" />
                    </x:Arguments>
                </NavigationPage>
                <NavigationPage Title="Second Tab" BarBackgroundColor="#302E31">
                    <x:Arguments>
                        <local:TimeSheetEntryPage NavigationPage.TitleIcon="customerLogo.png" />
                    </x:Arguments>
                </NavigationPage>
    

    etc

    Is there even a way to set it just once?

  • saisudheerreddysaisudheerreddy Member ✭✭

    Hello @UnreachableCode did you find the solution for this issue if yes can you please share the process with us

    thanking you,

Sign In or Register to comment.