Something wrong happeded when combining TabLayout and BottomNavigationView - android

I am trying to combine TabLayout and BottomNavigationView in one TabsActivity.java file. TabLayout works fine but facing problem with BottomNavigationView. It doesn't display its fragment pages content on ViewPager ( #+id/container ) but it hides and shows TabLayout which means it's getting through switch (item.getItemId()) { cases.
It loads first page during app start but once I click on bottom tabs all I see is white pages on every tab. Any idea how to fix this problem?
java
public class TabActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final SectionsPagerAdapter mSectionsPagerAdapter;
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
final ViewPager mViewPager;
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
BottomNavigationView bottomNavigationView = (BottomNavigationView)
findViewById(R.id.navigation);
bottomNavigationView.setOnNavigationItemSelectedListener
(new BottomNavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
Fragment selectedFragment = null;
switch (item.getItemId()) {
case R.id.action_item1:
selectedFragment = HomeTab.newInstance();
tabLayout.setVisibility(View.VISIBLE);
break;
case R.id.action_item2:
selectedFragment = StatusTab.newInstance();
tabLayout.setVisibility(View.GONE);
break;
}
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.container, selectedFragment);
transaction.commit();
return true;
}
});
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.container, HomeTab.newInstance());
transaction.commit();
}
public void do_refresh(View v){
//try refresh onclick
}
private class SectionsPagerAdapter extends FragmentPagerAdapter {
private SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new HomeTab();
case 1:
return new SecondTab();
case 2:
return new ThirdTab();
default:
return null;
}
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Home";
case 1:
return "Second";
case 2:
return "Third";
}
return null;
}
}
}
xml
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.tesrs.serv">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/custom_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_gravity="end"
android:onClick="do_refresh"
android:text="test"/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#color/greyish"
app:tabTextColor="#color/inactiveblack"
app:tabSelectedTextColor="#color/activeblack"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="40dp"
android:layout_marginTop="85dp"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/greyish"
app:itemIconTint="#color/black"
app:itemTextColor="#color/black"
app:menu="#menu/bottom_tab"/>
</android.support.design.widget.CoordinatorLayout>

transaction.replace(R.id.container, selectedFragment);
it should be your frame layout to be replaced with selected fragment, not view pager
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
</FrameLayout>

Related

Issue with Fragment Navigation. Click on my second Fragment, It still shows me my first fragment tabs

I'm trying a fragment navigation drawer, Everything works out fine, but the issue is that I don't want to have a fragment fab on my second fragment.
I really appreciate the help given. Thank you!
I will leave an image of the outcome, So it might be easier to see what I mean
https://imgur.com/a/9U4aGDF
Homepage.java
public class Homepage extends AppCompatActivity implements
NavigationView.OnNavigationItemSelectedListener {
private static final String TAG = "Homepage";
private SectionsPageAdapter mSectionsPageAdapter;
private ViewPager mViewPager;
private DrawerLayout drawer;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_homepage);
mSectionsPageAdapter = new
SectionsPageAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.viewpagers);
setupViewPager(mViewPager);
Log.i("viewpager",mViewPager.toString());
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
Toolbar toolbar = findViewById(R.id.toolbar);
drawer = findViewById(R.id.drawer_layout);
NavigationView navigationview = findViewById(R.id.nav_view);
navigationview.setNavigationItemSelectedListener(this);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer,
toolbar,
R.string.navigation_drawer_open,
R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
new HomeFragment()).commit();
navigationview.setCheckedItem(R.id.nav_home);
}
}
private void setupViewPager(ViewPager viewPager) {
SectionsPageAdapter adapter = new SectionsPageAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentPopular(), "Popular");
adapter.addFragment(new FragmentUpcoming(), "Upcoming");
Log.i("adaptaerrrrr",adapter.toString());
viewPager.setAdapter(adapter);
}
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem menuItem) {
Fragment fragment = null;
switch (menuItem.getItemId()) {
case R.id.nav_home:
fragment = new HomeFragment();
break;
case R.id.nav_profile:
fragment = new ProfileFragment();
break;
case R.id.nav_discussion:
fragment = new DiscussionFragment();
break;
}
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, fragment).commit();
drawer.closeDrawer(GravityCompat.START);
return true;
}
#Override
public void onBackPressed() {
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
}
super.onBackPressed();
}
}
SectionsPageAdapter.java
public class SectionsPageAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public void addFragment(Fragment fm, String title) {
mFragmentList.add(fm);
mFragmentTitleList.add(title);
}
public SectionsPageAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Popular Games";
case 1 :
return "Upcoming Games";
}
return null;
}
#Override
public int getCount() {
return mFragmentList.size();
}
}
activity_homepage.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context=".Activities.Homepage"
android:background="#000000"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/common_google_signin_btn_text_dark_focused"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpagers"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>
profileFragment.java
public class ProfileFragment extends Fragment {
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable
ViewGroup container, #Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_profile, container, false);
}
}
fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFF"
android:clickable="true">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text ="Profile Fragment"
android:textSize="30sp"
android:layout_centerInParent="true"/>
</RelativeLayout>
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,fragment).commit();
paste this code before break statement in onNavigationItemSelectedMethod.
you have to attach the fragment to activity.

