Currently my application have a MainActivity with the toolbar and a framelayout used to display fragment.
Now I have a fragment with tablayout and viewpager. But the tablayout in this fragment shows an empty whitebar instead of the tab content. I am still able to swipe left and right to change viewpager content which is my other fragment but unable to view the tablayout.
So this is my fragment with tablayout and viewpager:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:fillViewport="true"/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
class UploadPreviewFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.fragment_upload_preview, container, false)
val viewPager = view.findViewById<ViewPager>(R.id.view_pager)
val tabLayout = view.findViewById<TabLayout>(R.id.tab_layout)
val fragmentManager = UploadPagerAdapter(childFragmentManager)
viewPager.adapter = fragmentManager
tabLayout.setupWithViewPager(view_pager)
return view
}
}
My adapter calss:
class UploadPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
override fun getItem(position: Int): Fragment {
return when (position) {
0 -> {
UploadPdfFragment()
}
else -> {
UploadImagesFragment()
}
}
}
override fun getCount(): Int {
return 2
}
override fun getPageTitle(position: Int): CharSequence? {
return when (position) {
0 -> {
"Upload PDF"
}
else -> {
"Upload Images"
}
}
}
}
And Screenshot for the tablayout: https://i.stack.imgur.com/9mFWU.png
EDIT
I have found the solution to my problem from https://developer.android.com/reference/android/support/design/widget/TabLayout. The problem cause by this is because the xml file, the tablayout should place inside the viewpager.
<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:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:background="@color/colorPrimary"
android:fillViewport="true"/>
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
