Customize Tabhost and tabs (with Fragments)

Question

I'm build a app that contain a tabhost and this works well. My problem is that I dont know how to customize the tabhost (background color, selected and unselected item,...). I My code is:

MainActivity.java

        mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);

        mTabHost.addTab(mTabHost.newTabSpec("Home").setIndicator("Home"),
                HomeFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("que hacer").setIndicator("¿Qué hacer?"),
                HacerFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("donde").setIndicator("¿A dónde ir?"),
                DestacadoFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("mapa").setIndicator("Lee tu mapa"),
                LectorFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("captura").setIndicator("Captura"),
                CapturaFragment.class, null);

And my layout is this:

             <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="match_parent">

                    <TabWidget
                        android:id="@android:id/tabs"
                        android:orientation="horizontal"
                        android:layout_width="fill_parent"
                        android:layout_height="50dip"
                        android:layout_weight="0"/>

                    <FrameLayout
                        android:id="@android:id/tabcontent"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="0"/>

                </LinearLayout>
            </android.support.v4.app.FragmentTabHost>

Thank you so much ;)

score 1 · Accepted Answer · answered Jan 07 '14 at 12:58

For your concern U need to implement selector like this ..

Your Tab selector .. Hoping U can implement rest of them

tab_select_learn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_selected="true" android:drawable="@drawable/learn" />
    <item android:drawable="@drawable/learng" />
</selector>

And use like this ..

Your Home.java class

public class Home extends FragmentActivity {

    private static final String TAB_1_TAG = "tab_1";
    private static final String TAB_2_TAG = "tab_2";
    private static final String TAB_3_TAG = "tab_3";
    private static final String TAB_4_TAG = "tab_4";
    private static final String TAB_5_TAG = "tab_5";
    private FragmentTabHost mTabHost;
    View view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.home);
        initView();
        view = (View) findViewById(R.drawable.tab_indicator);
        // setTabs();
    }

    private void initView() {
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        mTabHost.addTab(
                mTabHost.newTabSpec(TAB_1_TAG).setIndicator("",
                        getResources().getDrawable(R.drawable.tab_select_talk)),
                TalkContainerFragment.class, null);
        // mTabHost.addTab(mTabHost.newTabSpec(TAB_1_TAG).setIndicator("Talk"),
        // TalkContainerFragment.class, null);
        mTabHost.addTab(
                mTabHost.newTabSpec(TAB_2_TAG).setIndicator("",
                        getResources().getDrawable(R.drawable.tab_select_learn)),
                LearnContainerFragment.class, null);
        mTabHost.addTab(
                mTabHost.newTabSpec(TAB_3_TAG).setIndicator("",
                        getResources().getDrawable(R.drawable.tab_select_go)),
                GoContainerFragment.class, null);
        mTabHost.addTab(
                mTabHost.newTabSpec(TAB_4_TAG).setIndicator("",
                        getResources().getDrawable(R.drawable.tab_select_watch)),
                WatchContainerFragment.class, null);
        mTabHost.addTab(
                mTabHost.newTabSpec(TAB_5_TAG).setIndicator("",
                        getResources().getDrawable(R.drawable.tab_select_more)),
                MoreContainerFragment.class, null);

        // Inflating color for the first time.
        for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
            mTabHost.getTabWidget().getChildAt(i)
                    .setBackgroundColor(Color.parseColor("#181818"));
        }

        mTabHost.getTabWidget().getChildAt(mTabHost.getCurrentTab())
                .setBackgroundColor(Color.parseColor("#424542"));
        // ============== End of color inflation ==================

        mTabHost.setOnTabChangedListener(new OnTabChangeListener() {

            @Override
            public void onTabChanged(String tabId) {

                // Inflating color when tab is selected.
                for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
                    mTabHost.getTabWidget().getChildAt(i)
                            .setBackgroundColor(Color.parseColor("#181818"));

                }

                mTabHost.getTabWidget().getChildAt(mTabHost.getCurrentTab())
                        .setBackgroundColor(Color.parseColor("#424542"));
                // ============== End of color inflation ==================

            }
        });

        for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
            final TextView tv = (TextView) mTabHost.getTabWidget()
                    .getChildAt(i).findViewById(android.R.id.title);
            // mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.talk);
            if (tv == null)
                continue;
            else
                tv.setTextSize(8);

        }

    }

    @Override
    public void onBackPressed() {
        boolean isPopFragment = false;
        String currentTabTag = mTabHost.getCurrentTabTag();
        if (currentTabTag.equals(TAB_1_TAG)) {
            isPopFragment = ((BaseContainerFragment) getSupportFragmentManager()
                    .findFragmentByTag(TAB_1_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_2_TAG)) {
            isPopFragment = ((BaseContainerFragment) getSupportFragmentManager()
                    .findFragmentByTag(TAB_2_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_3_TAG)) {
            isPopFragment = ((BaseContainerFragment) getSupportFragmentManager()
                    .findFragmentByTag(TAB_3_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_4_TAG)) {
            isPopFragment = ((BaseContainerFragment) getSupportFragmentManager()
                    .findFragmentByTag(TAB_4_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_5_TAG)) {
            isPopFragment = ((BaseContainerFragment) getSupportFragmentManager()
                    .findFragmentByTag(TAB_5_TAG)).popFragment();
        }
        if (!isPopFragment) {
            finish();
        }
    }

}

Hope it clears your doubts.!

Thanks for your answer. I could change the background color with the two loops but the tab_selector doesn't works. Wich is the function of "view = (View) findViewById(R.drawable.tab_indicator);"? — Yeray, Jan 07 '14 at 13:40
Using selector can provide more than using loop for setting background image. :) — AndroidHacker, Jan 08 '14 at 04:13
sir Please answer this question [link](http://stackoverflow.com/questions/20988505/open-child-activity-in-tab-host-android) — Bishnu Kumar, Jan 08 '14 at 06:57
@AndroidHacker : Hi, can you please tell me what is popFragment — DKV, Nov 25 '15 at 11:46
popFragment() Method allows us to remove existing fragment and showing the next Fragment in stack ... — AndroidHacker, Dec 14 '15 at 05:50

Customize Tabhost and tabs (with Fragments)

1 Answers1