CODEWITHSUNDEEP
androidandroid-layoutandroid-viewpager
Ansh
Ansh

Reputation: 2396

ViewPager in android is taking full screen?

In my xml file I have a Linear layout that has a ViewPager for showing images and another Linear layout that contains previous and Next buttons for selecting images.My xml looks like this:

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

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

            <Button
                android:id="@+id/goto_first"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="first" >
            </Button>

            <Button
                android:id="@+id/goto_last"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="last" >
            </Button>
        </LinearLayout>

    </LinearLayout>

My problem is that the ViewPager is taking full screen and the Linearlayout with previous next buttons is not showing up because there is no space left to draw this LinearLayout.

I am using Fragments to populate ViewPager with views.The xml file for the fragment view that goes into ViewPager is:

<ImageView
    android:id="@+id/ItemImage"
    android:layout_width="320dp"
    android:layout_height="180dp" />

<TextView
    android:id="@+id/ItemText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left|bottom"
    android:layout_marginBottom="5dp"
    android:textColor="#ffffffff"
    android:textStyle="bold" />
</FrameLayout>

The output i am getting after rendering is in this manner:
1.image ( covering 45% screen height)
2.blank space (covering 45% screen height)
3.Textview (covering rest of the 10% screen height)

The output i want is :
1.image ( covering 45% screen height)
2.Textview (covering 10% screen height)
3.LinearLayout for Buttons (covering rest of the 45% screen height)

Upvotes: 13

Views: 18762

Answers (8)

sai Pavan Kumar
sai Pavan Kumar

Reputation: 1177

I have this issue while implementing an ap. For Populating Images into ViewPager use RelativeLayout instead of FrameLayout.

In my case FrameLayout Occupied more than 30% of empty space.When I used RelativeLayout the space has disappeared.

Like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent”>
<ImageView
        android:id="@+id/itemImagePager"
        android:layout_width="match_parent"
        android:layout_height=“match_parent"
        android:scaleType="fitCenter" />
<ProgressBar
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true”/>
</RelativeLayout>

Hope it works for you.

Upvotes: 0

Hector Hugo Alonzo
Hector Hugo Alonzo

Reputation: 1

In my case, this code works:

<androidx.viewpager.widget.ViewPager
    android:id="@+id/myviewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" />

Upvotes: 0

Anish Vahora
Anish Vahora

Reputation: 203

public class WrapViewPager extends ViewPager {

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

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

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

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

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

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

}

Upvotes: 0

Ofentse
Ofentse

Reputation: 1

Just Do The Following to make room for other views, below or above: 

< android.support.v4.view.ViewPager **android:layout_width**="match_parent" **android:layout_height**="match_parent" **android:layout_weight**="1"/>

This answer was taken from a comment made by Jave from the answers given on the below link.

Link: "Android ViewPager dimension"

Upvotes: 0

Shawn Lauzon
Shawn Lauzon

Reputation: 6282

Use RelativeLayout. Add your buttons to the bottom with alignParentBottom="true". Then add the ViewPager with layout_above="@id/buttons"

Upvotes: 11

Otieno Rowland
Otieno Rowland

Reputation: 2250

Just use a RelativeLayout and use the attributes like `

android:layout_below

until you achieve the position you desire. Relative Layout is your friend in these cases.

Upvotes: 4

zhumingvictor
zhumingvictor

Reputation: 109

Just give those to viewpager:

 android:layout_height="0dp"
 android:layout_weight="1"

Upvotes: 9

jbenowitz
jbenowitz

Reputation: 1815

The problem with viewpagers are they don't know the size since each fragment could possibly be a different size. You have to manually set the viewpager's, not wrap_content. I recommend setting a weight to all the items in the outer linear layout.

Upvotes: 5

Related Questions