Flip View like in Contacts Activity (ICS) or Google+ App - android

I am searching for an easy way to implement a view flipping like used in several occasions by google apps.
Behaviour should be like this: OnScroll the view should move to the side and show the content of the next page. If scrolled far enough the view should move smoothly into position (after lifting your finger) and snap into place. If not scrolled far enough and the finger is lifted, the original view should smoothly move to the original view and snap into place.
I search around and didn't figure out a easy way.
So I though about something like this:
Hide the ScrollBars of the horizontal ScrollView.
Set the scrollView position manually according to the position I get from a GestureDetector.
I am pretty sure that this way works. But it seems to complicated to me, because there are to many things that have to be programmed. Like the animation (Smooth acceleration, deceleration, snap), Gesture, calculation of the actual position....
So my Question: Am I on the right way or is there an easier approach? Did I miss something during I searched for a solution? Is this function already implemented by android or does it really have to be done by myself?

Look for this tutorial. Also if you try to search here, on SO, you will find thousands of similar question with lots of different solutions. You can choose one, that will useful for you.

Related

What is the best and most practical way to mimic the "Menu button" behavior / OR / card stack custom view

I need to create a new view that will contain a stack of cards, similar to what the Menu softkey does. After googling and trying things out, I saw that the menu button relies on a com.android.internal.view.menu.IconMenuItemView class, however - i really just need a stack of cards that respond to touches, so i can implement my logic in their onTouch or a custom onTouchListener.
What I really need is this - a displayable stack of cards, so that they're on top of each other, fully displaying only one card and displaying the header of the previous few cards, and potentially the header of the next card.
I have the CardView all setup. I'm kinda having problems properly implementing my CardStackView due to the fact that CardStackView extends ScrollView hit a brickwall due to the fact that ScrollView simply steals all touch events even when i use scroll.requestDisallowInterceptTouchEvent(true). I've also tried CardStackview extends FrameLayout and tried keeping everything in check myself, however i somewhat ran into layouting issues there (all cards were simply "one card" meaning they all positioned themselves on top of the layout, AS WELL as not responding to touch events).
Now, i'm really looking for a solution or hints to how I could mimic the menu button (it actually shows current/recent activities as scrollable cards) as a custom View. I'm down to my almost-last attempt at basing my wrapper view as CardStackView extends ViewGroup and trying that.
Guys (and gals) - please help, i'm running out of options here while i'm not really really working on implementing the view, rather than trying out different bases i could use so i'd have a bit less work to do. I'm down to ViewGroup :/ I would really like it if I don't have to go as low as CardStackView extends View and re-inventing the wheel and doing everything myself.
So, borrowing or copypasting or replicating the "Menu button press" behaviour/look&feel would really help me out, since it really looks like what I'm looking for and my objective. Once i get cards stacked like that, i can fully devote myself to implementing the proper logic and tweaks either in the onTouch() or wherever needed really.
I hope I explained the problem clearly, however if I did not - feel free to ask more via comments and I will respond while trying my luck with the current ViewGroup idea. CardView extends LinearLayout, while for CardStackView (which is a compound control from what i've read online) I've tried extending ScrollView, FrameLayout and am trying with ViewGroup :/
Please men (and women), help a fellow dev out :)
EDIT1:
After receiving the "you need to be more concise" comment, i figured to better explain the situation.
I'm trying to create a custom view that looks and behaves closely like the one you see when you press the menu buttons (when the activities are all stacked in a stack of cards). The cards need to be clickable, and draggable - meaning they need to respond to touch events. The best explanation I had was to compare it with the "menu button" example.
concise problem - what to base the "stack of cards" view on? ViewGroup? Something better? I have no real problem posting the full code here like i did for my "edittext-on-demand" view, but for now i'm just looking for some hints, tips and pointers on how to best tackle the problem. I've wasted two days on it already.
EDIT2: The CardStackView will need to dynamically inflate and add other CardViews (custom view)

Drag views freely in ScrollView android

