Adnroid ViewPager2 wrap content of asynchronous fragment child

Question

I got a ViewPager2 widget inside a scrollview which i want to set the height similar to the content of the current shown fragment. The fragments hold either a gridview or a listview which height is set to wrap_content.
The problem is that the gridview gets filled with content after the fragment view was created so the viewpager gets a child height of "0". Also the height of every fragment can be different to the others.
If I set the gridview height to e.g. 500dp everything works fine.
Is there some sort of listener to detect when the gridview is filled with content / the height of the gridview changed to set the viewpager heigth similar to the height of the fragment?

I already tried the solutions described here
How to wrap height of Android ViewPager2 to height of current item? and
ViewPager2 with differing item heights and WRAP_CONTENT

Layouts:
ViewPager:

  <RelativeLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/viewPagerID"               
        android:background="@color/light_blue">
    </androidx.viewpager2.widget.ViewPager2>

</RelativeLayout>

ScrollView:

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/top_navigation_view_bar"
        android:id="@+id/center"
        android:layout_above="@id/bottom_navigation_view_bar">

        <include layout="@layout/layout_viewpager"> </include>

 </ScrollView>

Test Fragment:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">


    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:id="@+id/grid_fragment_0"
        android:verticalSpacing="2dp"
        android:horizontalSpacing="2dp"
        android:stretchMode="columnWidth"
        android:gravity="top"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp">
    </GridView>   


</RelativeLayout>

Set up the ViewPager

Function in the activity

private void setUpFragmentsTest(){
        String[] fragment_names = {"Fragment0", "Fragment1", "Fragment2"};

        mViewPager2 = (ViewPager2) findViewById(R.id.viewPagerID);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        SectionsPagerAdapterNew sectionsPagerAdapterNew = new SectionsPagerAdapterNew(this);
        sectionsPagerAdapterNew.addFragment(new Fragment0());
        sectionsPagerAdapterNew.addFragment(new Fragment1());
        sectionsPagerAdapterNew.addFragment(new Fragment2());
        
        mViewPager2.setAdapter(sectionsPagerAdapterNew);

        TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
                tabLayout, mViewPager2, (tab, position) -> {
            tab.setText(fragment_names[position]);    

        });
        tabLayoutMediator.attach();
    }

Section pager adapter class:

public class SectionsPagerAdapterNew extends FragmentStateAdapter {

    private static final String TAG = "SectionsPagerAdapter";

    private final List<Fragment> mFragmentList = new ArrayList<>();

    public SectionsPagerAdapterNew(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    public SectionsPagerAdapterNew(@NonNull Fragment fragment) {
        super(fragment);
    }

    public SectionsPagerAdapterNew(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }    

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        return mFragmentList.size();
    }
    
    public void addFragment(Fragment fragment){
        mFragmentList.add(fragment);
    }   

}

score 0 · Answer 1 · answered Mar 06 '21 at 01:18

So I gave up with setting the ViewPager2 height within the xml layout. In my case I just need the ViewPager to cover the free area which isn't used by any navigation. Therefore I calculated the height pixels of the viewpager depending on the display size and ratio to fit between the top header / TabLayout and the bottom navigation (you will see in the code below).

Changes:

ViewPager2 Widget:

 <RelativeLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/viewPagerID"               
        android:background="@color/light_blue">
    </androidx.viewpager2.widget.ViewPager2>

</RelativeLayout>

Function inside the activity:

private void setUpFragmentsTest(){
        //SET UP THE VIEWPAGER THAT HOLDS THE PROFILE CONTENT FRAGMENTS
        String[] fragment_names = {"Fragment0", "Fragment1", "Fragment2"};

        mViewPager2 = (ViewPager2) findViewById(R.id.activity_profile_viewPager);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.activity_profile_tab_layout);
        SectionsPagerAdapterNew sectionsPagerAdapterNew = new SectionsPagerAdapterNew(this);
        sectionsPagerAdapterNew.addFragment(new Fragment0());
        sectionsPagerAdapterNew.addFragment(new Fragment1());
        sectionsPagerAdapterNew.addFragment(new Fragment2());

        //SET THE VIEWPAGER HEIGHT RELATIVE TO THE DISPLAY METRICS & DISPLAY RATIO

        //GET THE METRICS & DISPLAY RATIO USED BY THE DIFFERENT NAVIGATION BARS
        ViewGroup.LayoutParams tabLayoutLayoutParams = tabLayout.getLayoutParams();
        ViewGroup.LayoutParams navigationViewLayoutParams = findViewById(R.id.bottom_navigation_view_bar).getLayoutParams();

        Resources resources = ProfileActivity.this.getResources();
        int androidTopBarID = resources.getIdentifier("status_bar_height", "dimen", "android");
        float androidTopBarHeight = resources.getDimensionPixelSize(androidTopBarID);



        //SETTING THE ACTUAL VIEWPAGER HEIGHT
        float pixelsUsedByNavigation = tabLayoutLayoutParams.height + (2* navigationViewLayoutParams.height);
        //2* navigationViewLayoutParams.height because I'm using a top and bottom navigation bar, if there is just 1 don't double that value
        ViewGroup.LayoutParams viewPagerLayoutParams = mViewPager2.getLayoutParams();
        DisplayMetrics displayMetrics = ProfileActivity.this.getResources().getDisplayMetrics();
        float viewpagerHeight;

        float ratio = ((float)displayMetrics.heightPixels / (float)displayMetrics.widthPixels);
            
        if(ratio > 1.667){
            //LONG DISPLAY RATIO
            viewpagerHeight = displayMetrics.heightPixels - pixelsUsedByNavigation;
        }

        else {
            //NOT LONG DISPLAY RATIO
            viewpagerHeight = displayMetrics.heightPixels - pixelsUsedByNavigation - androidTopBarHeight;
        }

        viewPagerLayoutParams.height = Math.round(viewpagerHeight);
        mViewPager2.setLayoutParams(viewPagerLayoutParams);
        mViewPager2.setAdapter(sectionsPagerAdapterNew);

        //SET UP THE TAB LAYOUT TO DISPLAY AND HIGHLIGHT THE CURRENT FRAGMENT NAME
        TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
                tabLayout, mViewPager2, (tab, position) -> {
            tab.setText(fragment_names[position]);

        });
        tabLayoutMediator.attach();


        
    }

Adnroid ViewPager2 wrap content of asynchronous fragment child

1 Answers1