Forum› Xamarin.Forms

Tabbed Page with Icon

RotkivRotkiv USMember ✭
in Xamarin.Forms

Hello,

I want to set icons in tabbed page and I'm using this code but everytime i get null exception on this line if (actionBar.TabCount > 0) and also app crash when i go from login screen to this main screen https://forums.xamarin.com/discussion/comment/151236/#Comment_151236

Code is
`public partial class Main : TabbedPage {
public Main() {
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);

        if (Device.OS == TargetPlatform.iOS)
        {
            Children.Add(new NavigationPage(new Timer() { Title = "Ikas" }));
            Children.Add(new NavigationPage(new Views.Reports.ReportsPage() { Title = "Dkas" }));
            Children.Add(new NavigationPage(new Profile() { Title = "Zkas" }));
        }
        else
        {
            Children.Add(new Timer() { Title = "Ikas", Icon = "ic_ikas" });
            Children.Add(new Views.Reports.ReportsPage() { Title = "Dkas", Icon = "ic_dkas" });
            Children.Add(new Profile() { Title = "Zkas", Icon = "ic_zkas" });
        }
    }

}`

and custom renderer

using Android.App; using Android.Widget; using Xamarin.Forms; using Xamarin.Forms.Platform.Android; using Android.Graphics.Drawables; using System; using Android.Graphics; using Android.Runtime; using System.ComponentModel; using Android.Views;
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CTabbedPageRenderer))]
namespace somenamespace
{
public class (CTabbedPageRenderer))]: TabbedRenderer
{

`    private Activity activity;
    private TabbedPage _tabbedPage;
    private const string COLOR = "#FFFFFF";


    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
    {
        base.OnElementChanged(e);

        activity = this.Context as Activity;
        _tabbedPage = e.NewElement as TabbedPage;


    }

    protected override void DispatchDraw(Canvas canvas)
    {

        ActionBar actionBar = activity.ActionBar;


        if (actionBar.TabCount > 0)
        {
            ColorDrawable colorDrawable = new ColorDrawable(global::Android.Graphics.Color.ParseColor(COLOR));
            actionBar.SetStackedBackgroundDrawable(colorDrawable);
            ActionBarTabsSetup(actionBar);
        }

        base.DispatchDraw(canvas);
    }

    private void ActionBarTabsSetup(ActionBar actionBar)
    {
        try
        {
            //_tabbedPage.Children[0].IC
            for (int i = 0; i < actionBar.TabCount; i++)
            {
                Android.App.ActionBar.Tab dashboardTab = actionBar.GetTabAt(i);
                if (TabIsEmpty(dashboardTab))
                {

                    int id = Resources.GetIdentifier(_tabbedPage.Children[i].Icon.File, "drawable", Context.PackageName);
                    TabSetup(dashboardTab, id);
                }

            }

        }
        catch (Exception)
        {

        }

    }

    private bool TabIsEmpty(ActionBar.Tab tab)
    {
        if (tab != null)
            if (tab.CustomView == null)
                return true;
        return false;
    }

    private void TabSetup(ActionBar.Tab tab, int resourceID)
    {
        ImageView iv = new ImageView(activity);
        iv.SetImageResource(resourceID);
        iv.SetPadding(0, 10, 0, 0);

        tab.SetCustomView(iv);
    }
}

}`
Can some one help me?

Tagged:

Answers

  • RotkivRotkiv USMember ✭


    The idea is to achieve something like this.

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭

    have you solved this? I need it too!

  • ZaidSAhmedZaidSAhmed USMember ✭✭

    In your tabs activity (or main activity), add this

    var pager = FindViewById<Android.Support.V4.View.ViewPager>(Resource.Id.pager);
pager.AddOnPageChangeListener(new ViewPageListenerForActionBar(ActionBar));

ActionBar.AddTab(pager.GetViewPageTab(ActionBar, Resource.Drawable.heart));
ActionBar.AddTab(pager.GetViewPageTab(ActionBar, Resource.Drawable.call));
ActionBar.AddTab(pager.GetViewPageTab(ActionBar, Resource.Drawable.user));

var adapter = new YourFragmentPagerAdaptor(SupportFragmentManager);
adapter.AddFragment(new Tab1Fragment());
adapter.AddFragment(new Tab2Fragment());
adapter.AddFragment(new Tab3Fragment());

pager.Adapter = adapter;

