ksoichiro / android-observablescrollview Goto Github PK

Under certain conditions the flex space ends up stuck in a partially scrolled state along with content in a weird position. Here is one of those conditions:

When there is enough content to scroll on landscape but not in portrait and the content was not scrolled to the top of the page when rotating to the portrait orientation, the flex space gets stuck in a partially resized state and the content ends up shifted down from the bottom of the flex space. My expectation, in this scenario, would be that the flex space should resize back to be fully expanded.

This can be demonstrated using FlexibleSpaceToolbarScrollviewActivity in the v1.4.0 sample application and adjusting the lorem ipsum text to. Below is an attached screen capture of the what is happening.

Could you please publish its sample app to Google Play? Or, a downloadable APK is also welcome :)

I have been trying to port the FlexibleSpaceWithImageListViewActivity to use RecyclerView. It worked so far really well, there is only one last problem: The Image is invisible and the Toolbar appears just as normal (including colour and such) until I scroll for the first time. After the first scroll, everything works as expected. Basically, I replaced ObservableListView with ObservableRecyclerView and added the paddingView as the header in the RecyclerView.

I tried calling onScrollChanged(0, true, true); and similar at the end of onCreate. If I do that, the Image shows up as expected, but the toolbar is not transparent, but grey, and the positioning of the TextView is all wrong.

Then I noticed a main difference in the example and my code: I don't use a static ArrayList in my app, but use the Loader pattern introduced in v11 to load my content. So I added onScrollChanged(0, false, false); whenever I change the content of the RecyclerView adapter, like so:

    @Override
    public Loader<List<Pack>> onCreateLoader(int id, Bundle args) {
        return new PackListLoader(this);
    }

    @Override
    public void onLoadFinished(Loader<List<Pack>> loader, final List<Pack> data) {
        adapter.setPackList(data);
        onScrollChanged(0, false, false);
    }

    @Override
    public void onLoaderReset(Loader<List<Pack>> loader) {
        adapter.setPackList(null);
        onScrollChanged(0, false, false);
    }

Now it shows up properly on startup. The loading is fast enough in this case to not notice a scrolling problem, but I'm sure this is not the most elegant way to solve this.

The last problem I have is that the RecyclerView is scrolled down when I resume to the activity, but the onScrollChanged has the fixed value of 0.

Some feedback?

Hi,

EDIT : Now it's not working for Fragments

Thank you very much for this excellent library, your library has helped a lot.
I found that you added new component named which has Flexible space + image + fading action bar + floating action button, this is like a complete package for me.
Except that I need a ListView instead of a ScrollView.

Can you help me adding a ListView instead of ScrollView ?
P.S : My ListView is already a ObservableListView

Thanks in advance.

Hello.

Lib version: 1.4.0

I'm experiencing strange behavior of onUpOrCancelMotionEvent method in ObservableListView.
From time to time, ScrollState passed to method is wrong. Different than actual swipe.
This problem exists only on 5.0.2, on 4.4.4 is working fine.

Hi i was checking out your library where there is ViewPagerTabScrollViewActivity. There is a logic to moveout(hide) toolbar once user scrolls(same as in play store app). In place of toolbar i am having searchview and textview in linear layout followed by SlidingTabLayout.

I want to hide textview on firstscroll and searchview on further scroll. And views should appear back when scrolling visa versa. I checked the code where there is a method
public void onScrollChanged(int scrollY, boolean firstScroll,boolean dragging).
What changes i need to do for this requirement.
Plz help

When i import this project on eclipse i get multiple errors in manifest.xml in here and other errors in .java files here float height = (float) animation.getAnimatedValue(); cannot cast from object to float. any help will be appreciated

Hi, firstly thanks for the great library:)

When I try implementing some samples, I found some strange things, and I also reproduced with the official demo, you can see it from the screenshot:

You can see that the toolbar only show part of it or doesn't show at all when listview or recyclerview has reached its top. These things didn't happen every time, but when you try scrolling it near the top again and again, it will happen sometime.

