Instagram like scroll in custom gallery

Question

Can anyone please suggest how to implement the following in my droid app? I've created a custom gallery, and when an image is selected, I show a preview of the image exactly like instagram. Now when I scoll up, I need some 20% of the image view to stick to the top like this:

I'm right now using, Observablegrid view, which is of not that much use!

Please suggest any ideas. Thanks!

Answer 1

Here is my answer using the same Observablegridview, which got to work after some analysis and modifications while scrolling the grid.

For the grid of image to be displayed, use this ObservableGridView.java

Here is the xml layout

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/mainFrame">

    <com.sampleapp.Observablescroll.ObservableGridView
        android:id="@+id/camera_gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:numColumns="4" />

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/gallery_lay"
            android:layout_width="wrap_content"
            android:layout_height="365dp"
            android:background="@color/black"
            android:orientation="vertical">

            <com.fenchtose.nocropper.CropperImageView
                android:id="@+id/gallery_click_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentTop="true"
                android:scaleType="centerCrop"
                app:grid_color="@color/action_bar_color" /> 

        </RelativeLayout>

        <View
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="300dp" />

    </RelativeLayout>
</FrameLayout>

In your java class, implement ObservableScrollViewCallbacks

        mHeaderView = (RelativeLayout) rootview.findViewById(R.id.header);
        mToolbarView = rootview.findViewById(R.id.toolbar);
        camera_gridView = (ObservableGridView) rootview.findViewById(R.id.camera_gridView);


        LayoutInflater inflaters = LayoutInflater.from(getActivity());
        camera_gridView.addHeaderView(inflaters.inflate(R.layout.image_holder_view, camera_gridView, false)); 
// view that leaves 300dp space to display the selected image from the grid 
      camera_gridView.addHeaderView(inflaters.inflate(R.layout.sticky_tool_bar_view, camera_gridView, false)); 
// a sticky view with action bar's height, so that the grid doesn't scroll above this

        camera_gridView.setScrollViewCallbacks(this);


//overridden methods

   @Override
    public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
        if (dragging) {
            int toolbarHeight = mToolbarView.getHeight();
            //    int toolbarHeight = 300;
            if (camera_gridView.getCurrentScrollY() == 0) {
                showToolbar();

        }
        if (firstScroll) {

            float currentHeaderTranslationY = ViewHelper.getTranslationY(mHeaderView);
            if (-toolbarHeight < currentHeaderTranslationY) {
                mBaseTranslationY = scrollY;
            }
        }
        float headerTranslationY = ScrollUtils.getFloat(-(scrollY - mBaseTranslationY), -toolbarHeight, 0);
        ViewPropertyAnimator.animate(mHeaderView).cancel();
        ViewHelper.setTranslationY(mHeaderView, headerTranslationY);
    }
}

@Override
public void onDownMotionEvent() {

}

@Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
    mBaseTranslationY = 0;

    if (scrollState == ScrollState.DOWN) {
        int toolbarHeight = mToolbarView.getHeight();
        if (camera_gridView.getCurrentScrollY() == 0) {
            showToolbar();

        }
        int scrollY = camera_gridView.getCurrentScrollY();
        if (toolbarHeight <= scrollY) {
            hideToolbar();

        } else {
            showToolbar();
        }

    } else if (scrollState == ScrollState.UP) {
        int toolbarHeight = mToolbarView.getHeight();
        int scrollY = camera_gridView.getCurrentScrollY();
        if (toolbarHeight <= scrollY) {
            System.out.println("++++upif" + scrollY);
            hideToolbar();
        } else {
            System.out.println("++++upelse" + scrollY);
            showToolbar();
        }
        if (camera_gridView.getCurrentScrollY() == 0) {
            showToolbar();
        }
    } else {
        if (!toolbarIsShown() && !toolbarIsHidden()) {
            showToolbar();
        }
    }
}

//method to show the toolbar
    private void showToolbar() {
        float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
        if (headerTranslationY != 0) {
            ViewPropertyAnimator.animate(mHeaderView).cancel();
            ViewPropertyAnimator.animate(mHeaderView).translationY(0).setDuration(200).start();
        }
    }

//method to hide the toolbar
    private void hideToolbar() {
        float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
        int toolbarHeight = mToolbarView.getHeight();
        if (headerTranslationY != -toolbarHeight) {
            ViewPropertyAnimator.animate(mHeaderView).cancel();
            ViewPropertyAnimator.animate(mHeaderView).translationY(-toolbarHeight).setDuration(200).start();
        }
    }

   private boolean toolbarIsShown() {
        return ViewHelper.getTranslationY(mHeaderView) == 0;
    }
private boolean toolbarIsHidden() {
    return ViewHelper.getTranslationY(mHeaderView) == -mToolbarView.getHeight();
}