CODEWITHSUNDEEP
androidandroid-viewpager
Nick
Nick

Reputation: 3435

android ViewPager customizable

I need to implement a scroll view as shown:

enter image description here

That is, in "idle" state image "1" is visible in full size and image "2" is visible partially (thus giving a clue to the user that he can scroll the content). After scrolling scrool view must not stay in intermediate state and scrolling must be completed (like iOS's Scroll View does when "Paging Enabled" is turned on):

enter image description here

I refused to use HorizontalScrollView, because it has nothing similar to "Paging Enabled" property.

After googling, I came across android.support.v4.view.ViewPager. It's scrolling behavior is perfectly what I want, but I have no good idea how to support "partially visible" next image in ViewPager? Technically, what should I return in the

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)?

For the present, my code is

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    View view = inflater.inflate(R.layout.stage_select_image_layout, container, false);
    ImageView imageView = (ImageView) view.findViewById(R.id.stage_select_image_layout_image);
    imageView.setImageResource(m_imageResourceId);
    return view;
}

But it results in "exactly one image per page" behavior, not what I want (see the very first figure).

enter image description here

Upvotes: 2

Views: 992

Answers (3)

djunod
djunod

Reputation: 4976

The easiest thing to do is, is in your PagerAdapter, implement an override for getPageWidth. The return value is a percent that the view takes up of the total space.

@Override
public float getPageWidth(int position) {
    return 0.75f;
}

Upvotes: 1

Nick
Nick

Reputation: 3435

This does the trick:

    ViewPager pager = ...;
    pager.setOffscreenPageLimit(2);
    pager.setPageMargin(-200);

Upvotes: 1

toadzky
toadzky

Reputation: 3846

Use the widthFactor attribute of the ViewPager's LayoutParams. It should scale it so you can see a little of the next page.

Upvotes: 0

Related Questions