Android tab layout broken scroll

Hi I have a small problem with the tab layout. After I have implemented tab layout and put the recycle view in I have the problem that after I scroll the list the toolbar seem to blend with the title. Am I making the mistake in the code tab activity or its some other issue.
Thanks
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Tab activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_completed__challenges);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
}
/**
* A {#link FragmentPagerAdapter} that returns a fragment corresponding to
* one of the sections/tabs/pages.
*/
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
tab1_completed_running tab1 = new tab1_completed_running();
return tab1;
case 1:
tab2_completed_walking tab2 = new tab2_completed_walking();
return tab2;
case 2:
tab3_completed_cycling tab3 = new tab3_completed_cycling();
return tab3;
default:
return null;
}
}
#Override
public int getCount() {
// Show 3 total pages.
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Running";
case 1:
return "Walking";
case 2:
return "Cycling";
}
return null;
}
}
Layout of recycle view:
<android.support.v7.widget.RecyclerView
android:id="#+id/tab_resultList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp">
</android.support.v7.widget.RecyclerView>

Replace Fragment over Fragment that contains ViewPager

I have ONE activity that calls a FragmentParent. This contains a viewpager. The viewpager has 2 tabs. In each tab there is a fragment. In the first tab (TAB-A) there is a fragment that contains a Recyclerview. When I click over an item the app opens new fragment, but when I go back ALL the fragments inside the viewpager get empty.
I am using Fragments and support library v-13, I already tried with v-4 but I had the same issue.
This is my code:
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_test);
initWithFragments(savedInstanceState);
}
public void initWithFragments(Bundle savedInstanceState) {
if (findViewById(R.id.fragment_container) != null) {
if (savedInstanceState != null) {
return;
}
// Create a new Fragment to be placed in the activity layout
MainFragment mainFragment = new MainFragment();
//Fragment transaction
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.add(R.id.fragment_container, mainFragment);
ft.commit();
}
}
MainFragment
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_app, container, false);
//Enabled menu
setHasOptionsMenu(true);
// Initialize Toolbar and View Pager
toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);
((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each section
SectionsPageAdapter mSectionsPagerAdapter = new SectionsPageAdapter(getFragmentManager());
// Set up the ViewPager with the sections adapter.
ViewPager mViewPager = (ViewPager) rootView.findViewById(R.id.container_view_pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
switch (position) {
case 0:
toolbar.setTitle("Home");
break;
case 1:
toolbar.setTitle("Downloads");
break;
default:
break;
}
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
// Set up tab layout
TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
return rootView;
}
fragment_app
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
This is the FragmentA inside the viewpager
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorGrayLight"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:id="#+id/container_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<android.support.v7.widget.RecyclerView
android:id="#+id/video_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Also I have the PageAdapter
public class SectionsPageAdapter extends FragmentPagerAdapter {
private int NUM_PAGES = 2;
public SectionsPageAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
// Return a PlaceholderFragment (defined as a static inner class below).
switch (position) {
case 0:
return SearchFragment.newInstance();
case 1:
return DownloadFragment.newInstance();
default:
return new Fragment();
}
}
#Override
public int getCount() {
return NUM_PAGES;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Search";
case 1:
return "Downloads";
}
return null;
}
}
I am using FragmentTransaction to replace Fragments...
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_container,settingFragment);
ft.addToBackStack(null);
ft.commit();
If you guys can help me, I will really appreciate
Thanks
This is what I want to:
change FragmentA layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorGrayLight"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:id="#+id/container_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<android.support.v7.widget.RecyclerView
android:id="#+id/video_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</FrameLayout>
Now when you replace fragment with this
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_container,settingFragment);
ft.addToBackStack(null);
ft.commit();
it will take R.id.fragment_container from FragmentA
I finally resolved using getChildFragments:
I used getChildFragmentManager instead of getFragmentManager. I passed to the constructor of the PageAdapter
SectionsPageAdapter mSectionsPagerAdapter = new SectionsPageAdapter(getChildFragmentManager());
In the view holder of the RecyclerView I created an Interface to communicate Nested Fragments with the Activity(main container). Using this way I could replace Fragments in the R.id.fragment_container
I found the solution in this link:
Adding child Fragment to Parent Fragment withing a ViewPager in Android

How do I implement AppCompatActivity with NavigationDrawer and multiple fragments reusing same TabLayout?