    And make a static class and place this function in it:

    public static ActionBar.Tab GetViewPageTab(this ViewPager viewPager, ActionBar actionBar, int icon)
{
    var tab = actionBar.NewTab();
    tab.SetIcon(icon);
    tab.TabSelected += (o, e) =>
    {
        viewPager.SetCurrentItem(actionBar.SelectedNavigationIndex, false);
    };
    return tab;
}

    Hope this will help.. :smile:

  • wilconwilcon USMember ✭✭✭
    edited May 2017

    You can achieve this by adding the following lines in your TabbedPage XAML file:
    <local:PageA Icon="icon.png" />
    <local:PageB Icon="icon.png" />
    <local:PageC Icon="icon.png" />

    Where local is referring to your Views:
    xmlns:local="clr-namespace:YourApp.Views;assembly=YourApp"

    It works like a charm in my application.

  • AbhumMumbhauAbhumMumbhau USMember ✭✭

    @wilcon sorry, how did you solved it for Android? Because app crashes if I use your way. could you post some code and where didi you stored icons? thanks

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    I don't understand why @Rotkiv code didn't work. Please check where you have those .png files. For both Android and iOS they must be in the Resources directories and the Build Actions be set to Android Resource and Bundle Resource respectively.

  • AbhumMumbhauAbhumMumbhau USMember ✭✭

    I finally solved the issues moving images for Android into drawable-* and using a custom icon into the default folder drawable. After, I used Icon = 'icon_name_into_drawable.png' and remember the .ext for icon!

  • NicolaLoroNicolaLoro USMember ✭✭

    I'm leaving my understanding, in case someone is having a similar issue, but for TabbedPage in iOS.
    Since iOS 9 Apple is pushing to use images from Assets Catalog, instead of from the \Resources folder. So I moved all my icons/images into Assets Catalog, but I realized a TabbedPage with icons was crashing the app.
    Reason was that those icons needed to be present in the \Resources folder.
    So, use Assets Catalog for every image, except for images used as icons in TabbedPages.
    (lost 5 hours on that -> thanks Apple)

  • JonahKunzJonahKunz USMember ✭✭

    Wow, thanks for this @NicolaLoro.... been messing with this all morning.

  • PriyanKaAgRawaLPriyanKaAgRawaL Member ✭✭
    edited March 2018

    @wilcon said:
    You can achieve this by adding the following lines in your TabbedPage XAML file:
    <local:PageA Icon="icon.png" />
    <local:PageB Icon="icon.png" />
    <local:PageC Icon="icon.png" />

    Where local is referring to your Views:
    xmlns:local="clr-namespace:YourApp.Views;assembly=YourApp"

    It works like a charm in my application.

    If want to specify Icon height, width and Fontsize for Tabs name where I can do that

  • Endrit14Endrit14 Member ✭✭✭

    @wilcon

    this is my code and the app crash ??







  • Endrit14Endrit14 Member ✭✭✭

    Code






  • Endrit14Endrit14 Member ✭✭✭

    /





    /

  • Endrit14Endrit14 Member ✭✭✭

    @wilcon said:
    You can achieve this by adding the following lines in your TabbedPage XAML file:
    <local:PageA Icon="icon.png" />
    <local:PageB Icon="icon.png" />
    <local:PageC Icon="icon.png" />

    Where local is referring to your Views:
    xmlns:local="clr-namespace:YourApp.Views;assembly=YourApp"

    It works like a charm in my application.

    It dont show to me that .Views option ???
    I am just using
    MyApp;assembly="MyApp"
    and this is not working for me ,the app is crashing??

  • Ashish_sharmaAshish_sharma INMember ✭✭✭

    can we use svg image for tabbed page icon ?

Sign In or Register to comment.