I'm trying to make Nested Fragment Tabs
in my android application.
I want to get a second row with the sub tabs like this:
But the nested tabs are overlapping like this:
This is my code:
MainActivity.java
public class MainActivity extends ActionBarActivity {
// Declare Variables
FragmentTabHost mTabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set the view from main_fragment.xml
setContentView(R.layout.main_fragment);
// Locate android.R.id.tabhost in main_fragment.xml
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
// Create the tabs in main_fragment.xml
mTabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);
// Create Parent Tab1
mTabHost.addTab(mTabHost.newTabSpec("parent1").setIndicator("Parent1"),
FragmentParentTab1.class, null);
// Create Parent Tab2
mTabHost.addTab(mTabHost.newTabSpec("parent2").setIndicator("Parent2"),
FragmentParentTab2.class, null);
}
}
FragmentParentTab2.java
public class FragmentParentTab2 extends Fragment {
FragmentTabHost mTabHost;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mTabHost = new FragmentTabHost(getActivity());
mTabHost.setup(getActivity(), getChildFragmentManager(),
R.layout.fragmentparenttab2);
// Create Child Tab1
mTabHost.addTab(mTabHost.newTabSpec("child1").setIndicator("Child1"),
FragmentChildTab1.class, null);
// Create Child Tab2
mTabHost.addTab(mTabHost.newTabSpec("child2").setIndicator("Child2"),
FragmentChildTab2.class, null);
return mTabHost;
}
@Override
public void onDestroyView() {
super.onDestroyView();
mTabHost = null;
}
}
FragmentChildTab1.java
public class FragmentChildTab1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragmentchildtab1, container, false);
return rootView;
}
}
main_fragment.xml
<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="match_parent" >
<FrameLayout
android:id="@+id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
fragmentparenttab2.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
fragmentchildtab1.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/FragmentChildTab1" />
</RelativeLayout>
I got this code from a tutorial which used ActionBarSherlock
and it worked fine, but I tried to migrate it to appcompat
and got the overlap issue. (can't paste source link, only 2 links allowed)