Viewpager inside a DialogFragment - wrong dialog height

Question

I am trying to use a viewpager inside a dialog fragment (a SherlockDialogFragment actually). Every page consists of a text view with a left drawable. The problem i am facing is that the dialog size is 'wrong'. The width is too little, the height too much (it extends from top to bottom). For the width, i have "solved" this problem forcing its minimum width to be 70% of the screen width (via code, in the onCreateView() method of the dialog fragment). For the height, i don't know how to fix it. There is a button down there, but it can't be seen:

The viewpager is working (i can swipe the three pages i have setup). This is the dialog fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/dlg_bkg"
    android:orientation="vertical" >


    <TextView        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="TITLE"
        android:textStyle="bold"
        android:maxLines="1"
        android:drawableLeft="@drawable/icon"
        android:drawablePadding="8dp"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="2px"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/lineseparator"
        android:visibility="visible" />



    <android.support.v4.view.ViewPager
        android:id="@+id/welcome_dlg_pager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
         >
    </android.support.v4.view.ViewPager>

    <View
        android:layout_width="fill_parent"
        android:layout_height="2px"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/lineseparator"
        android:visibility="visible" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"

     >


        <Button
            android:id="@+id/close_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:background="?selectableItemBackground"
            android:minHeight="40dp"
            android:text="Close"
            android:textColor="@android:color/white" />



    </LinearLayout>

</LinearLayout>

This is the example page layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/welcome_dlg_page1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >


    <TextView        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Page 1 - ekrjgwoirhfwiorht2iu3hr2984hr893rhg3hff2jif283hr29837rh283eh23r23r2r23rwrgioehrg803"
        android:drawableLeft="@drawable/img1"
        android:drawablePadding="8dp"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

Why the dialog height is too much? How can i fix it?

Answer 1

I also had the same issue. I also wanted the height as per the viewpager's current item so I followed the following steps.

First of all, You need to override the onMeasure method of the viewpager. as explained here.

public class WrapContentViewPager extends ViewPager {

    public WrapContentViewPager(@NonNull Context context) {
        super(context);            
    }

    public WrapContentViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);           
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        View child = getChildAt(getCurrentItem());
        if (child != null) {
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }
}

After that, Add PageChangeListener so that we can remeasure the viewpager's height every time when the viewpager item has been changed. We will add a initPageChangeListener() method and call it in the constructor.

public WrapContentViewPager(@NonNull Context context) {
    super(context);
    initPageChangeListener();
}

public WrapContentViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initPageChangeListener();
}

private void initPageChangeListener() {
    addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            requestLayout();
        }
    });
}

Now, I had the issue when the viewpager adapter has more than 3 items, So I added following lines in onMeasure(). as explained in this answer.

if (getAdapter() != null)
        setOffscreenPageLimit(getAdapter().getCount());

And, everything works perfectly.

Answer 2

you have to overide the onstart method and set the height and width if dialouge fragment their,like

@Override
public void onStart(){
   super.onStart();

  if (getDialog() == null)
    return;

  int dialogWidth = ... // assign width here
  int dialogHeight = ... // assign height here

   getDialog().getWindow().setLayout(dialogWidth, dialogHeight);

}

Answer 3

Answer here:

stackoverflow answer

Extend the ViewPager class and override the onMeasure() method.