FragmentTabHost Content Filling Remaining Space

I've been experimenting with tab navigation on android but I can't set up the content area correctly. The layout of the application: &l

Solution 1:

You don't need to have the FrameLayout inside the Tabhost, when you do that you're using the same space for the content of the fragments and the tabs themselves.

Just put the TabHost inside a vertical LinearLayout and put the FrameLayout outside, below the TabHost.

Just like this:

<?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">

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"/>
    </android.support.v4.app.FragmentTabHost>

    <FrameLayout 
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

Solution 2:

Sorry, i cannot go into detail with your specific code, but if you anyway just try to implement it for the first time i would go this approach, its really easy to understand and to manage. The code is pretty easy and serves all you need i think.

You just have to make own layoutfiles for the 3 (or whatever) fragments like this:

Layoutfile for a Fragment:

<?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:layout_margin="15sp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Notebook"
        android:id="@+id/tv_hdl_tab3"
        android:textColor="@android:color/holo_blue_light"
        android:textSize="@dimen/dim_hdl_h1" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="@string/tab3_introText"
    android:id="@+id/tv_tab3_IntroText"
    android:layout_marginTop="5sp"
    android:layout_marginBottom="5sp"
    android:textSize="@dimen/dim_txt_p" />

MainActivity:

public class MainActivity extends Activity {
ActionBar.Tab tab1, tab2, tab3;
Fragment fragmentTab1 = new FragmentTab1();
Fragment fragmentTab2 = new FragmentTab2();
Fragment fragmentTab3 = new FragmentTab3();

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab_test);

    ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    tab1 = actionBar.newTab().setText("Home");
    tab2 = actionBar.newTab().setText("Calculator");
    tab3 = actionBar.newTab().setText("Notebook");

    tab1.setTabListener(new MyTabListener(fragmentTab1));
    tab2.setTabListener(new MyTabListener(fragmentTab2));
    tab3.setTabListener(new MyTabListener(fragmentTab3));

    actionBar.addTab(tab1);
    actionBar.addTab(tab2);
    actionBar.addTab(tab3);
}

And a fragment looks like this then (3 of them of course, one for every tab as long it should be different):

public class FragmentTab3 extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
    View view = inflater.inflate(R.layout.tab3, container, false);
    TextView textview = (TextView) view.findViewById(R.id.tabtextview);
    textview.setText(R.string.Three);
    return view;
}

}

And the Tablistener:

public  class MyTabListener  implements ActionBar.TabListener {
Fragment fragment;


public MyTabListener(Fragment fragment) {
    this.fragment = fragment;
}


public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
    ft.replace(R.id.fragment_container, fragment);
}

public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
    ft.remove(fragment);
}

public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
    // nothing done here
}

}

Code comes from http://www.linux.com/learn/tutorials/761642-android-app-development-for-beginners-navigation-with-tabs