CODEWITHSUNDEEP
androidandroid-layouttabsandroid-tabsfragment-tab-host
David Simon
David Simon

Reputation: 45

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:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:tag="tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:tag="linear">

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

The fragment:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/info_drawer_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e0e0e0">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment info"
        android:id="@+id/info_textView"
        android:layout_gravity="center_horizontal" />
    </FrameLayout>

    <ListView android:id="@+id/info_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

And the code I used in the activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    tabHost = (FragmentTabHost)findViewById(R.id.tabhost);
    tabHost.setup(this, getSupportFragmentManager(), R.id.tabFrameLayout);

    tabHost.addTab(tabHost.newTabSpec("Tab 0").setIndicator("", getResources().getDrawable(R.drawable.ic_launcher)), InfoFragment.class, null);
    tabHost.addTab(tabHost.newTabSpec("Tab 1").setIndicator("Tab 1"), HomeFragment.class, null);
    tabHost.addTab(tabHost.newTabSpec("Tab 2").setIndicator("", getResources().getDrawable(R.drawable.ic_launcher)), AppsFragment.class, null);
}

This generates the following result: Screen Capture

As you can see the content area overlaps the tabs. I would simply like it to be below them and fill up the remaining space like this: Screent Capture

I've tried wrapping them in a RelativeLayout tag and applying the below attribute but it didn't work. I trid using the weight attribute without any luck as well.

Thanks.

Upvotes: 0

Views: 581

Answers (2)

jujyfruits
jujyfruits

Reputation: 86

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>

Upvotes: 2

Senchay
Senchay

Reputation: 121

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

Upvotes: 0

Related Questions