I have been looking for a solution for this for a while now, What I'm trying to do is an application with drag animation like Tinder, the difference is that I have 3 images at once, one below the other and all of them are in ScrollView. My problem is that when I'm touching to move it up and down the ScrollView takes place, I can move it freely left and right but if I move it up/down even by one pixel I lose it. I've tried to make custom ScrollView that disables the touch of it when I touch the other View's with no luck :(, I thought maybe try and make the views that I want to drag to be at the top of the views with the Z-index and I couldn't find anything about it. I saw some answers like the dispatchTouchEvent and intercepTouch or something like this but I didnt understant how to work with it.
Sorry for my English, Thank you!
Found the answer, I used getParent of the view until I get to the scrollview as parent, and used requestDisallowInterceptTouchEvent(true) that solved it!

What is the best approach to implement horizontal scrolling carousel component?

I'm trying to figure out the best approach to design a horizontal scrollview with only a few buttons that when scroll if end is reached it starts showing the first items again hence carousel behavior.
By carousel behavior I'm not saying 3D circle carousel, I just mean that you can continue scrolling horizontally, forever, and the first item shows up again when the end is reached, for example when scrolling swiping to the left.
Any suggestions would be greatly appreciated.
This is way in the future to be useful to the original poster, but for any others who stumble upon this question, I created a custom view that does exactly what Benjamin wanted:
https://github.com/moldedbits/infinitely-scrolling-carousel
You might try this, http://code.google.com/p/infinite-gallery/
If that doesn't work then I don't understand the question and you might want to try and give a bit more detail as to why it doesn't meet your needs
If by carousel ( a rather subjective term) you mean each item has a different "depth" with the center item the most prominent in so far as the UI there are other projects that have done this too

Right way to do scrollable view of custom buttons?

I've just started playing with Android in the last few days and have begun to put together a simple application. I am struggling to work out whether I'm doing things the "right" way or just making life difficult for myself.
The app displays a series of connected nodes on the screen, similar to a mind-map. I want to be able to tap the nodes in order to edit them. When the map of nodes becomes larger than the screen, I need to be able to scroll on both X and Y axes as needed to see the whole map. Image of current implementation at http://ubergeek.org.uk/images/nodetest.png.
Currently I don't have scrolling working, however I assume that I can do that by making the root view a ScrollView and sticking an AbsoluteLayout inside that (though it's deprecated, I wish to place objects at specific X/Y coordinates).
The nodes themselves are currently each a pair of roundrects (one for the outline and one for the fill) and a drawText and are being drawn in the main activity's onDraw(). In order to make these clickable buttons I believe I need to create a custom view for the button in order to use its onClick() events. I can then create a view object for each of my nodes and add them to the AbsoluteLayout view.
Does this sound like a reasonable way to do it in Android, or is this a horrible abuse of the API? :)
Thanks!
Nope, that sounds about right. You just need to make sure that the view contained by the ScrollView has the right dimensions so the scrollbars will show up right, but I'm sure you got that covered.
It's certainly a bit non-standard, but I'm tempted to say that your approach will work right... I'd even go so far as to say that it's not a hack. Please keep us posted on how it works out, and if anything breaks!
(Btw, the SDK mentions that you should write your own layout instead of using AbsoluteLayout. Personally, I'd say use the AbsoluteLayout.)

ViewFlipper caching issue

The views are not cached in a ViewFlipper. Is there a way wherein we can get an image of the view and show it to user so that he sees the Ui as we see on Home scrren(when we swipe the previous view also moves along and when we lift our finger, only then the next view is shown completely.)
What I want to do is that when the user starts moving his finegr on screen, the view should also move along(create an image of view).
I am not getting to do this, as when we swipe the present view goes and next view comes, we do not get both visible when we r moving our finger on screen.
Please if anyone gets what I am trying to do, do help me.
Thanks,
Farha
It's tricky to get scroll and swipe tracking working on Android, while using ViewAnimator or its subclasses.
They allow you to set in and out animations and start them at a given moment, but they work with discrete, either-this-or-the-other-view animations. They are actually using FrameLayout and after in or out animation is executed, other views' visibility is set to View.GONE to hide them from showing up under/over your current View.
The Launcher and the Gallery application are actually doing the functionality you want, by using a different approach.
They track the user touch input (onTouchEvent()), on MotionEvent.ACTION_MOVE they perform animations manually and on MotionEvent.ACTION_UP snap to the appropriate view, just like in the iPhone.
Unfortunately, this approach is actually more complicated than it looks like.
With the manual handling, you have to ensure that you are taking care of everything related to the touch input. This includes a lot of flag-raising, value-checking, event-delegating, etc.
If you want to get better acquainted with this, take a look at these classes from Gallery3D or Launcher's source code.
One other way to get nice horizontal scrolling is to use HorizontalScrollView.
You have to figure out a way to recycle your views, like you would with a ListView and you have to add the snap-to-view logic, but if you have to take care of a small number of views it could be the easiest approach.
Hope that helps.

Categories

Resources