How to implement tabview in one of the fragment of bottombar? - android-layout

Question

I want this type of design ::
Here Is My design
My mainactivity.xml only contain a frameLayout which is Replaced by Selected Fragment from bottombar menu item.
It's code is here:
b = BottomBar.attach(this,savedInstanceState);
b.setItemsFromMenu(R.xml.menu_main, new OnMenuTabClickListener() {
#Override
public void onMenuTabSelected(#IdRes int menuItemId) {
if(menuItemId == R.id.BottomBarItemOne){
PeopleFragment p = new PeopleFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.frame,p).commit();
}
else if(menuItemId == R.id.BottomBarItemTwo){
LocationFragment l = new LocationFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.frame,l).commit();
}
else if(menuItemId == R.id.BottomBarItemThree){
HistoryFragment h = new HistoryFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.frame,h).commit();
}
else if(menuItemId == R.id.BottomBarItemFour){
LikesFragment li = new LikesFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.frame,li).commit();
}
}
Now I want to create a tabview in on one of the Fragment :
For that I implement toolbar,tablayout and viewpager in required fragment xml file.
I created a separate java file contain viewPagerAdapter class.
public class viewPagerAdapter extends FragmentPagerAdapter {
ArrayList<Fragment> fragments = new ArrayList<>(); // this line can cause crashes
ArrayList<String> tabTitles = new ArrayList<>();
public void addFragment(Fragment fragment,String tabTitle){
fragments.add(fragment); // this line can cause crashes
tabTitles.add(tabTitle);
}
public viewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return fragments.size();
}
#Override
public CharSequence getPageTitle(int position) {
return tabTitles.get(position);
}
}
Now I want to add this code to implement tablayout ::
toolbar = (Toolbar) findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPagerAdapter = new viewPagerAdapter(getSupportFragmentManager());
viewPagerAdapter.addFragment(new HomeFragment(),"Home"); // this line can cause crashes
viewPagerAdapter.addFragment(new MessageFragment(),"Message"); // this line can cause crashes
viewPagerAdapter.addFragment(new ContectFragment(),"Contect"); // this line can cause crashes
viewPager.setAdapter(viewPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
In Fragment's onCreate method Given below ::
public class HomeFragment extends Fragment {
public HomeFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TabLyout Code Here
return inflater.inflate(R.layout.fragment_home, container, false);
}
}
But Android Studio doesn't allow Tablayout Fragment code in Fragment.
What Can I do ?
How can I implement tablayout in one of the fragment?

Answer 1

Try the following approach :
Add this to your fragment layout as per your requirement.
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="50dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#color/tab_indicator"
app:tabIndicatorHeight="2.5dp"
app:tabPaddingBottom="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabPaddingTop="-1dp"
app:tabBackground="#color/white"/>
Create one model for your tabs which you want to show.
Now add the following code in your fragment:
this.navigationData = new ArrayList<>();
this.navigationData.add(new MainNavigationViewModel("TAB-1", R.drawable.TAB-1, R.drawable.TAB-1, true));
this.navigationData.add(new MainNavigationViewModel("TAB-2", R.drawable.TAB-2, R.drawable.TAB-2, false));
this.navigationData.add(new MainNavigationViewModel("TAB-3", R.drawable.TAB-3, R.drawable.TAB-23, false));
for (MainNavigationViewModel vm : this.navigationData) {
tabLayout.addTab(tabLayout.newTab().setCustomView(ViewHelper.buildTabWithText(getContext(), vm.getText(), vm.getIsSelected())));
}
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
adapter = new MainFragmentPagerAdapter(getChildFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
Now create FragmentPagerAdapter (New class) like this.
public class MainFragmentPagerAdapter extends FragmentPagerAdapter {
private interface FragmentFactory {
Fragment create();
}
private static final FragmentFactory[] fragments = new FragmentFactory[] {
() -> LiveFeedFragment.getInstance(),
() -> GroupsFragment.getInstance(),
() -> NewsFragment.getInstance()
};
public MainFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
#Override
public Fragment getItem(int position) {
return fragments[position].create();
}
#Override
public int getCount() {
return fragments.length;
}
}
And access the fragment like this way.