ViewPager with fragment not showing

Question

This is surprisingly my first attempt at using fragments. I know I should have started using them ages ago but well, better late than never.

I followed this guide http://developer.android.com/training/animation/screen-slide.html

It didn't work for me so I searched here on stack and studied this answer How to implement a ViewPager with different Fragments / Layouts

However, my fragment still refuses to show up. Maybe I have done something wrong, some very basic mistake. Here is my code:

ImageGalleryFragment.java

 public class ImageGalleryFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View v = inflater.inflate(R.layout.fragment_images, container, false);

        ImageView iv = (ImageView) v.findViewById(R.id.imageView);
        Picasso.with(getActivity()).load("https://i.sstatic.net/WvXbA.png".replaceAll(" ", "%20")).into(iv);

        return v;
    }

    public static ImageGalleryFragment newInstance(String text)
    {
        ImageGalleryFragment f = new ImageGalleryFragment();
        Bundle b = new Bundle();
        b.putString("image", text);

        return f;
    }
}

fragment_images.xml

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:src="@drawable/placeholder"/>
</LinearLayout>

Details.java (relevant parts)

int NUM_PAGES = 5;
private ViewPager mPager;
private PagerAdapter mPagerAdapter;

mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
mPager.setAdapter(mPagerAdapter);

private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter
{
    public ScreenSlidePagerAdapter(FragmentManager fm)
    {
        super(fm);
    }

    @Override
    public Fragment getItem(int position)
    {
        return new ImageGalleryFragment().newInstance("https://i.sstatic.net/WvXbA.png");
    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}

I know I'm hardcoding some stuff but that's because I was getting nullpointerexception on the following:

getArguments().getString("image")

Finally, here is my viewpager in the xml:

<android.support.v7.widget.CardView
            android:id="@+id/card_view0"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            card_view:cardBackgroundColor="#ffffff"
            card_view:cardCornerRadius="4dp">

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </android.support.v7.widget.CardView>

So what am I not doing or doing wrong? There is no sign of the fragment in my activity.

Answer 1

The problem is with the viewPagers height as you have correctly noted. Picasso loads the image only after the view is inflated and thus already wrapped. The solution would be to either set the CardView or ViewPagers height to a fixed dp.

Another option is to write a custom ViewPager that extends ViewPager and measure the images height in onMeasure(). Then implement this custom ViewPager in your xml layout:

public class CustomViewPager extends ViewPager { //extend the android viewpager

  public CustomViewPager(Context context) {
      super(context);
  }

  public CustomViewPager(Context context, AttributeSet attrs) {
      super(context, attrs);
  }

  @Override //override onMeasure so we can measure the heights of our children
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

      int height = 0;
      for(int i = 0; i < getChildCount(); i++) {
          View child = getChildAt(i);
          child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
          int h = child.getMeasuredHeight();
          if(h > height) height = h;
      }

      heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);

      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }

}

Then in you xml:

  <android.support.v7.widget.CardView
        android:id="@+id/card_view0"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="#ffffff"
        card_view:cardCornerRadius="4dp">

        <com.your.path.to.CustomViewPager //point this path the package where your custom class is
                    android:id="@+id/imagePager"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"/>

    </android.support.v7.widget.CardView>