I did some simple investigation, maybe problems are from codes below:

    private void adjustToolbar(ScrollState scrollState, View view) {
        int toolbarHeight = mToolbarView.getHeight();
        final Scrollable scrollView = (Scrollable) view.findViewById(R.id.scroll);
        if (scrollView == null) {
            return;
        }
        if (scrollState == ScrollState.UP) {
            if (toolbarHeight < scrollView.getCurrentScrollY()) {
                hideToolbar();
            } else if (scrollView.getCurrentScrollY() < toolbarHeight) {
                showToolbar();
            }
        } else if (scrollState == ScrollState.DOWN) {
            // scrollView.getCurrentScrollY() sometimes returns smaller than toolbarHeight 
            // when your finger left the screen but toolbar is not totally shown, 
            // maybe we should remove this condition statement and always show toolbar?
            if (toolbarHeight < scrollView.getCurrentScrollY()) {
                showToolbar();
            }
        }
    }

Hi ksoichiro,

I found a problem that onScrollChanged() event does not work properly under certain condition. If child views handles onTouchEvent() (e.g. children are using setOnClickListener() ), onTouchEvent() won't occurs at Obserbable*View anymore.

I think onInterceptTouchEvent() should be used for the current purpose.

Thanks

I am having quite a difficult time bringing back my tool bar after switching to a fragment with the observableScrollView. Is there any way you can so an example of how to accomplish this. Also, the back arrow on my observablescrollview opens my navigation menu instead of popping the stack.

Hi,
Thank you for this library. I'm using it since many days, previously with Action Bar but now I have switched to Toolbar but when scrolling the ListView causes some weird scrolling feel. Like it's moving to adjust things.
I checked your samples but it had either Action Bar with Observable Scroll View or Toolbar with Sticky.

I hope you get what I am saying. In short I just mean to have a smooth hiding of toolbar when scrolling though the list.

Thank you.

Hi,

Thanks you very much for this excellent library & more than that for so sexy samples. They are mind blowing.
I'm using Flexible Space Image View with ListView & it works perfectly fine without any issues.

But I my app has a Sliding Up Panel which on Expanded changes the items of Action Bar but using Toolbar in causes not showing Action Bar, the sliding panel goes above it. I don't where exactly I should report.

But if Toolbar is removed then it will work perfect. I hope it can be removed & instead Action Bar can be used.
Thanks

Hi!

All samples seem to cause the "requestLayout() improperly called by ImageView[...]" error in the logs. I'm using a GridView with items that include an ImageView in the layout. No matter what I try, I can't seem to shake the error.

It happens when the Toolbar shows and hides. Any ideas what's happening?

I am using this demo but i need one modification in "ViewPagerTabScrollViewActivity" activity they are using single activity with same content but i want different fragments for each tab with different view.

Hi!
I have an idea to improve the slidingUp.
When you slide the panel must appears on the top an image with parallax effect, in this way on the finish of slide we have a FlexibleSpaceWithImage, and if you continue the scroll the image disappears like your example! What do you think?

When I open the first time my activity with a recyclerview with an image the floating action button it's noto visible. It's appears only when i scroll. Can you help me? Thanks

This is because if others will try to put smaller content (or if the screen is large enough), the bottom area will look weird, as shown here:
http://www.curious-creature.com/2010/08/15/scrollviews-handy-trick/comment-page-1/

Hi!

Is it possible to mimic Google I/O 14 app scroll effect as shown in this gif? (the right one)
http://4.bp.blogspot.com/-9jn0pCtadO8/U9_E1mlg8CI/AAAAAAAAAt4/yr9CCSThkpg/s640/change_1.gif

That effect is related to this post http://android-developers.blogspot.com.es/2014/08/material-design-in-2014-google-io-app.html and I've been looking through the code to find out how to implement it but I've found it too complicated for me right now.

Do you know a way of mixing your examples to achieve this effect?

Thank you for you help!

Hello.

ViewPager with different fragment can like the effect?
https://github.com/kmshack/Android-ParallaxHeaderViewPager

the above project,when the data is litter,its experience is not well.

and may be the link can help you understand my opinion
http://nerds.airbnb.com/host-experience-android/

getting this exception!

Class not found when unmarshalling: android.support.v7.widget.RecyclerView$SavedState
java.lang.ClassNotFoundException: android.support.v7.widget.RecyclerView$SavedState
at java.lang.Class.classForName(Native Method)
at java.lang.Class.forName(Class.java:251)
at java.lang.Class.forName(Class.java:216)
at android.os.Parcel.readParcelableCreator(Parcel.java:2133)
at android.os.Parcel.readParcelable(Parcel.java:2097)
at android.view.AbsSavedState.(AbsSavedState.java:57)
at android.view.View$BaseSavedState.(View.java:18704)
at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState.(ObservableRecyclerView.java:265)
at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState.(ObservableRecyclerView.java:252)
at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState$1.createFromParcel(ObservableRecyclerView.java:304)
at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState$1.createFromParcel(ObservableRecyclerView.java:301)

