CODEWITHSUNDEEP
androidandroid-viewpager
IBRA
IBRA

Reputation: 1792

Swipe part of the page using pager view

I have ViewPager with PagerTabStrip , when swiping from page to another, both the pager and the tab will be moving together. (like google paly)

It's working fine. now all the pages have common data, and one part is going to change when swiping, so i don't want to swipe the whole page, just the area that going to change.

As you can see in the following image just the red area will be effected when swipe pages, the green area will not move.

I've searched a lot, but i can't find anything useful, any help would be appreciated.

viewpager code:

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

        <android.support.v4.view.PagerTabStrip
                android:id="@+id/pager_title_strip"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="#FFFFFF"
                android:textColor="#003366"
                android:paddingTop="4dp"
                android:paddingBottom="4dp"/>
    </android.support.v4.view.ViewPager>

Upvotes: 3

Views: 1950

Answers (2)

Seem
Seem

Reputation: 271

Using swipeyTabs is the answer. The problem when using PagerTabStrip is that the PagerTabStrip will be inside the ViewPager tag see the following code:

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

        <android.support.v4.view.PagerTabStrip
                android:id="@+id/pager_title_strip"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="#FFFFFF"
                android:textColor="#003366"
                android:paddingTop="4dp"
                android:paddingBottom="4dp"/>
    </android.support.v4.view.ViewPager>

so you cant separate them form each other. but when using the SwipeyTabs, each tag will be as a separate part, see the following code:

<net.peterkuterna.android.apps.swipeytabs.SwipeyTabs
        android:id="@+id/swipeytabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        swipeytabs:bottomBarColor="#ff96aa39"
        swipeytabs:bottomBarHeight="2dip"
        swipeytabs:tabIndicatorHeight="3dip"
        android:background="#ff3b3b3b"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0px"
        android:layout_weight="1" />

In this case, you can customize your layout as you want by dealing with ViewPager and SwipeyTabs as two parts.

In your case, I guess you can put the SwipeyTabs and ViewPager in red position like in the image, and in the green areas, you have to just adjust them as your needs.

I found these links which may help you. Good luck with that.

Upvotes: 2

sstn
sstn

Reputation: 3069

Disclaimer: I misread your post. Separating the ViewPager from the PagerTabStrip may not work or may need another approach. I'll leave the answer here in case it may help anyway.

You can achieve that by embedding the ViewPager in a separate fragment and placing another independent fragment beneath, which is not controlled by the ViewPager.

Basically, your main activity consists of two fragments: one that contains the ViewPager (which contains more fragments), another one that contains your fixed view.

To do it properly, this needs support for nested fragments, which is only available on Android 4.2 or otherwise in the latest support library (revision 11).

Be aware when instantiating your adapter for the ViewPager, you need to use the FragmentManager returned by getChildFragmentManager().

Upvotes: 1

Related Questions