0

I have made 3 fragments with views that I scroll through horizontally. In each fragment view I am going to have an image that is larger then the screen and when the screen is scrolled the image will move slightly in that same direction with a parallax effect inside its parent view.

I have done lots of research and the only working version of a parallax effect I have found was for a vertical list view. I have tried to apply the same principals but its not working. It appears there is something wrong with this v.getLocalVisibleRect(r) as its returning 0,0,0,0 for the image. I need to know how to get this image moving.

Main

public class MainActivity extends FragmentActivity {
ViewPager viewpager;
ImageView image;
private int lastTop = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewpager = (ViewPager) findViewById(R.id.pager);
    PagerAdapter padapter = new PagerAdapter(getSupportFragmentManager());
    viewpager.setAdapter(padapter);

    //Parallax attempt
    View view = LayoutInflater.from(getApplication()).inflate(R.layout.fragment_one_layout, null);
    image = (ImageView) view.findViewById(R.id.image1);


    viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            parallax(image);

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }); // End of attempt
}

    //Parallax method
public void parallax(final View v) {
    final Rect r = new Rect();
    v.getLocalVisibleRect(r);
    if (lastTop != r.top) {
        lastTop = r.top;
        v.post(new Runnable() {
            @Override
            public void run() {
                v.setX((float) (r.top / 2.0));
            }
        });
    }
}
}

PageAdapter

public class PagerAdapter extends FragmentPagerAdapter {

public PagerAdapter(FragmentManager fm) {
    super(fm);
    // TODO Auto-generated constructor stub

}

@Override
public Fragment getItem(int arg0) {
    // TODO Auto-generated method stub
    switch (arg0) {
        case 0:

            return new FragmentOne();
        case 1:
            return new FragmentTwo();
        case 2:
            return new FragmentThree();

        default:
            break;
    }
    return null;
}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return 3;
}
}

Activity_main layout

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

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</FrameLayout>

FragmentOne Layout - Other fragments are the same with different ImageViews.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".Activity.MainActivity"
android:id="@+id/fone">

<ImageView
    android:layout_width="427dp"
    android:layout_height="568dp"
    android:id="@+id/image1"
    android:src="@drawable/city"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"/>
 </FrameLayout>
JP4
  • 1,008
  • 2
  • 15
  • 25
  • your image is not in the hierarchy because you inflated it without adding it, hence it is not visible. You need to get a reference to the image displayed when you apply you effect. – njzk2 Jul 05 '16 at 01:54
  • @njzk2 - Thanks mate, that's put me on the right track, how can I reference the displayed image? – JP4 Jul 05 '16 at 03:25

1 Answers1

0

Why do you want to show a image in 3 fragments? It's because is big or just a style purpose?

If it's because your image its too big, you can create a zoom in/out for your image as is described here.

If its because you only want to show a image in 3 different fragments for no specific reason you can check TabLayout here.

Community
  • 1
  • 1
Alberto Alegria
  • 1,023
  • 10
  • 26
  • Each fragment is a separate view with a unique image, for the purpose of this question I'm just trying to get the parallax effect working on my first fragment and then I will apply it to the other fragments. Thanks. – JP4 Jul 05 '16 at 03:27
  • Did you check the tab layout? You can crop your image in 3 parts with the same size, then assign them to the 3 fragments you have (1st part to Fragment 1, 2nd part to fragment two, etc) and then add your 3 fragments to a TabLayout. – Alberto Alegria Jul 06 '16 at 03:49