How to use two tab bars (and view pager) in one Activity?

Question

I'm using this lib for the tab bars : link According the picture I use it and it works but there is a problem that I should use a view pager in another view pager and it makes some problems such as what you see in the picture. How can I solve it?

A Screen shot from my app and the problem

edit : Here is my code

MainActivity.js


public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
            getSupportFragmentManager(), FragmentPagerItems.with(this)
            .add("1111", PageFragment.class)
            .add("222", PageFragment.class)
            .add("33333", PageFragment.class)
            .add("444", PageFragment.class)
            .create());

    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(adapter);

    SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
    viewPagerTab.setViewPager(viewPager);
}

}

And this code is for the first tab bar

PageFragment.js

public class PageFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_demo, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        int position = FragmentPagerItem.getPosition(getArguments());
        FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
                getActivity().getSupportFragmentManager(), FragmentPagerItems.with(getActivity())
                .add("One", TestFragment.class)
                .add("Two", TestFragment.class)
                .add("Three", TestFragment.class)
                .add("Four", TestFragment.class)
                .add("Five", TestFragment.class)
                .add("Six", TestFragment.class)

                .create());

        ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager2);
        viewPager.setAdapter(adapter);

        SmartTabLayout viewPagerTab = (SmartTabLayout) view.findViewById(R.id.viewpagertab2);
        viewPagerTab.setViewPager(viewPager);
    }
}

And here is code for fragment of second tab bar

TestFragment.js

public class TestFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_test, container, false);
    }

    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

Answer 1

The problem solved by using getChildFragmentManager() class instead of

 getActivity().getSupportFragmentManager() 

in PageFragment.js file