Forum Xamarin.Forms

TabbedPage: Icon next to Title?

Its possible to do it in Android?

My code:

TabbContainer.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TabbedPageTest"
             x:Class="TabbedPageTest.TabbContainer">
  <local:Tabb1 Icon="icon1.png"/>
  <local:Tabb2 Icon="icon2.png"/>
</TabbedPage>

Tabb1.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageTest.Tabb1"
             Title="Tabb 1">
  <Label Text="Tabb1" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

(the same in Tabb2.xaml)

Answers

  • yousufctecyousufctec USMember ✭✭✭
    edited February 2017

    Try giving your icon in the ContentPage i.e., in each tabbed page.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="TabbedPageTest.Tabb1"
                 Title="Tabb 1" Icon="icon1.png">
      <Label Text="Tabb1" VerticalOptions="Center" HorizontalOptions="Center" />
    </ContentPage>
    

    Thanks!

    Yousuf.

  • Hi @yousufctec . Your example works, but i want to put icon next to title, no the icon above the title.
    Thanks!

  • yousufctecyousufctec USMember ✭✭✭

    Then why don't you use the StackLayout and place your Label and Image inside it with orientation as horizontal?

    Thanks!

    Yousuf.

  • @yousufctec because this doesn't work. I can't put StackLayout inside TabbedPage or ContentPage. I've thought about using Custom renderer but I haven't found any good example.

  • NMackayNMackay GBInsider, University mod

    Here's a renderer that does the job....not tested with AppCompat though so use at your own risk.

    using Android.App;
    using Foobar.Common.CustomRenderers;
    using Xamarin.Forms.Platform.Android;
    using Xamarin.Forms;
    using Foobar.Droid.Renderers;
    
    [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedRenderer))]
    
    namespace Foobar.Droid.Renderers
    {
        public class CustomTabbedRenderer : TabbedRenderer
        {
            protected override void DispatchDraw(
           global::Android.Graphics.Canvas canvas)
            {
                base.DispatchDraw(canvas);
    
                SetTabIcons();
            }
    
            private void SetTabIcons()
            {
                if (Device.Idiom == TargetIdiom.Phone) return;
    
                var element = this.Element;
                if (null == element)
                {
                    return;
                }
    
                Activity activity = this.Context as Activity;
                if ((null != activity)
                    && (null != activity.ActionBar)
                    && (activity.ActionBar.TabCount > 0))
                {
                    for (int i = 0; i < element.Children.Count; i += 1)
                    {
                        var tab = activity.ActionBar.GetTabAt(i);
                        var page = element.Children[i];
                        if ((null != tab) && (null != page) && (null != page.Icon))
                        {
                            var resourceId = (int)typeof(Resource.Drawable).GetField(page.Icon).GetValue(null);
    
                            if (resourceId > 0)
                                tab.SetIcon(resourceId);
                        }
                    }
                }
            }
        }
    }
    
  • NMackayNMackay GBInsider, University mod

    Remove the following line if you want it to work on all devices, I just wanted it on tablet

    if (Device.Idiom == TargetIdiom.Phone) return;

  • Hi @NMackay . Thanks for answering. It looks like your code works fine, but I need to know what the CustomTabbedPage class contains. Do you have any GitHub repository with this example? Thanks a lot!

  • NMackayNMackay GBInsider, University mod

    Just a standard renderer class.

    namespace Foobar.CustomRenderers
    {
        public class CustomTabbedPage : TabbedPage { }
    }
    
  • The application run, but i don't see anything different. The icon is above of title, i don't know what i doing bad.
    You see the result doing only this? Thanks @NMackay

  • NMackayNMackay GBInsider, University mod

    Are you using AppCompat? I only tested this code using FormsApplicationActivity.

  • I'm using AppCompat, now i'm looking to implementing this code with AppCompt. Thanks @NMackay

  • NMackayNMackay GBInsider, University mod

    @DidacCasanovas

    If you do get a solution, update the thread so we all know :smile:

    Thanks.

  • Ashish_sharmaAshish_sharma INMember ✭✭✭

    @yousufctec said:
    Then why don't you use the StackLayout and place your Label and Image inside it with orientation as horizontal?

    Thanks!

    Yousuf.

    but when i use it it overlap with text , how to set seperataly in Tabbed page

Sign In or Register to comment.