TabHost - everything in first tab - android

I'm working with TabHost and I want to have two tabs, but everything I have in second tab is in first tab and there is no tab button to be clicked. Here is how it looks like. I just dragged and dropped tabhost in Design editor in IDEA
<?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="match_parent">
<TabHost
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/tabHost2" android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<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">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"
android:id="#+id/button2"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:id="#+id/button3"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
And then I just add button to first and second linear layout. But like I said. Everything is in first layout. Could you help me figure it out? Thanks :)

At start read this : http://www.learn-android-easily.com/2013/07/android-tabwidget-example.html. This is for begginers.

Related

To want Tab layout set in bottom in android

How can i set Tab Layout in Bottom?
I try this property
android:gravity="bottom"
android:layout_marginBottom="-3dp"
but not any effect and give error.
Place Tab Widget to below FrameLayout like this
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+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">
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
</FrameLayout>
<TabWidget android:id="#android:id/tabs"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0" />
</LinearLayout>
</TabHost>
You have a best android Tab Layout to set that in Layout Bottom. Just use this code -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/tab_indicator"
android:padding="5dp">
<ImageView android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"
/>
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"
/>
And, see this answer. Hope this helps you.

Tabhost android with a fixed header

I have the following 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"
android:background="#drawable/show_recipe_bg">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/saveRecipeButtonId"
android:text="#string/save_recipe_button"
android:layout_gravity="center" />
<FrameLayout
android:id="#android:id/tabcontent"
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="fill_parent"
android:layout_gravity="bottom" />
</LinearLayout>
</TabHost>
I want the button to apear on the TOP for all tabs, a fixed header.
The problem in this layout that the TAB icons (TabWidget) do not apear on the screen. I guess that is because of the fill_parent for the frame layout. But I do not want to define a fixed size (because it is not good for using on other devices...)
How can I fix:
I need it to be like
Button
Tabs
TabWidget
EDIT:
I have found the problem, new XML is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/show_recipe_bg">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/saveRecipeButtonId"
android:text="#string/save_recipe_button"
android:layout_gravity="center" />
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp" />
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</LinearLayout>
</TabHost>
</LinearLayout>
Android: Tabs at the BOTTOM
how about this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
<TabHost android:id="#android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent" android:id="#+id/linearLayout1" android:layout_height="match_parent" android:orientation="vertical">
<TabWidget android:layout_width="match_parent" android:layout_height="wrap_content" android:id="#android:id/tabs"></TabWidget>
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#android:id/tabcontent">
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#+id/tab1"></LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#+id/tab2"></LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="#+id/tab3"></LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
There is two possible ways:
It is mentioned in #sampathpremarathna answer - just move Button up in hierarchy, to the level of TabHost
You can try to change LinearLayout to RelativeLayout and define that FrameLayout should be below button, and above tabs.

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>

Android - Add button after tabhost not showing in every tab

So i wanted to have a bottom button so that it shows in all tabs, but i cant seem to make it available at the bottom of every tab screen. I only have the first tab filled with edit text elements and spinners. But the button doesnt show even after setting a scrollview since all elements take more than the screen size. Heres the xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabHost
android:id="#+id/personalfiletab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<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"
android:paddingBottom="56dp">
<ScrollView android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:id="#+id/pessoal_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<include android:id="#+id/first" layout="#layout/ecra_editpersonalfile_infoform" />
</TableLayout>
<TableLayout android:id="#+id/morada__contacto_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<include android:id="#+id/first" layout="#layout/ecra_editpersonalfile_moradacontactoform" />
</TableLayout>
<TableLayout
android:id="#+id/profissional_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<include android:id="#+id/first" layout="#layout/ecra_editpersonalfile_infoproform" />
</TableLayout>
<TableLayout
android:id="#+id/documentacao_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<include android:id="#+id/first" layout="#layout/ecra_editpersonalfile_documentacaoform" />
</TableLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
</LinearLayout>
</TabHost>
<Button
android:text="submit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/submitprofileButton">
</Button>
</LinearLayout>
But the button doesnt show at the bottom of the screen in every tab...

Tab Widget and Listview combo

Howdy, I am trying to combine the TabWidget and ListView Tutorials. Also I added a couple of buttons with no functions right now. Each tab is supposed to be a ListView (for right now). I run the app and it launches as just a ListView and no tabs. Here is the main.xml used in TabaWidget.java:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:gravity="center_horizontal" >
<Button
android:id="#+id/MainMenu"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Main Menu" />
<Button
android:id="#+id/Sort"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Sort" />
</LinearLayout>
<TabHost
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">
<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>
</LinearLayout>
If the problem doesn't lye in there, then I can post other code as well. Thanks in advance.

Categories

Resources