Search code examples
xamarin.android

Adding tabitems to tablayout based on viewpager not showing fragment


I have an app with tabpages based on a list. The tablayout is generated based on viewpager. But when I select a tab, the fragment is nog showing.

Here's my acitivty code:

List<string> categories = new List<string>
            {
                "Books",
                "Fruits",
                "Vegetables"
            };
    
 var view_pager = FindViewById<ViewPager>(Resource.Id.view_pager_pos);
 var tabLayout = FindViewById<TabLayout>(Resource.Id.tablayout_pos);
    
   _categoriesPagerAdapter = new CategoriesFragmentPagerAdapter(SupportFragmentManager,
                 FragmentPagerAdapter.BehaviorResumeOnlyCurrentFragment,
                 tabLayout.TabCount,
                 categories);      
                
        TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        view_pager.Adapter = _categoriesPagerAdapter;
        tabLayout.SetupWithViewPager(view_pager, true);

Here is my acitivity xml:

<LinearLayout
     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:orientation="horizontal"
     android:minWidth="25px"
     android:minHeight="25px"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:id="@+id/linearLayout_pos">
    
    
     <FrameLayout
         android:id="@+id/fragment_container_pos"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_weight="0.7" />
    
     <com.google.android.material.tabs.TabLayout
         android:layout_weight="0.3"
         android:minWidth="25px"
         android:minHeight="25px"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:tabGravity="fill"
         android:id="@+id/tablayout_pos">
                    
     </com.google.android.material.tabs.TabLayout>
    
     <androidx.viewpager.widget.ViewPager
         android:id="@+id/view_pager_pos"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1"
         android:background="@android:color/white" />
    
    
 </LinearLayout>

Here is my CategoriesFragmentPagerAdapter:

internal class CategoriesFragmentPagerAdapter : FragmentPagerAdapter
     {
         private int _tabNr;
         private List<string> categories;
    
         public CategoriesFragmentPagerAdapter(FragmentManager fm, int behavior, int tabs, List<string> categories) : base(fm, behavior)
         {
             _tabNr = tabs;
             this.categories = categories;
         }
                  
         public override int Count => _tabNr;
    
         public override Fragment GetItem(int position)
         {
             var category = categories[position];
             return new ProductsByCategoryFragment(category.Id);
         }
     }

Here is my ProductsByCategoryFragment (tabpage fragment based on category):

internal class ProductsByCategoryFragment : AndroidX.Fragment.App.Fragment
{
    private readonly string category;
    

    public ProductsByCategoryFragment(string category)
    {
        this.category = category;
    }

    public override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
    }

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {

        return inflater.Inflate(Resource.Layout.pos_products_per_category, container, false);
    }

    public override void OnViewCreated(View view, Bundle savedInstanceState)
    {
        base.OnViewCreated(view, savedInstanceState);
    }
}

Here is my pos_products_per_category.xml:

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout 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"
     app:layout_behavior="@string/appbar_scrolling_view_behavior"
     tools:showIn="@layout/app_bar_main">
    
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true"
         android:text="Category fragment" />
    
 </RelativeLayout>

The tabpages I can see, but the fragment is not showing on the tabpage. Am I missing something here?


Solution

  • I had test your code on my device. I changed some code to make it run successfully. When I changed android:orientation="horizontal" to vertical and the android:layout_height="match_parent" to wrap content, the fragment will show.Such as:

    <LinearLayout
     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:orientation="vertical"
     android:minWidth="25px"
     android:minHeight="25px"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:id="@+id/linearLayout_pos">
    
    
     <FrameLayout
         android:id="@+id/fragment_container_pos"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_weight="0.7" />
    
     <com.google.android.material.tabs.TabLayout
         android:layout_weight="0.3"
         android:minWidth="25px"
         android:minHeight="25px"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:tabGravity="fill"
         android:id="@+id/tablayout_pos">
                    
     </com.google.android.material.tabs.TabLayout>
    
     <androidx.viewpager.widget.ViewPager
         android:id="@+id/view_pager_pos"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1"
         android:background="@android:color/white" />