Android Sliding Transition - android

I apologize if the question is of the newbie level but I just started learning android to create mobile magazine apps for my company and what I would like to achieve is an effect similar to the native iPhone's / iPad's scroller in the home page (one where the apps that are currently installed are displayed).
Page transitions will be made in accordance with the user's gestures. Thank you for the help!

I think
'Page transitions will be made in accordance with the user's gestures'
means not ViewFlipper's behavior.
I recommend to use ViewPager, which is available in android-support-v4 library.
search for android-support-v4 library and documents.
I'm open for any regarding questions.

This can be achieved with ViewFlipper and gesture Detection.
View Flipper will help you flip between multiple views and gesture will help you to swipe between views to achieve it. Here are few links which will get you started.
How to make an Android view that flips between views on swipe/fling
http://www.mediafire.com/?fg32sn1345xn5dl
http://android-journey.blogspot.com/2009/12/android-viewflipper-and-slidingdrawer.html

Related

General android layout questions

I should begin by saying that I'm brand new to android development, although I have a good understanding of the fundamentals of java. That being said, I usually learn best by doing, so I'm writing an app for a campus magazine I work for and trying to learn through the process of making it.
At the top of the screen is a bar with two spinners labeled "issues" and "sections," which allow the user to filter the articles shown to only those in the respective issue / section. The rest of the screen is taken up by what I will describe as a vertically-oriented gallery, which shows the headline for each story underneath an image associated with it. The user can then "flip" through the stories in the magazine by scrolling through the "gallery." Selecting one of the stories will open the full story up in ViewPager.
I have two main questions at this point:
1) Initially, I planned to place the "issues" and "sections" spinners in the ActionBar. However, as I understand it, ActionBars are not displayed to users using Android 2.x. Given that these elements are critical to navigating the app, and that a majority of android users are still using 2.x, this seems unacceptable. As a result, I'm using an ActionBar-less theme and essentially drawing my own action bar via a linear layout on top of my main activity. Am I correct in my understanding that ActionBars do not display on Android 2.x devices? If so, am I correct in including my "tool bar" as a part of the main activity, or is there a better way to implement it? (Perhaps as a fragment? I don't really understand how those fit in yet...).
2) I am aware that the gallery widget is deprecated, so obviously I'm not going to use it. What alternative widgets would best achieve the same visual goal of having the user "flip" through the stories in the magazine by scrolling through the widget? Is there a way to animate a ListView to achieve this goal?
Again, any help - particularly which helps me to understand the wider issues involved here - will be greatly appreciated.
Thanks in advance.
You can use ActionBarSherlock - it is compatible down to Android v 1.6.
ViewPager might help you

Google Plus Android App UI Design - ListView swipe up into view

Could someone please explain how Google implemented the "detail" page of their Google + app? The detail page features an image at the top (which can be tapped) and a ListView that is positioned roughly 50% down the screen.
Like so:
Example
When you swipe up the ListView moves up to fill the entire screen:
Example
After this, additional swipes control the listView up/down:
Example
I've done my research but very little is available to suggest how they implemented this.
Thanks
The short answer is that they're using various tricks for enabling the sliding menus. Tons of resources have been authored by folks in the Android community, most notably:
The video on the subject here:
https://plus.google.com/115177579026138386092/posts/FjnASs9no1a
The sample that was authored to accompany the video:
https://github.com/jfeinstein10/SlidingMenu
And finally, a demo app that exists in the play store.
The easiest way to get the demo is to search for SlidingMenu Demos in the Play store. The specific controls of interest in the Demo are the "ViewPager" example and the "Slide" example.
When you look at the library, you'll notice that it pretty much rewrites significant pieces of the existing controls from View on up as well as custom transformations for a canvas element used in the view.
The sample that Jeremy authored, which really is an alternative library to existing ListView and Page controls, supports a large spectrum of Android devices as well as a number of UI controls that are slightly different variations of the examples you gave and that use varying transitions.

Titanium Mobile: Slide to switch between the views