Example of output:
01-16 10:53:26.967 scrollPosition: 181
01-16 10:53:26.981 scrollPosition: 156
01-16 10:53:26.998 scrollPosition: 128
01-16 10:53:27.015 scrollPosition: 101
01-16 10:53:27.032 scrollPosition: 75
01-16 10:53:27.048 scrollPosition: 46
01-16 10:53:27.065 scrollPosition: 17
01-16 10:53:27.216 scrollPosition: 0

All callback between position are < 20ms, but last on scrollY position 0 is delayed by more than 140ms which causes laggy effect on end of scroll. I checked your examples and same thing occurs on onScrollChanged callback where scrollY = 0.
FlexiableSpaceListView example

Hi,
I am using your library with the Parallax Scrollbar & Toolbar. Thank you very much for your work!

I have only one question: I want to have my Toolbar in a certain transparency value so that my white Toolbar icons are also good visible, if there is a white image behind. How can I do this?

Thanks for your help!

Can't get click events clicking on any item of RecyclerView. If I add a button then I get click event for that, but setting onClickListener on the whole view doesn't end up getting click as the touch event is fetched by the TouchInterceptor & onClick method is not called.

I want to scroll listview to the bottom when Activity launched, but scrollY incorrect.

public class MainActivity extends ActionBarActivity implements ObservableScrollViewCallbacks {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<String> items = new ArrayList<String>();
        for (int i = 1; i <= 100; i++) {
            items.add("Item " + i);
        }
        final ObservableListView listView = (ObservableListView) findViewById(R.id.listview);
        listView.setScrollViewCallbacks(this);
        final ArrayAdapter<String> adapter =
                new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);
        listView.setAdapter(adapter);
        ViewTreeObserver vto = listView.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    listView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    listView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                int count = adapter.getCount() - 1;
                listView.setSelection(count == 0 ? 1 : count > 0 ? count : 0);
            }
        });
    }

    @Override public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
        Log.e("MainActivity", "onScrollChanged scrollY = " + scrollY);
    }

    @Override public void onDownMotionEvent() {

    }

    @Override public void onUpOrCancelMotionEvent(ScrollState scrollState) {

    }
}

Hi,
I'm using the FlexibleSpaceWithScrollView and I'm attempting to use the translucent status bar from android 5.0 with it. This however puts the toolbar and title text behind the status bar. Fixing the toolbar was easy enough, but I can't figure out how to properly get the title text to be lower as well.

Any tips?
Thanks for this great library.

When I used Viewpager , it works for ObservableListView,RecyclerView etc

but when the phone sleeps automatically then it crashes due to the cause of -
CacheFragmentStatePagerAdapter.saveState
android.support.v4.app.FragmentManagerImpl.putFragment .

I've tested your example "ViewPagerTabFragmentActivity" even it also crashes when viewpager is at recyclerview fragment page .
App doesn't crash at any other ObservableView rather than RecyclerView.

I tried to describe more so that it would be easy for you to solve the problem .

Thanks for your excellent library.

Hi @ksoichiro

This library is going excellent & I got an idea that you should put "Apps that use this library" on the Main page of your library.

Let me know your views & if you feel do it then here is my app link :
http://www.youtube.com/watch?v=DVwHCGAr_OE&feature=youtu.be

Also, Can you update the Sample on Play Store with new things you added onto Github ?

Great work on this! Would be really nice if you could make some samples with a ViewPager+Tabs :)
would look really cool and most implementations are pretty bad so far! :)

Hi, I really like your library, but I'm having some problems with implementing it.
I'm missing the getScreenHeight() method inside class ViewPagerTabFragmentParentFragment.java
I'm using Eclipse (and yes i know i have to import alot of other libraries, but I have already got an example of you working).

Hope you can help me

Thanks

Hello.
I have two views. One is ImageView and the other is ObservableListView. Both wrapper in group view:

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/refresh"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="org.antczak.whereIsMyPackage.activity.DetailsActivity">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/infos"
            android:src="@drawable/bamboo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"/>

        <com.github.ksoichiro.android.observablescrollview.ObservableListView
            android:id="@+id/scroll"
            android:layout_below="@id/infos"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"/>

    </RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>

