I see that the latest version of GMail has a slider. Basically, I can slide an entry to reveal what's behind it. I have been needing to do the same thing. I have tried to use onTouch to track displacement, etc. But my approach is very jiggery and the actual scrolling lags quite a bit. Does anyone know how to accomplish what I seek with horizontal scrollView or such? Or better yet, how GMail is doing theirs?
An important aspect of mine is to have some snap action. So if the user has scrolled to greater than X, I am to continue sliding to the left for her, for example, until the front image reaches the left edge.
Or could I use a navigation drawer to accomplish this? I don't think so as yet, but maybe someone has done it. I have been working on this for about a week now, and all my attempts are not quite there.
There are a couple Dev Bytes that discusses how to implement this from scratch (see "DevBytes: Animating ListView Deletion" and "DevBytes: Animating ListView Deletion: Now on Gingerbread!"). Alternatively, you could look at SwipeListView.
Related
I am currently prototyping making a screen with bubbles (circular xml drawables for now) that have a start and end position and animate in a floating bubble fashion.
I am currently using the new Motion Layout provided in the Constraint Layout alpha build and right now it is both proving a pain to adjust the values (eagerly awaiting the timeline animation tool) or never looking correct.
Is anyone aware of a library that has similar functionality or is Motion Layout the best bet?
Whenever i look for bubble stuff it is regarding the ripple effect on buttons etc and so it's proving a little tough to find anything.
I would ideally like to be able to add bubbles dynamically with a start and end point and then start animations independently but just getting the animations looking right is the main goal right now.
As aside question - does anyone know the official/expected release date for Constraint Layout 2?
Appreciate any pointers.
I am using LibGdx to develop a game. For Now I am not using scene2D. I am struck up in increasing the levels of the game as I do not have the scrolling screen.
I like to design a a scrolling screen as it is in many games which are level based (for ref, lets say Candy crush). Could you please point me a example on how to have such a scrolling screen to show a bigger area where I can show many levels.
Thanks is Advance !
Using the Scene2D function is not necessary for this and is more for GUI implementation and different screens. The Scroll pane really shines when creating reading content that does not fit your phone. I do advice to start learning Scene2D to create MenuScreens and UI though.
What Candy Crush "simply" does is having multiple backgrounds that are placed next to each other and tile seamlessly. They use buttons in the correct place for levels. By dragging a finger across the screen the camera will move in that direction. For the movement from one level to the next there is probably something like a spline in play.
It is important only to draw the background tiles and buttons that are actually visible on the screen if you have many. Since these have fixed positions and you know your camera area and position you can calculate what to draw and what not. Just drawing everything each frame is likely to slow down your fps.
You can do a search on:
Tilemaps, for you backgrounds but you probably want them in just one direction so a simple 1D array would suffice.
Dragging, to move your camera. Here I gave a basic explanations on how I do it.
Splines, are a bit tougher and you do not really need them. They could be used to animate or move something along a curve.
Thats all, expecting you know how to create something like a button (click a sprite).
I don't know how to explain this.
But take Android desktop as an example.
When you move your finger, you move the whole desktop, until a point that you're on the next desktop. So as you can see, if you move the screen, for about 51% to the right, when you leave your finger off the screen, it will go to the right screen, and if you just moved the screen 40ish percent, it will be back on the same screen.
How is this pattern called?
Some sort of "predicting" users movements.
Maybe you are talking about the Location Within pattern:
Problem:
You must describe the location within a series of screens which
contain alternate views, or which continue the display of a set of
content.
Solution:
When several screens of similar or continuous information are
presented with an organic access method, an indicator is usually
required so the user understands their position within the system.
Other sources might call such a thing "carousel" or "slideshow".
Updated answer:
After reading more carefully, "Location Within" might only reference the page position indicators that show which screen is currently in view. Perhaps just the Slideshow or Film Strip patterns describe more exactly what you mean.
As FoamyGuy pointed out in a comment, ViewPager is the way to implement "slideshows" in Android.
Additionally, ViewPagerIndicator provides flexible options to display the page position indicators ("Location Within" pattern)
This is an open question about Android ListViews, Gestures and Animations.
I'm really not familiar with the gestures in Android, so I'm just looking for ideas and grey matter on this.
Here's two screenshot and a video examples of the effect on what I'm trying to cogitate. Consider taking a look at the video, it's really worth it.
The screenshots are from an iOS open source project found here.
The question is, how would you implement a "listview opening" gesture like the one I see more and more often in iPhone/iPad apps, but for Android ?
Edit 1, idea 1:
Okay first idea, AFAIK the Pinch gesture is somehow like a dragging gesture, so I guess we can get the X and Y coordinates of the two fingers on the screen?
Next, the answer to this question may help, the basic idea is:
Get the index position of the first visible item in the list
Get the index position of the last visible item in the list
Iterate from the first index to the last with the getChildAt function
For each child, call the getLocationOnScreen method to get coordinates of the current iterated item
After that, some comparison between the pinch gesture coordinates and each item coordinates might be done inside the loop to get the two items between which the new row must me inserted.
Performances considerations appart I think it could work, but maybe there's a simpler way to get those two items(?).
Who's next? :)
Update:
Thanks for the tip #rhlnair, I take this occasion to tell everybody that I started to work on this on my spare time and you are more then welcome to help on this.
The project is at https://github.com/arnaudbos/Android-GestureListView. I started two different implementations on two different branches, and would enjoy anybody to create a new branch.
I have something really encouraging in branch "attemp-via-scale-gesture-detector" but some side effects from the ListView.
Come on folks!
seems to be a challenging idea..
i think some of the effect in clear app like dragging a selected row up/down can be taken from
https://github.com/commonsguy/cwac-touchlist
When doing a pinch gesture you have two fingers on the screen and therefore a point in the middle of those two points. That is simple euclidean arithmetic to find that middle point.
Then find as you say the element in the list that this point is above. You mention performance and I do not think this will be a problem. You are iteration a loop a few times and asking for coordinates. I have done much worse on touch events.
If the point between the pinch is above the middle of the list item you create the item above, and vice versa below.
See the section at the bottom where they use a scale listener:
http://android-developers.blogspot.com/2010/06/making-sense-of-multitouch.html
Using the scale listener you can use the scale to find out if you create a new element. If the scale is above (you are "zooming" out) a threshold you create a new element and let the view repopulate from the list adapter.
I am working on an application that can read pdf documents and I am trying to implement zooming and panning on a pdf page.
The page is loaded as a bitmap and displayed in an ImageView. There are also some other functionalities already implemented such as navigating the pages in a document with a bottom custom navigation bar that can be scrolled.
Also, the bottom bar appears when the user taps on the page and disappears with the next tap and when flinging, users should be able to navigate to next/previous page in the document.
All functionality such as the scroll, tap and fling is handled by implementing OnGestureListener in the reader activity and I am trying to do the zoom and pan with an OnTouchListener implementation that is set on the ImageView containing the page.
The code seems to work, however it appears that some of the other events, especially the scroll, are interfering with it which makes it slow.
My question is if there is a better way to go about reconciling everything, since the OnGestureListener is used for the GestureDetector's handling of onFling, onTapUp and onScroll, but I can't find a good way to add the zoom/pan code in one of the methods supported by this.
So, if anyone has some experience on handling all these events for one view or some good suggestions/tutorials on this, I would very much appreciate it.
I'm not sure what you mean by 'some other events such as the scroll make it slow', could you elaborate?
You should be able to perform zoom and pan using onTouch fairly trivially, without scrolling being an issue if you choose to use Canvas. Full implementation code can be found at Touch and drag image in android for scrolling, and http://www.zdnet.com/blog/burnette/how-to-use-multi-touch-in-android-2-part-6-implementing-the-pinch-zoom-gesture/1847 for zooming.
It's generally not common to see advanced interactive features applied solely on an ImageView, but that doesn't mean people haven't done it (see How can I get zoom functionality for images? for zoom examples including support for multi-touch or Adding Fling Gesture to an image view - Android ).
Regardless of which way you do it, you'll probably want a GestureDetector in your onTouch function. You should be able to just cut and splice together sections of the tutorials I've linked to in order to get full gesture support + zoom/pan. However, if I were doing it, I would probably just use onTouch with Canvas (since Canvas will give better performance) and use the core MotionEvents such as DOWN MOVE UP for greater control, or if I was feeling lazy, use a GestureDetector for trickier bits like flinging.