TabbedPage Tabs Height

Hi everyone,

I'm developing an Android application for mobile phone. I'm using Xamarin Forms and Android 5 Lollipops (AppCompat v7).

I've got a XF TabbedPage, and i'm wondering if it's possible to increase the height of the tabs ?

I used a renderer found on this forum to add an icon + text on each tab which is working great (even if it uses deprecated functions), the problem is my icon is too big so the text under is hidden because the tab height is too small.

I looked around the web and found that if you customized the Android Theme and set the ActionBar height, it works, but it's not. The only thing that increase his height is my navigation bar, not the tabs below.

Any idea ?

Thanks,

Armand

Posts

  • SpaceMonkeySpaceMonkey GBMember ✭✭✭

    FormsAppCompatActivity is just using native Android layouts.

    So:

  • Hi, thanks for your reply. I read this article and tried their solution.

    I still have a problem because even if i set the height of the TabLayout as below, it's not working :smile:


    Any idea ?

    Thanks

  • SpaceMonkeySpaceMonkey GBMember ✭✭✭
    edited October 2015

    I don't know, all I'm saying is that this is now an Android specific question and not related to Xamarin.Forms, so you are asking at the wrong place. You have a better chance of getting an answer at Android's forum or SO Android.

  • I'm not sure about what you are saying. The problem isn't Android itself. If I develop an Xamarin.Android project with android activity only it's working.

    Using the XF TabbedPage seems to cause the problem because it's difficult to override the XF behavior. Or i'm doing something wrong.

    I tried all day without any successi i customized everything but the height.

  • Another odd thing is, in the designer of my tabs.axml, i get a tablayout with my requested height. But not in the application...

  • SpaceMonkeySpaceMonkey GBMember ✭✭✭

    ah, I see now, so it is actually related to Xamarin.Forms. In that case, yeah you should ask here.

    A suggestion would be to try to set it in code after the activity has initialised, so that if it's being set internally by Xamarin.Forms, you will override it.

  • How do i do this ?

    At the moment my MainActivity looks like this :


    The thing is i've got my custom TabLayout defined in tabs.axml, I did what was written in the link you provided. But they don't change the height in their post, only the colors. I added a layout_height, min_height and whatever it doesn't do anything.

    Maybe i should set the height differently ?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    You must set the TabLayoutResource before calling base.OnCreate

  • SpaceMonkeySpaceMonkey GBMember ✭✭✭
    edited October 2015

    @TheRealJasonSmith Interesting, I didn't know that. I'm doing it after OnCreate and it's working fine. Also, in the tutorial:

    https://blog.xamarin.com/material-design-for-your-xamarin-forms-android-apps/

    It's done after OnCreate

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    I will have a chat with our documentation authors...

  • Well, i tried to set the TabLayoutResource before calling base.OnCreate, and still the height doesn't change at all.

    Here what's i got for tabs, you can see the height with 150dp but in my app it's still 48dp.


    and in my MainActivity


    Thanks

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    My apologies, I just checked it seems the measurement does not account for that property. Will be fixed before final.

  • Okay no problem, and is it possible to customize the tab when using a TabLayout from AppCompat ? It seems like my renderer is not working, and i can't get the TabLayout. I wanted to add an icon with text so i tried :

    protected override void OnCreate(Bundle bundle)
            {
                FormsAppCompatActivity.TabLayoutResource = Resource.Layout.tabs;
                base.OnCreate(bundle);
                global::Xamarin.Forms.Forms.Init(this, bundle);
                RegisterIoC();
                LoadApplication(new App());
                setupTabIcons();
            }
    
            private void setupTabIcons() 
            {
                var tabLayout = (TabLayout) FindViewById(Resource.Id.tabs);
                if(tabLayout != null)
                {
                    TextView tabOne = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.tab, null);
                    tabOne.Text = "ONE";
                    tabOne.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.ic_tab_todo, 0, 0);
                    tabLayout.GetTabAt(0).SetCustomView(tabOne);
    
                    TextView tabTwo = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.tab, null);
                    tabTwo.Text = "TWO";
                    tabTwo.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.ic_tab_pending, 0, 0);
                    tabLayout.GetTabAt(1).SetCustomView(tabTwo);
    
                    TextView tabThree = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.tab, null);
                    tabThree.Text = "THREE";
                    tabThree.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.ic_tab_done, 0, 0);
                    tabLayout.GetTabAt(2).SetCustomView(tabThree);
                }
    
    

    But tabLayout is null in setTabIcons(). Shoud I use something else to reach this tabs object ?

    Thanks

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    That wont work, you need to use the TabbedPageRenderer to do that

  • Well i did that because I tried with a TabbedRenderer and a TabbedPageRenderer, and doesn't seems to work.

    I put some break point inside and it's not stopping at all.


    Renderers seems to work only if my activity inherit from FormsApplicationActivity and not FormsAppCompatActivity.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    try using a custom subclass of TabbedPage. Just for giggles. Shouldn't be required but your renderer registration might be getting clobbered somehow. Not sure how yet...

  • Well you were right, with a subclass, i do go into my Renderer. Now the problem is when i get my activity with :smile:


    activity is not null but activity.ActionBar is, so i can't access the tab with activity.ActionBar.GetTabAt(i);

    Any suggestion ?

    I'm getting closer ! lol

    Thanks,

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    One of the children of your TabbedPageRenderer subclass is a TabLayout. Grab it and do your evil to it. Keep in mind anything you do might be clobbered by things we do later to update it when tabs change/etc.

  • Okay i see,

    Yes i know i'm just wondering how to do things now, but i'll change my code when you'll update this part.

    My goal was only to make a tab with icon and a text below. But i've height issues because i needed 72dp instead of 48dp.

    But it seems like there's no way to increase the height with Android 6 Lolipops for the moment.

    I'll just wait until it's possible and everything will be ok !

    Thank you,

    Armand,

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    It's already fixed in master, you'll be set on the next -pre

  • Nice :)

    Thank you !

  • BjornBBjornB USMember ✭✭✭
    edited April 2016

    @TheRealJasonSmith

    One of the children of your TabbedPageRenderer subclass is a TabLayout. Grab it and do your evil to it.

    How do i grab it?

    I want to change the color of my tabs (AppCompatActivity)

    Thank you!

  • BjornBBjornB USMember ✭✭✭

    I know its done in your tuts for appcompat in forms using tabs.axml, But im getting my colors from a backend and need to change them dynamically. Any help on this matter is appreciated!

    :)

  • BjornBBjornB USMember ✭✭✭

    Found it, its 5 in the morning here, current sleep 0 minutes. Im slow atm :)

  • AndriiTsokAndriiTsok UAMember ✭✭

    @TheRealJasonSmith @ArmandCharbonnier guys I'm struggling with this problem. Can't change the tab element height.

    Even tried to set: android:layout_height="300dip" for my android.support.design.widget.TabLayout and it doesn't work.

  • Roberto.2298Roberto.2298 USMember ✭✭

    Hi, anyone has resolved this problem? Still can't set height of tabs in TabbedPage.

Sign In or Register to comment.