What I want to achieve is to gradually hide image during list scrolling. Using ViewHelper.setTranslationY I'm able to slide up image, but it's container is still there.
I want the list to fill space which image released.
Now it looks like one screenshot
How to reduce image container height during scroll?

Hi!
I had try to add the new version on my project and gradle return this:

I change the version with 1.3.2 without errors..

I've noticed they have a really interesting UI :

• it has 3 layers :
  1. the search bar
  2. a recent phone
  3. tabs&viewpager of the contacts
• when scrolling down/up, first layer that gets hidden/shown is #2 , and then #1 .
• the scrollbar is a part of the bottom area (only the contacts), while on this library, it's a part of the whole container ( including the toolbar, for example).
• they have a fast scroll being enabled (meaning they probably use ListView), and because the scrolling is inside the listView itself, the fast-scroll will also be inside too.

Is it possible to mimic those things using the library?

The Play Store, which presumably uses similar code with RecyclerViews, does not have this issue. I am experiencing this issue with my own app as well as the demo.

To reproduce, slide to the left or right on the first or last fragments.

I'm using ObservableRecyclerView and it works fine on Android <5. But when I run the same code on Lollipop, I get an exception. The RecyclerView has elements, a click on them starts another activity. When I return from that one, the app crashes with the following exception:

Caused by: android.os.BadParcelableException: ClassNotFoundException when unmarshalling: android.support.v7.widget.RecyclerView$SavedState
            at android.os.Parcel.readParcelableCreator(Parcel.java:2289)
            at android.os.Parcel.readParcelable(Parcel.java:2239)
            at android.view.AbsSavedState.<init>(AbsSavedState.java:57)
            at android.view.View$BaseSavedState.<init>(View.java:20038)
            at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState.<init>(ObservableRecyclerView.java:265)
            at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState.<init>(ObservableRecyclerView.java:252)
            at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState$1.createFromParcel(ObservableRecyclerView.java:304)
            at com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView$SavedState$1.createFromParcel(ObservableRecyclerView.java:301)
            at android.os.Parcel.readParcelable(Parcel.java:2246)
            at android.os.Parcel.readValue(Parcel.java:2146)
            at android.os.Parcel.readSparseArrayInternal(Parcel.java:2540)
            at android.os.Parcel.readSparseArray(Parcel.java:1868)
            at android.os.Parcel.readValue(Parcel.java:2203)
            at android.os.Parcel.readArrayMapInternal(Parcel.java:2479)
            at android.os.BaseBundle.unparcel(BaseBundle.java:221)
            at android.os.Bundle.getSparseParcelableArray(Bundle.java:871)
            at com.android.internal.policy.impl.PhoneWindow.restoreHierarchyState(PhoneWindow.java:1979)
            at android.app.Activity.onRestoreInstanceState(Activity.java:1022)
            at android.app.Activity.performRestoreInstanceState(Activity.java:977)
            at android.app.Instrumentation.callActivityOnRestoreInstanceState(Instrumentation.java:1161)
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2271)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360)
            at android.app.ActivityThread.access$800(ActivityThread.java:144)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:135)
            at android.app.ActivityThread.main(ActivityThread.java:5221)
            at java.lang.reflect.Method.invoke(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:372)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)

It looks like on Lollipop, the android.support.v7.widget.RecyclerView is not used by the app since it has the native one available. But the ObservableRecyclerView references that one, leading to the crash.

How can we achieve multiple sticky section in listview using this, Where each section has a background image?

Android Studio 1.0 RC 4

Hi! I have a new request :-)
I see this effect https://github.com/flavienlaurent/NotBoringActionBar
and this implementation like telegram:
http://stackoverflow.com/questions/27070079/expand-collapse-lollipop-toolbar-animation-telegram-app
what do you think? I prefear telegram effect for reduce with the image the title and subtitle on scroll.
Thanks in advance

Hello. I realised in this activity when i scroll fast down or app the sticky part with the title make some move and shows the layout that scrolling below, in gill gap with recycler view this is not happening.

And i have a question. Can i do ViewPagerTabActivity with fragment and no with activity? (I mean to extend fragment not activity and hide the supportActionbar thats the parent activity has)? I tried it and replace some staffs like setSupportActionBar because i had the actionbar from the activity but when i scroll up it doesnt hide. Thank you in advance

Hi @ksoichiro

Sorry it's me again.
I have a problem with view pager with sliding tab layout example.

The problem with current example is

