Change height of tab widget

Is there a simple way to minimize the height of the TabWidget without having the labels go out of view?

Posts

  • TomOpgenorthTomOpgenorth CAXamarin Team Xamurai

    Not to sure what you mean by this, can you elaborate?

  • hall28hall28 USMember

    I followed this tutorial on the Xamarin site.

    I want the tabs in my application to have a shorter height and not have any icons. If I do not include icons and shorten the height of the tabs in the xml, the label (ie. “Albums”, “Artists”, and “Songs” goes out of view (attached).

    How can I fix this?

  • TomOpgenorthTomOpgenorth CAXamarin Team Xamurai

    Ah, okay. That looks like resources issue. I bet what is happening here is that that the images on that page aren't the correct DPI for the device you're running the application on.

    The easiest way to create the proper images is to use the Android Asset Studio, in this case we want to use Tab Icons (pre-Android 3.0).

    Trying using the drawables in this zip file instead. Just download the file, and extract the contents to the Resources folder in your application. Don't forget to delete the old images.

    If you're still having problems, hope over to Xamarin's chat, and ping me there (tom.opgenorth).

  • hall28hall28 USMember

    I'm not sure you understood my question. I don't want my tabs to have images. I just want the labels ("Artists" "Songs" "Albums").

    I want the tabs to have a shorter height, no images, and I want the text on the tabs to be visible. As you can see from my previous post, the text on the tabs is not visible.

  • TomOpgenorthTomOpgenorth CAXamarin Team Xamurai

    Ah, okay. Yes in that case I did misunderstand. What you can do is use a custom view for the tab, instead of the default view that the TabWidget creates. Here is a pretty plain example to get you going:

    Add a new layout file called tab_layout.xml to your project with the following XML:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/customTabLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/tabLabel"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:textSize="13dp"
            android:textColor="#cccccc"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
    

    Add a method to the Activity like this:

    private View CreateTabView(string tag) 
    {
        var tabView = LayoutInflater.Inflate (Resource.Layout.tab_layout, null);
        var textView = tabView.FindViewById<TextView> (Resource.Id.tabLabel);
        textView.Text = tag;
        return tabView;
    }
    

    Then replace each call to SetIndicator to use the custom view, kind of like so:

    spec = TabHost.NewTabSpec ("artists");
    spec.SetIndicator (CreateTabView ("Artists"));
    spec.SetContent (intent);
    

    Now you're application will have a single TextView for each tab. This is a pretty plain example that you'll have to spruce up as you see fit.

  • hall28hall28 USMember

    Thanks for this. I'll give it a try and let you know how it works.

  • hall28hall28 USMember

    @topgenorth, it worked out quite nicely. Thanks again!

  • TomOpgenorthTomOpgenorth CAXamarin Team Xamurai

    Cool! Glad it worked out for you. Another option would be to use an ActionBar and fragments, but that's probably best left for another day. :)

Sign In or Register to comment.