3

I need my app to have bottom bar navigation and swipable tabs. so I need viewpager to swap between fragments nested inside each fragment that is used by the bottom navigation. how do I do this?

Improve this question
1
  • 1
    it same as you done in activity (if you already done that) just on difference and that is in fragment you pass getChildFragmentManager() instead of getSupportFragmentManager() to your fragmentPagerAdapter's` constructor Commented Mar 30, 2019 at 10:51

1 Answer 1

Reset to default
1

First, you create a Fragment that contains ViewPager and TabLayout like this

<LinearLayout 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" android:orientation="vertical" tools:context=".FragmentThatHasViewPagerAndTabLayout"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>

Then create a Activity which includes FrameLayout (that will be used as fragment container) and BottomNavigation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="@color/colorPrimary" app:itemIconTint="#FFF" app:itemTextColor="#FFF" app:menu="@menu/menu_bottom_navigation"/> </LinearLayout>

Snippet code for Activity

public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation_view); bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) { //Change fragment when select another item in BottomNavigation } } getFragmentManager().beginTransaction().replace(R.id.fragment_container, new FragmentThatHasViewPagerAndTabLayout(), "TAG_TO_REUSE_FRAGMENT_AFTER_CONFIG_CHANGES").commit(); }

And code in Fragment that contains ViewPager and TabLayout, you just write it like normally do (like having a FragmentPagerAdapter, etc.)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments