I'm working on an app in which I would like to implement swipe-to-dismiss functionality in the ListView - similar to what we see in Android 4.0's notification bar, recent apps list or browser tabs. I want to run the app on the devices running Android 2.2+. See the following image. I also want to change the transparency of the item being swiped-away - just like in ICS.
I checked the source of the ICS web browser on http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android-apps/4.0.1_r1/com/android/browser/TabScrollView.java?av=f but couldn't figure out which class is particularly responsible for implementing this functionality.
Can anyone point me in the right direction here? Can we do this using Android Compatibility Library? Please let me know. Many thanks.
I've thought about implementing such a feature as well, but I haven't done it yet. So the only thing I can provide are some ideas on how I would approach that problem. If I've eventually written some code I will post it here.
The main class needed is a custom Adapter which extends a ListAdapter (ArrayAdapter, SimpleCursorAdapter etc.).
The adapter applies a View.OnTouchListener to all of its Views.
Whenever that listener detects a horizontal scroll dx, it calls concernedView.offsetLeftAndRight(dx) (which will make the view draggable). Of course the adapter has to save the current horizontal offset for the view. If the user was dragging a view and removes his/her finger from the screen, the touchListener will detect this as well and start a slide back animation. Using the current offset we can also calculate an alpha value, so the view will fade out when it approaches the screen borders.
If one list entry is eventually dismissed by the user, it becomes a bit tricky, and I'm still not sure how I would implement the following action: The list content has to be updated (or the adapter has to ignore the dismissed entries) and the views that were below the one that was dismissed must hover upwards in order to fill the gap. I think it might work to let the ListView load the new content, but that would fill the gap instantly. In order to avoid that, I would then start an animation that lets all the concerned views hover from their old position (where we still had the gap) back to their current position (where the gap is filled).
These are just some of my thoughts on the issue that might help some people getting started on working on the problem. Like I said, I'm probably going to implement that sometime in the future and of course I will post the code here.
I would appreciate any feedback in the comments, but I don't want to thorougly explain every single aspect of my idea, that would take me too much time ;)
I know this is quite an old question, but for anyone still searching for this, you can have a look at Roman Nurik's library here: https://github.com/romannurik/Android-SwipeToDismiss
This shows how to create the required behavior for list-view as well as for normal views.
Related
Use case:
Enable the Google TalkBack accessibility service and navigate to an
app (e.g. Google Messenger)
In this app, assuming that you'll be presented with a list of items
to select, arbitrarily navigate to one of them using Talkback gestures (swipe right or just click once on one of them)
Rotate the screen
Expected behaviour:
The previously highlighted item should still be highlighted; the user
should be able to continue it's navigation
The Google Messenger app is a perfect example of this correct
behaviour
Messenger After rotation
My Sunshine app behaviour:
The previously highlighted item is not highlighted after Screen
Rotation
The user has to navigate again to the previously selected item
Depending on the screen, finding and having an item selected again can be a pain... not what we want to induce to our user
Sunshine After rotation
How should we implement this?
I'm thinking, as a solution, at Accessibility Events and intercepting them... but this doesn't seem to be right, doesn't seem to be "best practice" (e.g. creating a Custom View and implement the methods handling these Events)
! Note that the green highlighted list item doesn't seem to be focused (getCurrentFocused() returns null)
! Note that the list items become focused if we use D-Pad navigation, instead of TalkBack navigation (but this is another discussion...)
L.E:
I've spend a whole day on this, trying to "get the focus" of the
highlighted item, but the item is NOT focused. This is why I assume
that this feature must be tackled in some other way and I would like
to know your (!) experienced opinion before I spend another 2 days
re-creating all the used Android components (as I assume it could be done - this doesn't sound very "best practice", doesn't it ?)
This is NOT a homework, there's nothing wrong with my current code
(so, there's no code to post, unless one would like my whole project)
and, given that this is my first post, I could not attach more than 2
pictures (this is why the "before" screens are missing)
Just give me a good hint, based on experience, and I will implement it and post the finished, working code here.
It should work out of the box if you implement stable IDs in your RecyclerView.Adapter (and potentially disable the ItemAnimator on the RecyclerView (rv.setItemAnimator(null)) which you can do conditionally if TalkBack is enabled).
Here's a blog post I wrote about the item animator bug.
I ran into the same problem while working on the same project.
Hint: listView.setItemChecked(int position, boolean value);
Good luck :)
What is the easiest way to implement a screen slide in Nativescript like shown in Android Viewpager , but in a vertical direction ? Another example of this functionality would be the rss reader feedly where you can change rss feeds by swiping up/down.
The page should allow vertical scrolling to the top/bottom and then transition after a certain treshold.
I already encountered nativescript-slides, which can only do horizontally sliding.
So is there a "nativescript" way or do i have to implement it as native android/ios feature (for example by this) ? In either case a sample on how to integrate it in nativescript would be great.
Update
Recorded an example:
taken from this Repo with Android native code. The outstanding PR made changes to offer vertical scrolling in the list. But the repo seems to be outdated and a bit buggy.
I can provide more info later but there's a new plugin implementing the native controls for android and iOS for slides/carousel her https://github.com/alexrainman/nativescript-carousel-view and vertical swiping is on his radar, I think he might even be close to completing that.
To give an answer for anybody interested in above nested scrolling animation:
For Android I had to implement the native ReyclerView in Nativescript in favor of the NS buildin ListView. It is an optimized view structure which among other things allows nested (vertical) scrolling and can be used as replacement for an ordinary list.
Together with https://github.com/alexrainman/nativescript-carousel-view works like a charm!
Anyone that ends up here still looking for ways to achieve this.
I spent a lot of time trying to figure out a way to achieve this and tried to find ready plugins for this. Also tried to use the plugin from Alexrainman but eventually gave up since the plugin was not up to date with the current nativescript-version.
My solution:
I used radListView as a basis for this implementation and leveraged the methods and events on the radListView.
By using scrolled-event I gathered data for the use of the scrolling feature: scroll Speed and scroll direction. (These might be also taken from the event data, but since I did not find the event details from the Nativescript-documentation I gave up trying to guess where to find this data on the event-model).
Then I also saved the fixed height of one item on my list (The height I fixed to screenHeight-200).
With all this info, I managed to hook the event "ScrollDragEnded" and add logic that makes my list behave like a vertical slider. Moving on the list by method "scrollToIndex" and figuring out which index to scroll and when by leveraging all the data mentioned above.
This is the way I managed to make a pretty good vertical slide.
Good luck!
Background
There are some nice apps out there that show some layout on top , while the user is making a call or answering one (like "current caller id").
I need to create an app with the ability to show something on top , during a call, and allow it to be interactive.
The problem
Using broadcastReceiver ,foreground service and SYSTEM_ALERT permission, I've succeeded showing something on the screen during calls.
As long as the content being shown is static, I have no problems.
However, I've noticed that when I try to make the content being shown to be interactive , I face some problems:
Everything is jumpy and this includes not only animations, but also setting visibility to visible/gone. I hate to think how it would work like when I need to make things draggable.
Not sure if this is the reason, but using the SlidingDrawer make the entire width belong to the SlidingDrawer and you cannot click through it. This means that if its location is at the bottom, you can't touch the "answer" button when someone calls you.
The question
What is the reason for those problems?
How can I fix them and be able to show things right?
How do other apps handle it right ?
EDIT: about the SlidingDrawer , it seems that it has terrible bugs about its location and size, and the content area, even when it's not shown to the user and the user can see through, it cannot be touched through. Still, I don't know why, and how to fix it, and I also don't know why things are so jumpy compared to normal apps (probably because of over-drawing, but it's really really slow).
Maybe this question should be more general: how to make a floating window like on AirCalc, that can be moved easily yet still be quite fast.
For the dragging functionality, I've tried to get the layoutParams of the root view (which is of type WindowManager.LayoutParams ) that I show, update it and set it again, but for some reason it didn't do anything. Wonder what I'm doing wrong.
EDIT: it seems that i should be using windowManager.updateViewLayout for updating the layoutParams. Using this post , I've made it perfectly draggable.
Ok, I've come up to some conclusions about this, first to answer my original questions:
it's probably because of overdraw and the views i've used. I wanted to try out libraries that could replace the slidingDrawer , but each had a different problem. using simple views proved that the idea in general works.
in the case of visibility changes, it was jumpy because the size of the view wasn't able to fit using the current WindowManager.LayoutParams size.
slidingDrawaer does have issues since it uses the whole size it get when closed or opened.
now to the rest of the issues :
unable to drag ? instead of the regular setLayoutParams , use windowManager.updateViewLayout .
unable to touch outside of the view ? set its minimal size according to your needs. you can also set the window flags so that touch event would go through .
want to listen to calls events ? you can use the broadcastReceiver for triggering the showing of the app, but I suspect that hanging the call might cause the intent be received later sometimes. I think you can use telephonyManager and listen to events there, using the service you run in the foreground (that i've created just to make sure the app won't close in the middle).
if anyone else has questions, i can help.
I'd like to make a view in my Android app that flips between multiple views on a swipe/fling. I'd like it to behave more or less like the Android Launcher behaves when flipping between views. In particular,
It should flip views on swipe.
Generally a swipe will flip between one view and the next. It should not fling across all of the views.
If you swipe slowly, you should see the views dragging as you're swiping, eg. the way the Launcher does it.
I tried using a ViewFlipper with a GestureOverlayView as per Romain Guy's blog post here, but there's no indicator to the user as they're swiping. This makes discoverability difficult, which is presumably why Launcher does it the way they do.
I tried using a Gallery object, but when I swipe from left to right, there's a certain amount of momentum that flings the users through all the views rather than just taking them to the next view.
Is there a good way to accomplish what I'm trying to do?
I know this is an old question but ViewPager is created for this exact same purpose. ViewPager is part of android compatibility package and more can be found at http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html
Take a look at HorizontalPager. It's actually based on RealViewSwitcher, which in turn is based on the Android homescreen's code, and supports snap-to paging with drag feedback, as well as nested vertically-scrolling subviews. Gesture support for fast swipes isn't all it should be, but this may get you part of the way there (and I'd welcome contributions back).
EDIT: As of 2012 you're much better off using Google's ViewPager - it's in the compat library.
Check out SwipeView within this project https://github.com/fry15/uk.co.jasonfry.android.tools It does exactly what you want it to do and is super simple to implement.
#CommonsGuy extended ViewFlipper to do it.
https://github.com/commonsguy/cwac-viewswiper
Ihaven't used this one yet so im not sure if it moves with your finger like the launcher if not your going to have to make an OnTochListener to do it for you in me.ACTION_MOVE you will update the view to change its position. I'll post some sample code when I get home if you don't get another answer.
I have a need to create a circular dial/rotary style component for use in an application. It's essentially a circular menu that allows users to select from the items that are ringed around it, and then they can click the button in the center to activate the selected item. However, I've never created a custom UIView of this type, and don't really know where to begin. Can anyone give me any pointers as to how I would draw the view and then rotate it as the user drags their finger? I obviously know how to intercept touch events, etc. but I'm not sure how to actually go about manipulating the UI appropriately. Any tips or pointers would be great!
I don't know if you've already found a solution to this, but here is a nice overview of how to get started:
http://shahabhameed.blogspot.com/2011/05/custom-views-in-android.html
For you, I think you can extend an existing View, that View being the SeekBar. You can take the standard SeekBar and draw it in a circle.
Finally, here is a source code that does the rotation with a volume knob. It is its own project though, so you have to do some work to use it in your own app.
http://mindtherobot.com/blog/534/android-ui-making-an-analog-rotary-knob/
Good Luck!
I have a neat library to do this. It is extremely stable and well maintained. https://bitbucket.org/warwick/hgdialrepo
Heres a youtube demo: https://youtu.be/h_7VxrZ2W-g
This library comes with a demo app with source code and the demo app actually uses a dial as a menu, So I think this should be the perfect solution for you.