Android FragmentTabHost Layout Positioning

Question

I am learning Android development and I am trying to make a tab interface inside a fragment, with the tabs in the bottom. I have seen many web pages (like this one) about how to configure the tabs to be in the bottom using a RelativeLayout but I can't get things right in the screen.

The tab's FrameLayout is taking all the space for the tab interface, and the tabs can't be seen:

tabs not being shown

The code I am using is:

        <android.support.v13.app.FragmentTabHost
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@android:id/tabhost"
            android:layout_marginRight="5dp"
            android:layout_alignTop="@+id/ibRight"
            android:layout_alignBottom="@+id/ibRight"
            android:layout_toLeftOf="@+id/ibRight"
            android:layout_alignLeft="@+id/ibTop">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_alignParentBottom="true"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </RelativeLayout>
        </android.support.v13.app.FragmentTabHost>

Just as a quick test, I adjusted the FrameLayout width and height to be fixed (500dp and 200dp), and that's what I got:

Tab with tabs

So this way I can see that all things are there, but I can't get it to be shown right, without playing with fixed width and height numbers. AND the fact that Android Studio has a bug which causes a null reference for rendering for FragmentTabLayout make things even harder to play with, since I can't test option in real time.

I appreciate if anyone can help me with this, since I new to Android, I am not quite sure how to get this done.

score -1 · Accepted Answer · answered Jun 23 '14 at 22:32

-1

Got it to work with the following code:

        <android.support.v13.app.FragmentTabHost
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@android:id/tabhost"
            android:layout_marginRight="5dp"
            android:layout_alignTop="@+id/ibBannerRight"
            android:layout_alignBottom="@+id/ibBannerRight"
            android:layout_toLeftOf="@+id/ibBannerRight"
            android:layout_alignLeft="@+id/ibBannerTop">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_alignParentBottom="true"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_above="@android:id/tabs"/>
            </RelativeLayout>
        </android.support.v13.app.FragmentTabHost>

The secret ingredient was the android:layout_above="@android:id/tabs"

Now everything seems fine:

enter image description here

answered Jun 23 '14 at 22:32

Michel Feinstein

13,416
16
91
173

Please put the tabs on the top in Android. This is not iOS – Mark Buikema Sep 18 '14 at 22:51
2

Exactly, this is not iOS, which means I am free to do it as I like, not as Apple likes it, nor as Google likes it, but the way I LIKE IT. And guess what, for my particular application the tabs have to go in the bottom (I have good reasons for this, since it's a kiosk system) it's good to be free :) – Michel Feinstein Sep 19 '14 at 06:00
mFeinstein, there is no need to be rude, Mark has a point. You should do things accordingly to a guideline. It's not mandatory, but it will help your users to better understand your application! – tf.alves Aug 16 '15 at 21:28
I guess in the Internet makes it hard to understand the tone of one's voice... I was writing it quickly over my phone if I remember, I didn't meant to be rude at all. – Michel Feinstein Aug 16 '15 at 21:31
2

For the sake of completeness: this application had to look unrelated to the technology behind it, and since it will be positioned in a kiosk, higher on a wall, placing the tabs on the top will make it more difficult for short people and children. And no, we couldn't put it in a better height, I wish we could. – Michel Feinstein Aug 16 '15 at 21:35

Android FragmentTabHost Layout Positioning

1 Answers1