Like FragmentTabHost style in fragment

Question

This is my xml:

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android" 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" > <FrameLayout android:id="@+id/realtabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> 

And this is a fragment of the hosting.

 public class TabPractice extends Fragment{ private FragmentTabHost mTabHost; //Mandatory Constructor public TabPractice() { } public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.tabs_practice,container, false); mTabHost = (FragmentTabHost)rootView.findViewById(android.R.id.tabhost); mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.realtabcontent); mTabHost.addTab(mTabHost.newTabSpec("Practice All").setIndicator("Practice All"), WelcomeScreen.class, null); mTabHost.addTab(mTabHost.newTabSpec("Practive Fav").setIndicator("Practive Fav"), FavoriteList.class, null); return rootView; } 

}

This is what my tab looks like, I don’t understand how to style these tabs. Most of the style examples in XML have a TabWidget which, when I try to add to my layout, doesn't work.

1) Can someone help me understand how hosting FragmenttabHost in the fragment (mycode - from some tutorial) is different from what it has in FragmentActivity ??

2) How can I insert a tab in my code?

Thanks.

Answer 1

Make your xml as follows:

 <?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="0dp" android:layout_weight="1" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:orientation="horizontal" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/dark_blue" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" /> <FrameLayout android:id="@+id/realtabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout> </android.support.v4.app.FragmentTabHost> </LinearLayout> 

and the code for the tabs in your TabPractice Fragment as follows:

mTabHost = (FragmentTabHost) view.findViewById (android.R.id.tabhost);

 mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.realtabcontent); View tabIndicatorToday = LayoutInflater.from(getActivity()).inflate(R.layout.tab_indicator, mTabHost.getTabWidget(), false); ((TextView) tabIndicatorToday.findViewById(R.id.tv_tab_txt)).setText(getResources().getString(R.string.today)); mTabHost.addTab(mTabHost.newTabSpec(getResources().getString(R.string.today)).setIndicator(tabIndicatorToday), EntriesTodayFragment.class, null); View tabIndicatorLive = LayoutInflater.from(getActivity()).inflate(R.layout.tab_indicator, mTabHost.getTabWidget(), false); ((TextView) tabIndicatorLive.findViewById(R.id.tv_tab_txt)).setText(getResources().getString(R.string.live)); 

and tab_indicator xml in drawables as follows:

  <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:background="@color/white" android:orientation="horizontal" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <TextView android:id="@+id/tv_tab_txt" style="?android:attr/tabWidgetStyle" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center" android:paddingBottom="10dp" android:paddingTop="10dp" android:text="@string/live" android:textColor="@drawable/tab_text_color" android:textStyle="bold" /> <View android:layout_width="match_parent" android:layout_height="4dp" android:layout_gravity="bottom" android:background="@drawable/tab_underline_selector" /> </LinearLayout> <View android:layout_width="1dp" android:id="@+id/tabs_divider_view" android:layout_height="30dp" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="@color/grey_background" /> </LinearLayout> 

Now you can customize the background of the tab, the highlighted color and the line below the tabs as you wish. Hope this helps.