CODEWITHSUNDEEP
androidxamlxamarinxamarin.formsxamarin.android
redOne
redOne

Reputation: 25

Insert icon in a tabbed page(Android) on xamarin form

I'm new to StackOverflow community!
I need help with one problem with android in Xamarin Forms. To be precise... I tried with some friends to build our first app. We choose(with the help of our University professor) Xamarin for the cross-platform development of Android and iOS for both systems using the Xamarin Forms. I created the interface part of the app and now I am stuck in a fort with big walls. When I try to add a Tabbed Page the icon for the functional bar, the app crashes(Android) but in iOS, the problem doesn't appear...

I'd try with some solution... like :

-Render in the NameApp.Droid adds different renderer only for the android part but no result... -Try another way to insert the icon in the .xaml file directly but no result... -Try to follow another way to modify the .axam file for the "Theme" part but no result...

I want to integrate all the stuff on time only in the "Main Project". I don't want for now touch the "nameProject.Droid" or "nameProject.iOS" part, But try to make in one shoot both(Andriod & iOS). I've found a different bug in Android (è.é) but for this, I am going crazy... But I need to modify the ".Droid" no problem I accept the challenge!

This is the result I aspire to create. "https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsbHJuWi04N0ZIc0E/components-tabs-usage-mobile7.png"

This is the way I add the Icon in the Tabbed Page. An assumption I add all the stuff in the "Resource" in ".Droid" and ".iOS :

        var MainPageTabbed = new MPageTabbed();

        var Profile = new Profile();

        var ListChat = new ListChat();

        if (Device.RuntimePlatform == Device.Android)
        {
            MainPageTabbed.Icon = "ldpi.png";
            Profile.Icon = "ldpi2.png";
            Chat.Icon = "ldpi1.png";

        }

        if (Device.RuntimePlatform == Device.iOS)
        {
            MainPageTabbed.Icon = "ldpi.png";
            Profile.Icon = "ldpi2.png";
            ListChat.Icon = "ldpi1.png";

        }
        NavigationPage.SetHasNavigationBar(this, false); 

        Children.Add(MainPageTabbed);
        Children.Add(Profile);
        Children.Add(ListChat);

Someone can help me please to find a solution?

Upvotes: 2

Views: 4443

Answers (2)

Anthony Griggs
Anthony Griggs

Reputation: 1641

If anyone is interested in a FontAwesome custom icon implementation I followed this tutorial to begin with: FontAwesome with Xamarin Forms

Unfortunately he doesn't give an example of integrating with tabbed pages but after some experimenting I finally figured out a simplified Xaml way to render it without a custom tabbed renderer:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:IBMobile.Views"
         xmlns:local2="clr-namespace:FontAwesome"
         x:Class="IBMobile.Views.HomePage"
         Visual="Material">
<ContentPage.IconImageSource>
    <FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Glyph="{x:Static local2:IconFont.Home}" />
</ContentPage.IconImageSource>

Upvotes: 4

Mathias Kirkegaard
Mathias Kirkegaard

Reputation: 481

Here you have an example of how to use the TabbedPage in xamarin forms:

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/tabbed-page/

... Xamarin.forms renders Android tabbed-pages as something called a viewpager combined with a TabPagerStrib, and it looks like the example in the link above.

You might read about BottomNavigationBar for Android instead, or look at this link for a TabPagerStrip with an image:

https://forums.xamarin.com/discussion/39937/adding-icons-to-a-pagertabstrip-instead-of-text

Upvotes: 5

Related Questions