I'm using glide to load the images and apply the ViewPager to visualize them horizontally.
I would like to add to these images the Parallax effect (that the image moves slower to the viewPager). For this reason, when having a horizontal list of images with the ViewPager, when sliding to the left or right, the image has a movement effect at a speed different from the ViewPager
An example is this video
For the parallax effect, I am relying on the code of this site
In my activity UserDetail I use the parallaxImages () method in onPageScrolled ()
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
parallaxImages(position, positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
private void parallaxImages(int position, int positionOffsetPixels) {
Map<Integer, View> imageViews = mUsuarioDetallePagerAdapter.getImageViews();
for (Map.Entry<Integer, View> entry: imageViews.entrySet()){
int imagePosition = entry.getKey();
int correctedPosition = imagePosition - position;
int displace = -(correctedPosition * width/2)+ (positionOffsetPixels / 2);
View view = entry.getValue();
view.setX(displace);
}
}
In my Adapter UserDetailPagerAdapter I return a Fragment UserDetailFragment which contains the data and loads the image with glide
public class UsuarioDetallePagerAdapter extends FragmentStatePagerAdapter implements ViewPager.OnPageChangeListener {
private ArrayList<Usuario> listUsuarios;
private int currentPosition = 0;
public UsuarioDetallePagerAdapter(FragmentManager fm, ArrayList<Usuario> list) {
super(fm);
this.listUsuarios = list;
}
@Override
public Fragment getItem(int position) {
Usuario usuario = listUsuarios.get(position);
return UsuarioDetalleFragment.newInstance(usuario);
}
@Override
public int getCount() {
return listUsuarios.size();
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position)
{
currentPosition = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
Map<Integer, View> imageViews = new HashMap<Integer, View>();
public Map<Integer, View> getImageViews() {
return imageViews;
}
}
And in the Fragment class UserDetailFragment filled the elements and loaded the image
public class UsuarioDetalleFragment extends Fragment {
private static final String ARG_OBJECT = "UsuarioDetalle";
public UsuarioDetalleFragment() {
}
public static UsuarioDetalleFragment newInstance(Usuario u) {
UsuarioDetalleFragment fragment = new UsuarioDetalleFragment();
Bundle bundle = new Bundle();
bundle.putParcelable(ARG_OBJECT, u);
fragment.setArguments(bundle);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_usuario_detalle, container, false);
TextView textView = (TextView) view.findViewById(R.id.label_usuario_detalle);
Bundle bundle = this.getArguments();
if (bundle != null) {
Usuario usuario = bundle.getParcelable(ARG_OBJECT);
textView.setText("Usuario NO: " + usuario.getIdUsuario().toString());
ImageView imagenUsuarioDetalle = (ImageView) view.findViewById(R.id.imagen_usuario_detalle);
if(!usuario.getImagen().isEmpty()){
Glide.with(imagenUsuarioDetalle.getContext())
.load(usuario.getImagen())
.into(imagenUsuarioDetalle);
}else{
Glide.with(imagenUsuarioDetalle.getContext())
.load(R.drawable.default_user_grid)
.into(imagenUsuarioDetalle);
}
}
return view;
}
}
I just have no idea how to get the ImageView and the Position from the Adapter that loads in the instantiateItem () method, since from the Fragment class, it is where I generate the view and in the example of the above site loads these from the Adapter. Or could I pass everything from my Fragment clsae to my adapter ??
Does anyone know what I need to do? Thanks