I am developing a mobile app using Titanium. I came across the Google Plus, Tweetdeck, Market Apps for Android. To switch between the tabs they use the slide gesture. Its like the next view simply slides in based on your swipe/drag. I would also like to add the same kind to behavior for my app I would like to have it work on both Android and iOS platforms. How can I have it?
I have tried Ti.UI.scrollableView. The problems I faced were
The sliding was not as responsive as seen in the above apps.
The view does not move along with the finger drag. It moves after the finger drag is finished.
It seems to take more memory as the application response slows drastically and animations dont appear to be smooth.
Kindly let me know if there is any other alternative to implement this kind of experience in the app.
Thanks!!
What you basically need is a Ti.UI.ScrollableView which implements the native Android ViewPager. Those other Apps are binding their Tabs to the ViewPager. You can't do this with a Ti.UI.TabGroup but you can either use your own Tab views or some other module that provides this functionality like this. You could also have a look at my Alloy widget here - it provides a custom tab-indicator for Ti.UI.ScrollableView (without another module).
For Android you should consider using a third-party library to implement such functionality.
Personally I use PagerSlidingTabStrip which I have found that works really well.

Implementing horizontal/vertical finger swipe scrolling in android honeycomb webview/webkit?

I am planning to implement Honeycomb tablet application based on WebView (so, basically it'll be a HTML5 web based application made only for tablet).
I am looking to implement horizontal and vertical scrolling by swiping finger. For better understanding I created sample outline.
This image shows something similar to Honeycomb's native setting activity with left and right page vertically scrollable
Any kind of guides or resources are welcome. Thanks
Take a look at iScroll:
iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.
While latest Android revisions are supporting this functionality (although support is not optimal), Apple seems reluctant to add one finger scrolling to divs...
Here is what I have found so far:
It depends on how you want to implement scrolling. If you want to attached swiping event, thats the easiest way to implement using well known libraries:
jqTouch - It has swipe left and right event which can be hooked to scroll left or right (it seems all the webkit based animations work only on iOS devices). Please note that project is still in beta and not highly active. EDIT: this is also part of Sencha Labs - who actively maintains Sencha Touch.
Sencha Touch - They have better support for almost everything in mobile and tablet. (Note: It's free for opensource apps but not for commercial apps - EDIT: they actually have commercial license. see their site for more info on licensing)
jQueryMobile - They are very stable (in RC1 as of now), and has swipe left and right event, but I could not find swipe up or down. If you just need swipe left right, tap, tap hold, then go with jQM. They have the best community support.
RAW JS - Finally, if you want something raw javascript, visit HTML5Rocks article to have better in-depth idea about how touch event works.
I hope it helps. I'm still struggling to implement scroll up down, since I don't want to wait for swipe to end, instead I am trying to implement instant scroll feedback, getting very close using RAW JS coordinates, but not satisfactory.
Hammer JS has been useful for me:
http://eightmedia.github.io/hammer.js/
From the creators of iScroll, SwipeView seems a nice dedicated alternative. Have a look at demo 1 and demo 2.
I have not tested yet, but I will surely. Since demos behave well on my iPad.
You might find this library quite useful: https://github.com/cubiq/2-way-iScroll
It handles the case of vertical scroll and horizontal swipe.

What's the android design pattern for multiple pages?

I'm working on an android app that has a section that feels like an iPhone home screen. There's a bunch of pages that are essentially displaying the same data in different configurations and users should be able to quickly move between them. Generally there won't be more than 4 or 5 pages.
I could just replicate the experience with the iPhone home screen with multiple dots on the bottom of the page, but that doesn't feel very android-friendly. What's the design pattern in android for viewing and interacting with this type of view? I know the android home screen has a variant with dots, but I've never seen it used within an app.
Screenshots or links to existing apps would be great.
The stock Android launcher has left/right paging behavior on the home screen, and it's open source.
This is the Workspace class. Pay special attention to the onTouchEvent and onInterceptTouchEvent methods. The utility classes Scroller and VelocityTracker are used together to define the behavior for snapping to a page when the user lets go from a drag.
https://android.googlesource.com/platform/packages/apps/Launcher2/+/master/src/com/android/launcher2/Workspace.java
Hootsuite uses this design pattern and it works well in my opinion. I don't think it affects the user experience on Android in a negative way. I find that the biggest problem with people porting iPhone applications to Android is the fact that they try to port every single design pattern over. I don't think what you're trying to implement will be an issue.

Categories

Resources