• sometimes when you try scroll or slide a lot, you can see the blank padding / first item.
• the vertical scroll indicator become strange because there is one item hidden below the tab.
• when there is swiperefreshlayout, the refresh indicator became partially visible (hidden below the tab)

I tried to use another approach without using dummy padding item for hours but luckily i didn't get the good result :(

I found an app example, it's not material spec but it has the similar flow of design, and i think they did correctly. Here is the link.
https://play.google.com/store/apps/details?id=jp.gocro.smartnews.android

Notice in the app when we scroll the listview/recycler down, the scrollbar doesn't showup but the tabs and the content moves up then after the tab reach the top, then we can scroll the listview/recyclerview.

Any ideas how to accomplish this?
Help is very appreciated.

Thank you

How to make opened image and fab in "FlexibleSpaceWithImageScrollView" like in "FlexibleSpaceWithImageListView" when started it fragment?

P.S. sorry for my English.

Hi i am trying to use ObservableScrollView in a fragment and for that my layout is as follows
<com.github.ksoichiro.android.observablescrollview.ObservableScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/cardList"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

</com.github.ksoichiro.android.observablescrollview.ObservableScrollView>

but the problem is this scroll view widget is hiding my RecyclerView widget.
I even tried to make ObservableScrollView widget transparent but still not working.

Thanks

Thanks for this amazing library Soichiro, I'm curious to implement ToolbarControlListViewActivity in Listview hosted in Fragment with ViewPager setup, I've almost achieved it, but when the toolbar goes off, there is a white space created below the list like you can see in here http://i.imgur.com/RNvJUfY.png If you require i can provide you the code i used to do the setup. Help would be highly appreciated

Hi!
I'm using the observable recyclerview, and the image header becomes part of my list.
I want make this not clickable. You have any suggestion?
Thanks in advance

I pretty much entirely copied the code from FlexibleSpaceWithImageListViewActivity and while I got it working, I noticed something fishy...

I recorded the issue, see here: https://giant.gfycat.com/BoldOddAsiaticgreaterfreshwaterclam.webm

the trouble I had to go through to get that on the internet was way more than necessary, had to record, convert to gif using ffmpeg, then upload, since as a webm it's too large for gfycat...I don't even know.

Only thing I changed is the listview layout in the adapter (because the text was white in the default one...)

Ignore the arrow being in the way of Details. I'll get on that. :P

Hi,

I'd like to ask if it's possible to implement the next style using this library, as shown on Google's guidelines (called "Flexible space with image") :
http://1.bp.blogspot.com/-Vv4SxVSI2DY/VEqQxAf3PWI/AAAAAAAAA7c/mfq7XBrIGgo/s400/activity_transitions%2B%281%29.gif
http://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling

If it is possible, can you please put a sample, or explain what to do?

Hi,
thank you for all your beautiful examples.

There is a bug that is annoying, in some listview examples when the user is on the topp of the list and is trying to scroll up(swiping down) then the item the user first touch is clicked or if the user scrolls up (swiping down) and holds then the onItemLongClick will be call for the fitrst touched item. So it is too easy to click on item when the user only swipes down at the top of the list.
The problem can be found at ToolbarControlListviewActivity

I hope I'm being clear about the problem :)

And another bug i found is when you scroll up and down fast then the toolbar/sticky toolbar gets stuck and you are able to see and click at the padding views at the top of the list.

so both problems can be found at the same example, ToolbarControlListviewActivity with sticky view.

Hi @ksoichiro

Thank you for such an excellent library & make our lives better.

Well I was thinking can't we do like this in ViewPager :

1. Let us consider we have a viewpager with 3 pages which contains ListView or ScrollView
2. Each ListView or ScrollView has their own ScrollViewCallback implemented which contains the code for showing & hiding the action bar

I tried using the above method & I was able to hide & show action bar a.k.a Toolbar on scolling but the problem was occuring of white space at the bottom of view.
Can this problem be solved ? I know you have a perfect way shown in demo but can we do it this way?

Let me know your views about this. Thank you

I am using ParallaxScrollViewActivity. The Tool-bar is in white colour at the start but after scrolling it has been changing correctly. It doesn't gives me parallax Effect in Fragments!
Is this a bug or i'm doing it wrongly ?

Home Button in ToolBar not Work when Toolbar is Sticky.

when the toolbar is sticky when you click on the home botton does not work, after make scrolling and bottom of the toolbar is transparent working again put the home button from the toolbar.

regards.