I have successfully used TabLayout with AppCompatActivity with a CoordinatorLayout that looks close to this snippet:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content" />
</android.support.design.widget.CoordinatorLayout>
Now I have implemented a NavigationDrawer and I am struggling to implement tabs within one of the Fragments being shown inside my AppCompatActivity. I want to be able to switch with TabLayout between few child Fragments inside of this Fragment.
How do I access TabLayout from one of my Fragments?
How do I set PagerAdapter for each of the Fragments correctly?
Where do I call addOnPageChangeListener?
How do I hide TabLayout when one of my Fragments does not need to
display tabs?
1. Switching between first-level Fragments
Suppose layout content.xml stands for:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ui.MyActivity"
tools:showIn="#layout/my_activity" />
Then, to be able to switch between the Fragments, implement this function:
private void makeTransition(int fragmentId) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
switch (fragmentId) {
// Fragment with tabs
case FRAGMENT_TABS:
fragmentTransaction.replace(R.id.fragment_container, new TabsFragment());
// This shows TabLayout
findViewById(R.id.tabs).setVisibility(View.VISIBLE);
getSupportActionBar().setTitle(R.string.fragment_tabs_title);
break;
// Fragment with no tabs
case FRAGMENT_NO_TABS:
fragmentTransaction.replace(R.id.fragment_container, new NoTabsFragment());
// This hides TabLayout
findViewById(R.id.tabs).setVisibility(View.GONE);
getSupportActionBar().setTitle(R.string.fragment_no_tabs_title);
break;
default:
throw new RuntimeException("No fragment with ID " + fragmentId + " found");
}
fragmentTransaction.commit();
}
2. Accessing and setting up TabLayout from first-level Fragment
In TabsFragment class, add a private class TabAdapter:
private class TabAdapter extends FragmentPagerAdapter {
public TabAdapter(FragmentManager fm) {
super(fm);
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "TAB1";
case 1:
return "TAB2";
// ...
}
return null;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return Tab1Fragment.getInstance();
case 1:
return Tab2Fragment.getInstance();
// ...
}
return null;
}
#Override
public int getCount() {
return 2;
}
}
Also, optionally, implement a ViewPager.OnPageChangeListener:
private class FragmentPageChangeListener implements ViewPager.OnPageChangeListener {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.d(getClass().getName(), "onPageScrolled");
}
#Override
public void onPageSelected(int position) {
Log.d(getClass().getName(), "onPageSelected");
}
#Override
public void onPageScrollStateChanged(int state) {
Log.d(getClass().getName(), "onPageScrollStateChanged");
}
}
Suppose your layout for fragment with tabs is like this:
<RelativeLayout 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.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" />
</RelativeLayout>
Override onCreateView to look like this:
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.viewpager_fragment, null);
fragmentPagerAdapter = new TabAdapter(getChildFragmentManager());
fragmentPageChangeListener = new FragmentPageChangeListener();
ViewPager pager = (ViewPager) view.findViewById(R.id.viewpager);
pager.setAdapter(fragmentPagerAdapter);
pager.addOnPageChangeListener(fragmentPageChangeListener);
TabLayout tabLayout = (TabLayout) MyAcvtivity.getInstance().findViewById(R.id.tabs);
tabLayout.setupWithViewPager(pager);
return view;
}
NB:
Use getChildFragmentManager() and not getFragmentManager() in first-level Fragments when instantiating a ViewPager.

Navigation Drawer among tabs

I am trying to implement both tabs and navigation drawer.
I have already successfully implemented tabs, and I started to insert navigation drawer, now just in my activity_main.xml layout.
I don't know how to implement this in my main activity, since all tutorials I have found don't use the same structure I use for my tabs.
Ideally, I want that on a click to the last tab, the navigation drawer opens from right, like that I could mask ActionBar (like Airbnb did)
I think it could be possible either with moving my tabs on action bar, or making a tab icon click to open navigation drawer (simpler I think.
If it is not possible, keep my sliding tabs and their "links" just bellow action bar.
How do you think I can activate/display and populate my navigation drawer, without disturbing my tabs ?
activity_main.xml
<LinearLayout
android:id="#+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"/>
</android.support.v4.widget.DrawerLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private int[] tabIcons = {
R.drawable.ic_discover_tab,
R.drawable.ic_planning_tab,
R.drawable.ic_favorite_tab,
R.drawable.ic_message_tab,
R.drawable.ic_account_tab
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//getSupportActionBar().setDisplayHomeAsUpEnabled(true); //Fleche de retour
//getSupportActionBar().setDisplayShowHomeEnabled(false); // hides action bar icon
//getSupportActionBar().setDisplayShowTitleEnabled(false); // hides action bar title
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
for (int i=0; i<=4; i++) {
tabLayout.addTab(tabLayout.newTab().setIcon(tabIcons[i]));//.setText("D").setIcon()
}
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter (getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
//Launch login activity
Intent intent = new Intent(this, LoginActivity.class);
startActivity(intent);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
PagerAdapter.java
public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public PagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
Tab1Discover tab1 = new Tab1Discover();
return tab1;
case 1:
Tab2Planning tab2 = new Tab2Planning();
return tab2;
case 2:
Tab3Favorites tab3 = new Tab3Favorites();
return tab3;
case 3:
Tab4Messages tab4 = new Tab4Messages();
return tab4;
case 4:
Tab5Profile tab5 = new Tab5Profile();
return tab5;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:id="#+id/drawerLayout"
android:layout_height="match_parent">
<RelativeLayout
android:layout_gravity="start"
android:layout_width="240dp"
android:layout_height="match_parent">
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
change android:layout_gravity="start" to android:layout_gravity="end" to change navigationdrawer position from left to right

Categories

Resources