Tabs with different height in fragments issue

43 Views Asked by At

I have researched this issue in Stackoverflow and encountered several posts such as the ones below but none had valid/working answers yet, unfortunately.

Adding fragments of Different height to a Tab Layout

Tabs with dynamic height in fragment

I've implemented a standard tab layout with 2 fragments as mentioned in this post.

First fragment's height is shorter than of the second fragment due to its content.

Tabs switch as expected, however, the lower part of the second fragment is not displayed, although the first fragment is shown completely.

If I add "android:paddingBottom="120dp"" to the layout in the first fragment, second fragment is shown as expected. But in this case the first fragment is way longer than it should be.

I have tried adding the following code in onTabSelected method:

commissionProgramDetailsTabFragmentAdapter.notifyDataSetChanged()

Also tried to add the content of the second fragment dynamically and calling requestLayout() on fragment or all possible layouts. Unfortunately, neither of the attempts worked.

Any help is greatly appreciated.

Current first tab fragment:

Current first tab fragment

Current second tab fragment:

Current second tab fragment

Desired first tab fragment:

Desired first tab fragment

Desired second tab fragment:

Desired second tab fragment

HomeActivity.kt:


    private fun initializeCommissionProgramDetailsTab() {
        // initialize components
        tabLayoutCommissionProgramDetails = findViewById<TabLayout>(R.id.tabLayoutCommissionProgramDetails)
        viewPager2CommissionProgramDetails = findViewById<ViewPager2>(R.id.viewPager2CommissionProgramDetails)

        // initialize adapter
        commissionProgramDetailsTabFragmentAdapter = CommissionProgramDetailsTabFragmentAdapter(supportFragmentManager, lifecycle)

        // Add Tabs to TabLayout
        tabLayoutCommissionProgramDetails.addTab(tabLayoutCommissionProgramDetails.newTab().setText(R.string.tab_commission_program_details__commission))
        tabLayoutCommissionProgramDetails.addTab(tabLayoutCommissionProgramDetails.newTab().setText(R.string.tab_commission_program_details__program_details))

        // Assign Adapter to ViewPager2
        viewPager2CommissionProgramDetails.adapter = commissionProgramDetailsTabFragmentAdapter

        // Add OnTabSelectedListener
        tabLayoutCommissionProgramDetails.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener{
            override fun onTabSelected(tab: TabLayout.Tab?) {
                if (tab != null)
                    viewPager2CommissionProgramDetails.currentItem = tab.position
                commissionProgramDetailsTabFragmentAdapter.notifyDataSetChanged()
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
            }
        })

        // registerOnPageChangeCallback
        viewPager2CommissionProgramDetails.registerOnPageChangeCallback(object :
            ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                tabLayoutCommissionProgramDetails.selectTab(tabLayoutCommissionProgramDetails.getTabAt(position))
            }
        })

    }

Adapter (CommissionProgramDetailsTabFragmentAdapter.kt):

class CommissionProgramDetailsTabFragmentAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle) : FragmentStateAdapter(fragmentManager, lifecycle) {

    override fun getItemCount(): Int {
        return 2
    }

    override fun createFragment(position: Int): Fragment {
        return if (position == 0)
            CommissionTabFragment()
        else
            ProgramDetailsTabFragment()
    }
}

fragment_commission_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="horizontal"
    tools:context=".CommissionTabFragment">

    <LinearLayout
        android:orientation="horizontal"
        android:paddingBottom="0dp"
        android:layout_marginVertical="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <RelativeLayout
            android:layout_weight="0.33"
            android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">


                <TextView
                    android:text="$0"
                    style="@style/TabCounterTextView"
                    android:textColor="@color/tab_yellow"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp" />


                <TextView
                    android:text="@string/commission_status_pending"
                    style="@style/TabLabelTextView"
                    android:textColor="@color/tab_yellow"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp" />

            </LinearLayout>


        </RelativeLayout>

        <RelativeLayout
            android:layout_weight="0.33"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="$0"
                    style="@style/TabCounterTextView"
                    android:textColor="@color/tab_blue"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp" />


                <TextView
                    android:text="@string/commission_status_approved"
                    style="@style/TabLabelTextView"
                    android:textColor="@color/tab_blue"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp" />

            </LinearLayout>

        </RelativeLayout>

        <RelativeLayout
            android:layout_weight="0.33"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="$0"
                    style="@style/TabCounterTextView"
                    android:textColor="@color/tab_green"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp" />


                <TextView
                    android:text="@string/commission_status_paid"
                    style="@style/TabLabelTextView"
                    android:textColor="@color/tab_green"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp" />

            </LinearLayout>

        </RelativeLayout>


    </LinearLayout>

</FrameLayout>

fragment_program_details_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/fragmentLayoutMain"
    tools:context=".ProgramDetailsTabFragment">



        <LinearLayout
            android:id="@+id/linearLayoutProgramDetailsTabFragment"
            android:orientation="vertical"
            android:paddingHorizontal="24dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:text="@string/fragment_program_details__program_name"
                style="@style/TabProgramDescription"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp" />
            <TextView
                android:id="@+id/textViewProgramDescription"
                android:text="@string/fragment_program_details__program_description"
                style="@style/TabProgramDescription"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textMultiLine"
                android:layout_marginBottom="8dp" />
            <TextView
                android:text="@string/fragment_program_details__commission_type"
                style="@style/TabProgramDescription"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp" />
            <TextView
                android:text="@string/fragment_program_details__commission_amount"
                style="@style/TabProgramDescription"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp" />

        </LinearLayout>


</FrameLayout>
0

There are 0 best solutions below