Search code examples
androidandroid-viewpagerswipe

Make button stay fixed when swiping a viewPager

Basically, I want a button that appears on a certain page on my viewPager to stay on position on swipe (for design purposes). I have read the closely similar question here but I didn't understand how the OP implemented it. My button and viewPager are defined separately on my layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >


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


     <Button
         android:id="@+id/button_register"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_above="@+id/indicator"
         android:layout_centerHorizontal="true"
         android:layout_marginBottom="96dp"
         android:text="Register" 
         android:visibility="gone"/>

</RelativeLayout>

I detect page swipes with OnPageChangeListener. Here is a graphic example of what I want to implement:

example

Thank you!

EDIT

Here is the file imageview.xml, which is defined for each page in the viewPager. I included the button here as advised by @attels (it was previously defined in the main activity layout), but now my app crashes.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >


<ImageView
    android:id="@+id/ivImageView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:contentDescription="@string/welcome1"
    android:scaleType="fitXY"/>

<include layout="@layout/imageview_page"/>

<Button
     android:id="@+id/button_register"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_above="@+id/indicator"
     android:layout_centerHorizontal="true"
     android:layout_marginBottom="96dp"
     android:text="Register" 
     android:visibility="gone"/>

</RelativeLayout>

FINAL EDIT So in order for any Button or Text or whatever that you want to keep fixed in a viewPager's page, you need to define said element in the page's layout (NOT in the main activity's layout) and also instantiate the button inside the fragment. Thanks!

Solution

  • From documentation - http://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html

    This method in FragmentPagerAdapter shows each screen. 

     @Override
        public Fragment getItem(int position) {
            return ArrayListFragment.newInstance(position); 
        }

    So that means that you need to add the button in ArrayListFragments layout here:

    @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View v = inflater.inflate(R.layout.fragment_pager_list, container, false); 
            // Here is the layout that the fragment is going to show.
            //some code
            return v;
        }

    And here is the fragment_pager_list layout:

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="146dp"
        android:text="Button" />

</RelativeLayout>

    So now the button is going to follow the screen.