Develop Reference

Space between tabs in Android

I have space between my tabs. I looked at all the possible solutions on StackOverflow and added them but still the space exists between them.
My tab code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="0dp"
>
<ImageView
android:id="#+id/tab_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
My Layout with tabs:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<FrameLayout
android:id="#+id/tab5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<FrameLayout
android:id="#+id/tab4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<FrameLayout
android:id="#+id/tab3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<FrameLayout
android:id="#+id/tab2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<FrameLayout
android:id="#+id/tab1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="0"
android:background="#drawable/bottom_image"
android:dividerPadding="0dp"
android:fitsSystemWindows="true"
android:gravity="fill"
android:showDividers="none"
android:tabStripEnabled="false"
android:visibility="visible" >
</TabWidget>
</LinearLayout>
</TabHost>
I added the following in code as well:
mTabHost.getTabWidget().setStripEnabled(false);
mTabHost.getTabWidget().setDividerDrawable(null);
if (Integer.parseInt(Build.VERSION.SDK) >= Build.VERSION_CODES.HONEYCOMB) {
mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}
But still it shows space between tabs. Am I missing something?

I have not got chances to check these from the android IDE. but I suppose this would work.
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/tab5"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="20.0" />
<FrameLayout
android:id="#+id/tab4"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="20.0" />
<FrameLayout
android:id="#+id/tab3"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="20.0" />
<FrameLayout
android:id="#+id/tab2"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="20.0" />
<FrameLayout
android:id="#+id/tab1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="20.0" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="0"
android:background="#drawable/bottom_image"
android:dividerPadding="0dp"
android:fitsSystemWindows="true"
android:gravity="fill"
android:showDividers="none"
android:tabStripEnabled="false"
android:visibility="visible" >
</TabWidget>
Here, I have gave a weightSum = 100.0 and divided this equivalently to all the childs.

Layout with two tabhost

I have a problem with my android app. My application has two tabhost and It works well but the layout doesn't work well like the following picture:
The problem is that the FrameLayout overlaps with the lower tabhost and I dont solve it.
This is my activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TABHOST SUPERIOR -->
<RelativeLayout
android:id="#+id/l1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:gravity="right"
android:layout_alignParentTop="true">
<android.support.v4.app.FragmentTabHost
android:id="#+id/tabhost_sup"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_weight="0"/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/holo_blue_dark"/>
</ScrollView>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
<!-- TABHOST INFERIOR -->
<RelativeLayout
android:id="#+id/l2"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="50dip"
android:layout_weight="1"
android:gravity="right"
android:layout_alignParentBottom="true"
android:background="#android:color/background_light" >
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/RelativeLayout1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginBottom="0dp"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
</RelativeLayout>

How can I put FragmentTabHost Tabs at the bottom of the screen?

I have tried the following code. which aligns the framed layout above the tab widget but it still didn't work
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
<FrameLayout
android:id="#+id/tabFrameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_above="#android:id/tabs"
/>
</RelativeLayout>
</android.support.v4.app.FragmentTabHost>
edit
i am using FragmentTabHost. maybe that could be why it's not changing position

The solution which finally worked for is the following:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>

Try this
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_weight="1"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:visibility="visible"
/>
</LinearLayout>

Maybe like this:
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
<FrameLayout
android:id="#+id/tabFrameLayout"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>

android:tabStripEnabled=“false” doesn't work

I'm having a problem with the TabWidget Layout.
How can I combine the tab with the content as it always shows this fading edge:
The graphics are perfect. I set the android:tabStripEnabled="false" but still it keeps showing me the line that separates between the tabs and the frame layout.
this is the XML code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<include layout="#layout/action_bar" />
<TabHost
android:id="#android:id/tabhost" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tabStripEnabled="false"
android:divider="#null"
android:showDividers="none" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/grger"
android:fadingEdge="none" >
</FrameLayout>
</LinearLayout>
</LinearLayout>
</TabHost>
</LinearLayout>

positiong a textView on the screen

I want to place a TextView below the red zone in the following image but I just can do it.
Until now I have the following layout:
<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/tabhost1"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
/>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/tabcontent"
>
</FrameLayout>
</RelativeLayout>
</TabHost>
<LinearLayout android:layout_width="fill_parent"
android:layout_below="#id/layout"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="0 restaurant trouves"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:textSize="15dip"
android:textColor="#000000"
/>
</LinearLayout>
Can someone tell what is the right code for placing the textView below the red tab?
Thank you!

Is everything you mentioned in your post in one XML file? It looks like its not well formatted and your screenshot does not make it clear too, but I am giving it a try.
It seems that your TextView is not even inside the RelativeLayout.You are closing it's tag before declaring your TextView, so you have to move it into RelativeLayout.
And I don't know if you want to show this TextView in every single Tab. But if it is like that, you could try the following scheme:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:text="TextView" />
</RelativeLayout>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
There are two TextViews in this example. One is centered and the other one is drawn below of the first with: android:layout_below="#id/textView1".
Now you have to do this with your Views...

your layout code doesn't seem to have everything you have on the screenshot, so I'm not sure how your red set of tabs work but here's a mockup with a simple view:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#android:id/tabs"
android:layout_centerHorizontal="true"
android:background="#FFFFFF"
android:gravity="center_horizontal"
android:text="0 restaurant trouves"
android:textColor="#000000"
android:textSize="15dip" />
<View
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_above="#+id/text"
android:background="#ff0000" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</FrameLayout>
</RelativeLayout>
That will give you this: (eclipse screenshot, no tabs in widget)