Text at the top of Android Tab host layout - android

I followed this example and got it worked.
Now I want to show a 'Welcome!!!' text just above the tabs in a Tabhost layout just like one show in figure
Here is my current layout file. But it does not show the Welcome message.
<?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">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top"
android:layout_gravity="top"
android:padding="5dp">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cc_welcome" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Welcome"
android:gravity="top" android:padding="50dp" android:textColor="#ffffff"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom"
android:layout_gravity="bottom"
android:paddingTop="50dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>


I have edited the xml file. Have a try with this :
Updated:
<?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">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/welcome"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cc_welcome"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Welcome"
android:layout_centerInParent="true"
android:textColor="#ffffff"/>
</RelativeLayout>
<RelativeLayout
android:layout_below="#id/welcome"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#android:id/tabs"/>
</RelativeLayout>
</RelativeLayout>
</TabHost>
I have updated the code. Can you please try now.
You will get a better idea about the Linear and Relative layout here

Related

How to create scrollable tabs?

I am working to create scroll able tabs, please help me out, I am using below code, but not work for me
<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">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
Please let me know specific answers

This Code work for 3.0 and higher versions :
<?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">
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<HorizontalScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="horizontal"
>
<LinearLayout android:orientation="vertical"
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"/>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</TabHost>
But not for lower versions,I need to make work for scrollable tabs for all devices

This is works for version 2.2+
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android1="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<TabHost
android1:id="#android:id/tabhost"
android1:layout_width="match_parent"
android1:layout_height="match_parent" >
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
<HorizontalScrollView android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="wrap_content" android:fillViewport="true">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:background="#drawable/tab_bg_unselected"/>
</HorizontalScrollView>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
<FrameLayout android:id="#android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentTop="true" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>
</TabHost>

Android: ListView and TabWidget: The ListView goes over the TabWidget

I am using the TabWidget in my android project and I have a listView and a FrameLayout in the view. The problem is that when the ListView is higher than the screen height, the Tabs are invisible because the listview goes over the tabs.
I don't know how to set the listView above the tabs.
Here is my view:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#ffffff"
android:minHeight="44dp" >
</FrameLayout>
<ListView
android:id="#+id/NewsCategorieslistView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#00000000"
android:layout_below="#+id/frameLayout"
>
</ListView>
</RelativeLayout>
And here is my tab view:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:divider="#null" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</FrameLayout>
</RelativeLayout>
</TabHost>
Thank you very much.

I have found the solution:
<?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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_above="#android:id/tabs" />
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</TabHost>

try this for your tab.xml( tab activity's layout)
<?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">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>

TabWidget doesn't fill in HorizontalScrollView

I want to show tabs width horizontal scrollbar. I tried to implement like this How do you set tab view to scroll?
But the tabs doesn't fill the width.
How to fix it?
<?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">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>
</LinearLayout>
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</FrameLayout>
</LinearLayout>
<ProgressBar
android:id="#+id/destinationProgressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</TabHost>

Solved it! Use android:fillViewport="true" and remove LinearLayout.
<?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">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</FrameLayout>
</LinearLayout>
<ProgressBar
android:id="#+id/destinationProgressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</TabHost>

How to add a button above a tabHost layout

So all I want to do is add a button above the tabhost layout...can anyone help me? I've tried several things such as align_bottom, switching views... nothing's worked. If I need to post the code where I'm calling the xml let me know. Here's my xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
<TextView
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="439dp" ></TextView>
<TextView
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="344dp" ></TextView>
<TextView
android:id="#+id/view3"
android:layout_width="314dp"
android:layout_height="match_parent" ></TextView>
</TabHost>
</LinearLayout>

I had the same issue which i could solve by using below code for xml file:
<?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" >
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:text="Button"
/>
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp" />
</LinearLayout>
</TabHost>

HorizonatalScrollView on TabWidged "steals" space

I have an TabActivity with custom TabWidgets at the bottom. I want to be able to add more than 5 Tabs. Unlike the MenuBar, which adds a "more" button dynamically, Tabs are just resized and look horribly. So my first attempt was to wrap my TabWidgets into a HorizontalScrollView. The problem is, that I have a ListView as TabContent and its last item seems to be hidden behind my TabWidgets.
This is the Layout for my TabView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_linlay_parent"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/main_tablinear"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_above="#android:id/tabs"/>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none"
android:layout_alignParentBottom="true">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"/>
</HorizontalScrollView>
</RelativeLayout>
</TabHost>
</LinearLayout>
am I doing something wrong in my Layout? Are there better ways to apply more than 4 Tabs? While I can see 4 Tabs good with my Nexus-S, I'm thinking they are already ugly on a Wildfire. Any idea appreciated

Try this. It worked for me:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<TabHost android:layout_weight="1" 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">
<HorizontalScrollView android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout android:layout_height="fill_parent"
android:orientation="horizontal" android:layout_width="fill_parent">
<TabWidget android:layout_height="wrap_content"
android:id="#android:id/tabs" android:isScrollContainer="true"
android:layout_width="fill_parent" android:scrollbars="horizontal"></TabWidget>
</LinearLayout>
</HorizontalScrollView>
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#android:id/tabcontent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tab1"></LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tab2"></LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tab3"></LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tab4"></LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tab5"></LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost></LinearLayout>

I solved my problem myself! I think it can be helpful for other users to see the soltution:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_linlay_parent"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/main_tablinear"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_above="#android:id/tabs"
android:layout_marginBottom="50dip"/>
<!-- note: margin bottom 50 dip above:
its exactly the size of my custom TabWidget -->
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none"
android:layout_alignParentBottom="true">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"/>
</HorizontalScrollView>
</RelativeLayout>
</TabHost>
</LinearLayout>

Categories

Resources