is it possible to programmically force a View inside a ScrollView NOT to scroll?
Like the alphabetic titles in the contacts list. The 'A' bar doesn't scroll when the user scrolls through the list of all contacts whose first names start with 'A'. When the user scrolls till the end of 'A', 'B' bar simply scrolls up from the bottom of ScrollView, finally reaplacing 'A' at the top and staying there.
My description is kind of abstract, hope you understand.
Also thanks in advance.
The contacts list uses the ListView and not the ScrollView. One way I think it can be done is to have a fixed header at the top. You can change its content depending on what is being displayed on the screen.
Attach a OnScrollListener to ListView. You will get the view with the first visible position in onScroll. Then change the content of the header according to the content in the view.
You don't need to add a header in your ListView for the first section in your list as it will be already handled in your ScrollListener. Keep the style for the header rows and the view at the top the same and you will have the illusion for the fixed header.
I think you need a combination of the "static text" approach with "section headers" within the ScrollView: the list should contain disabled/non-clickable items with the letters "A", "B", etc. When a section header scrolls above the top of the view, change the contents of the static TextView above the ScrollView to the contents of the header. I.e., when the "B" header item scrolls out of view, the TextView now contains "B".
Of course, the tough part will be detecting when a "section header" scrolls off the top, or comes into view when scrolling in the opposite direction.
For bonus points, use a "push up" Animation in the TextView when it's contents change to make it look like the list item is rolling into the TextView. (There is an example of this Animation in the API Demos app in the SDK in "...\view\Animation2.java").
UPDATE: after further review... here is some classes, etc. related towards making this work (it was a fun exercise for me!):
android.widget.AbsListView.OnScrollListener interface to see how to detect scrolling events. You'll need to keep track of the previous "top of view" position to determine which direction you are scrolling (to pick the slide-up or -down animation).
The Animation I listed above is not really what you want -- better off to look at the android.widget.TextSwitcher class and the push*.xml files in the SDK/android-X/data/res/anim directory.
You'll certainly need your own adapter subclass to inject section views into the list: getView(...) can set the row view's properties (bkgnd, text style, etc.) differently if the row is a section header or not. Re-use this code in your TextSwitcher view factory to populate the static TextView/Switcher above the list.
Have fun...!
As mentioned earlier you need a ListView. For an effect similar to that in the People app in Android 4+ I have used this excellent library (free and open source).
Related
I want to create a custom listview that scroll horizontally and stacks the last 4 items in the view instead of allowing them to go off screen. The stack should look something like this: . So if a user scrolls all the way to the left they see a regular listview, but as they scroll right, if an item was supposed to go off screen, it is instead stacked behind the last item in the list, with a max of 4 stacks. What's a good basic way to accomplish this? I already found the horizontally scrolling listview library I wanted to use but don't know where to start on the stacking part.
I have a ListView with a HeaderView.
I want one of the views in the HeaderView to stick on top.
I've seen a lot of examples for sticky Section Headers.
I also looked at StickyScrollViewItems but since I'm using a ListView, I cannot use a ScrollView.
Is there a library available for this or should I just override the OnScrollListener of the ListView?
Thanks.
I have just written a load of code that does this that I cant share for contractoral reasons. Basically follow the approach outlined here and apply to a listview rather than a scroll view.
Main points are
Create a wrapper view that contains your floating/sticky header and your listview as siblings
Use a proxy method when adding headers with an isSticky boolean - if is sticky then add a fake blank header to the listview of the same size and your intended header view to the floating header wrapper (use a relative layout here)
Set a scroll listener of the listview that tracks the top px position of the dummy header view in the list and setting this as a top margin of the floating header that sits inside a relative layout
Handle all the annoying edge cases / OEM overscroll crap to get it to work in all situtions (like this for samsung)
Remember to set the initial position of the floating/pinned header after the listview has been layed out.
I feel its a little bit involved and takes some tweaking to get right - this is a time where i envy iOS and any iOS devs will think your slacking as it takes a while to implement :D
All the Open libs out there at time of writing are using scroll views or list view headers. This issue with these approaches are that list views recycle views (so unlike scroll views you cant just keep a ref to the dummy view) and also the current libs seem duplicate the sticky views using adapter getView methods and so on - which is no good for dynamic list view header views as they are not recycled and can only have one parent, so reparenting would be annoying (and in my case has a lot of functionality so I defo dont want to create two views of the same type and shoehorn the current libs to fit my solutions)
I don't know of any library that lets you do this but what I do for a header is to use a RelativeLayout for my xml that will have the ListView. Then create your header view however you want and give it the property
android:layout_alignParentTop="true"
then give your ListView
android:layout_below="#id/idOfHeaderView
This is the easiest way I know of to dock a header view at the top. It has worked for me every time. I hope this helps.
My Problem, is that I don't even know what to search for.
I want a ListView.
This ListView has some Elements with a "sticky" state.
If I scroll down the List on the device, I want that all ListElements with state "sticky", to be sticky ontop of the list (non-scrollable) till there is another one "pushing it away". The rest of the elements are supposed to scroll as normal.
I've seen that kind of List in the Google Market. If you have a big screen you can see that list on the Detailview of any app on the left side or if you have android JB, the same effect is on the google search bar in the google now app.
Image One: You can see the normal ListView on the left side
Image 1 http://www.android-hilfe.de/attachments/android-app-entwicklung/120884d1347256368-suche-stichwort-fuer-suche-nach-spezieller-listview-liste1.png
Image Two: You can see the normal ListView scrolled up a bit
Image 2 http://www.android-hilfe.de/attachments/android-app-entwicklung/120885d1347256368-suche-stichwort-fuer-suche-nach-spezieller-listview-liste2.png:
Image Three: You can see, what I actually want. The View is scrolled up but the "sticky" price does not disappear. Instead of that all other elements, went under the "sticky" one
Image 3 http://www.android-hilfe.de/attachments/android-app-entwicklung/120886d1347256368-suche-stichwort-fuer-suche-nach-spezieller-listview-liste3.png:
How do I do that?
I think that you meant to do some "synchronized scrolling".
There's a great post explaining how they've done in on Google Play:
http://www.pushing-pixels.org/2011/07/18/android-tips-and-tricks-synchronized-scrolling.html
Hope that's what you were looking for..
I believe that is a separate component, not related to ListView in any way.
Just create the header, let it be a RelativeLayout, or LinearLayout, and fill the rest of the area with the ListView set to fill_parent. Then, when you'll scroll the ListView, the "header" will stay sticky (as it is a separate component), and the list will scroll down.
I am building an application on which what i want a contact list like in iPhone like this:
a vertical navigation strip with alphabets on right side.
You can set up a ListView and a custom TextView, both within a FrameLayout or AbsoluteLayout. Your ListView should contain all items as it would, without the alphabet. You can then put the letters A-Z and a # in your TextView, and make sure it's aligned to the right in the layout.
Once your layout is set up, you have to add some code to the TextView. In a Touch or Click event, record the Y value relative to the top, and determine which letter is being hovered over, then you can determine the scroll position for the ListView.
If this seems like too much work, there exist codes out there for this. See this question for details.
I'm trying to add a header view to my list, and hide it all the time unless we scroll to it (like the pull-to-refresh mechanism). The problem is: if the list is not tall enough to fill the screen - the header view is shown on top of the list.
Is there a way to hide it, and make it visible only when we scroll to it? I've been trying a lot of stuff, but I can't figure out a good and simple way to do so.
Thanks
Here's a blog post describing a simple way of hiding and showing the header view.
The idea is to to put the content you wish to hide in a LinearLayout that wraps it, and hiding the content only. That way, the wrapping LinearLayout will collapse when its content is hidden, resulting in a headerView that is technically still present, but 0dip high.
Note: If you would try to hide the content without the enclosing layout, you would be left with unwanted space in the header view.
An example layout with a spinner representing the content:
<LinearLayout
xmlns:a="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Then you can hide the spinner (content) as follows:
spinnerLayout.findViewById(R.id.spinner).setVisibility(View.GONE);
You could look into ListView.setOverscrollHeader() or ListView.setOverscrollFooter(). Is this the behavior you are looking for?
If not, could you post some code showing what you have so far?
EDIT:
Ok so I looked into Overscrolling headers/footers and you're right, I don't think that's what you want at all.
Instead you should probably look into the Pull to Refresh mechanism from the Twitter app that others have tried to emulate. You can look into the answers from this question.
The most promising answer seems to be the custom ListView written by Johan Nilson, the code for which can be found here:
https://github.com/johannilsson/android-pulltorefresh
EDIT #2:
I took a look at the PullToRefresh custom ListView and what you want to do is probably possible, though not necessarily easy. Allow me to explain.
The PullToRefreshListView is essentially just a hack that exploits the optional Header in standard ListViews. The hidden "Pull To Refresh" that you see is really just the header of the ListView. When the list is displayed, this line is executed:
setSelection(1);
This scrolls the list to the first item on the list, effectively hiding the Header. When the List is short enough to be displayed entirely on screen, no scrolling is necessary, hence the "Tap to Refresh" button.
When this "Tap to Refresh" is visible, the pull to refresh mechanism is disabled, but it's easy enough to fix that. The pull to refresh effect is accomplished by increasing the top padding of the header view so that it appears that you are pulling the list down (when really it's more accurate to say that the Header is pushing the rest of the list down).
The amount of padding added is controlled by the applyHeaderPadding() function on line 199 of the source code. In that function there is an if statement on line 220 that only applies the padding when the list is in RELEASE_TO_REFRESH mode:
if (mRefreshState == RELEASE_TO_REFRESH)
{
//Some code that eventually adds padding to the header...
}
If you eliminate this condition or change it to apply padding no matter what mode you are in you can drag to refresh even if the list is short and the header says "Tap to Refresh"
if (true)
{
//Some code that eventually adds padding to the header...
}
However, this doesn't exactly create the effect you're looking for. If the list is short, you can drag it down to refresh, but the "Tap to Refresh" header is still shown. Now the problem is "How can I hide the header until the dragging motion begins?" This is a difficult problem on it's own, with several Stack Overflow questions dedicated to it.
If you want a header, you must add it BEFORE you set the adapter for the ListView, otherwise you get all sorts of errors.
I had some success with this, but I haven't come up with anything stable, because my solution is a kind of nasty hack on top of the already hacked PullToRefreshListView. I set an empty FrameLayout as the header and added the original pull to refresh header to that Frame Layout. Then, as I dragged the list, I edited the height in the LayoutParameters of the Frame Layout to grow and shrink much like the padding had originally. It sort of worked, but would eventually force close, and I haven't figured out why yet.
Anyway, if I get it to work I'll post the code, otherwise someone wiser than I might propose a solution based on the info I just provided.
Here is a solution for the current PullToRefreshListView (updated November 4, 2011):
https://github.com/johannilsson/android-pulltorefresh
based on the Hiding Header Views article:
http://pivotallabs.com/users/joe/blog/articles/1759-android-tidbits-6-22-2011-hiding-header-views
1) Copy pull_to_refresh_header.xml from the library's res/layout to your app's res/layout.
2) Edit your app's pull_to_refresh_header.xml. Wrap topmost RelativeLayout in a LinearLayout and then wrap the LinearLayout in a RelativeLayout again. Why? Topmost layout must be RelativeLayout because that's what's expected in code, second level layout must be LinearLayout because that's the only layout that collapses with View.GONE. Third level layout must be the same as original top-level RelativeLayout (except id) to preserve look.
3) Preserve same id on top RelativeLayout (pull_to_refresh_header), give second level LinearLayout an id of your choosing, give third level RelativeLayout another id (pull_to_refresh_header2 for example).
4) Move all padding from the topmost RelativeLayout to the second RelativeLayout.
5) In your code use findViewById and your LinearLayout id to set visibility to View.GONE. The LinearLayout will collapse, and if you moved all padding values appropriately to the inner RelativeLayout the header should take no space at all.