I am writing a PhoneGap app on Android. I am trying to stay pure HTML+CSS+JS, without calling specific PhoneGap APIs. So the app is somewhat an embedded web page, more or less.
The page has some "buttons" on it, which are actually table cells with some CSS attributes (among which cursor: pointer) and an onClick function.
I have noticed that when I touch a button, it "flashes" for a second or so, then its corresponding action is performed. By the way, I don't like this very much, since it causes a delay in the UI.
Some of the "buttons" activate a menu. I handle the menu by making visible a semi-opaque black div that covers the whole screen, and above it a centered div containing a table containing the menu items. (the black div and the centered div are hidden, normally).
The problem is that when I touch a menu item, it does not flash; one of the underlying buttons flashes instead (that is, one of those that at the moment are covered by the semi-opaque black div, and are supposed to be inactive). Nevertheless, the correct action is performed, in other words the onClick function of the menu item gets called, not the one of the flashing button .
So my question is two-fold:
1) Is there a simple way to make the right item flash (I mean the menu item instead of the underlying, semi-covered button)?
2) Is there a simple way to totally disable button flashing, so that the UI would speed-up and problem 1 be solved too?
Many thanks
You should be using the touch events, which are supported on Android WebKit. This will prevent the select + touch behaviour that you're seeing on your HTML elements that the onClick event causes.
Android versions past Android 1.5 support touch events such as touchstart and touchend. I recommend using them, and reading Apple's documentation (yes, I know it's weird, but Google's Web App documentation is still poor with respect to touchevents.)
Related
I am not the best at android programming so please correct any errors I make.
According to this developer.android.com.
Android view is:
This class represents the basic building block for user interface
components. A View occupies a rectangular area on the screen and is
responsible for drawing and event handling. View is the base class for
widgets, which are used to create interactive UI components (buttons,
text fields, etc.).
However, I have not found an article about how to get a full view. I mean as in an entire screen as a view. The image I used below is to show what I want to include in that view. I want to include everything on screen. Everything On that Screen. (I can't repeat enough). It includes the chat heads, background, and menu bar. Everything that is on screen.
I can't figure out how to get a view like that from a service or from an activity. Any help is appreciated. I don't have exact code because I don't know how to do this.
Edit:
I know that I am very bad at explaining, so if you are confused, I am going to explain what I want to do with my view.
So basically, I want to make a screen tapper that taps for you so you can king of "cheat" games like cookie clicker. Therefore I need a view that contains the entire screen so then I can fake "touches" on the screen.
Hope this cleared any confusion
So you have a few things to deal with. Generally, the menu bar (and possibly soft-key buttons on the bottom) will remain visible. However, you can hide the menu bar:
hide the top menu bar in my android device & Tablet
You may want gestures to allow users to see it. Or, since it appears you are building a game, you just leave it hidden until they hit "home" or "back" or "exit" or whatever.
The "chat heads" are a horrible idea, but some developers think they are awesome. You can see more about that here:
Creating a system overlay window (always on top)
You might find something like this will work (but if new notifications pop-up, it may not help):
http://goobbe.com/questions/1390940/how-to-close-cancel-dismiss-a-system-dialog-programmatically-android
I have done live user testing for a list in my app, and have come to an interesting puzzle.
A list, specifically a single-column table in iOS, may often have a swipe right gesture for more actions, like the twitter app and mail app, and a million other apps. But when important functionality is embedded in the UI beyond that action, and a user cannot figure it out, the only thing that comes to mind to alleviate that is something like the accessory button, ie. a right-pointing triangle or chevron button.
There is probably another way but it's not coming to me. Maybe making the rows taller than normal?
This was meant as a comment but was rejected as too-long.
So after thinking more about this, the ideal solution is a visual clue, rather than painfully obvious text saying "swipe a row for more options". Perhaps when a list (UITableView, etc) is shown and rows (UITableViewCell, etc) are created and added, then as they appear an animation begins of the main visible content sliding into place in the OPPOSITE direction of the desired swipe animation, with a minimal visual indicator afterward, reminding the user that the content is moveable!
Sound good? Optionally, immediately before the animation begins, any underlying content may be shown for a split second (if its supposed to appear underneath). Sweet!
I have an Android app using PhoneGap 1.6 and Sencha Touch 1.1.1. One view has a text input field which behaves oddly in Android: it duplicates itself and it is very difficult to remove focus.
I have determined that it is a WebTextView coming up over top of the "real" input field. The problem I am having with this is that blurring the text field with screen taps is extremely difficult, and if you scroll the parent container, the WebTextView does not scroll with it, so you can see both at the same time.
The only way to remove focus on the element is to tap furiously all over parts of the screen, much like triggering the frustration detector from Mavis Beacon.
My actual question is: how can I turn off this functionality completely, or at least work around it? It is not reasonable to expect the user to do anything other than single-tap outside of the box, or press the Back button on the device to stop input in the text field. As it is, pressing Back simply stows the soft keyboard and does not give up focus.
These are browser bugs, triggered by some CSS-flags.
To explain the bug:
The device creates some kind of "screenshot" from the web-sites content. All transformations and transitions are made on top of the "screenshots" from the actual page.
If you have input elements, there will be some kind of proxy elements rendered on top of the "screenshot". Sometimes the are these proxy-elements at the wrong position.
This happens, if you trigger the website to be hardware-accelerted. You have to drop some CSS-definitions:
transform(), translate(), transform3d(), translate3d().
The Bad news are:
You cannot solve this problem, because it a bug within the browser.
I have some different android devices, all have different problems, one fix will break another device.
I think the bug will never be solved, because noone cares about the embedded browser since android 4.1 and the chrome.
If you can disble hardware accelertion, this may help.
The good news are:
There are rumors about an embeddable chrome-webview.
I started to write some blogposts about "the new IE":
http://christian-kuetbach.de/blog/post/14
I noticed that when I swipe my finger from left to right across a home screen widget, in simulator on a AVD, Android switch to the left home screen.
I was wondering if its possible to prevent this behavior and allow home screen gadgets to listen and react to finger gestures (like swipe)? Its very critical for my widget UI design.
Sorry I am posting this reply as a separate answer because it wouldn't fit as a comment. :)
So interaction with widgets is very limited.
The thing is, widgets aren't "mini applications," they are... widgets. They live in the world of, and are dependent upon, the real application containing them.
There is a continual demand for widgets to support more and more complicated interactions, but every time we start down that path it ends up making the interaction with the containing application much more complicated as well, and seems likely to negatively impact overall usability.
For example, if widgets can process swipes, then the user is now very uncertain about how they can swipe between screens because they will get different behavior depending where they swipe. They could even get stuck in a state where it is nearly impossible to swipe between screens because of the widgets covering the touchable area.
So the way I would recommend thinking of widgets is as a window into the key information associated with your app, to jump into more details of that information by tapping on the widget and switching to the app, and possibly some additional buttons to perform key operations.
Also as of 2.0, with the new wallpaper themes, you can make the UI of the activity that the user visits from your widget sit on top of the same wallpaper as home. This makes the switch between it and home feel much more like an interaction inside of home rather than with another application.
Starting with API level 11 (Android 3.0.x) you can use "android.widget.RemoteViewsService.RemoteViewsFactory" and and assign a widget to use (from docs):
ListView: A view that shows items in a vertically scrolling list. For an example, see the Gmail app widget.
GridView: A view that shows items in two-dimensional scrolling grid. For an example, see the Bookmarks app widget.
StackView: A stacked card view (kind of like a rolodex), where the user can flick the front card up/down to see the previous/next card, respectively. Examples include the YouTube and Books app widgets.
See http://developer.android.com/guide/topics/appwidgets/index.html section Using App Widgets with Collections.
So yes - if you use one of the above layouts your widget will accept gestures.
One more is:
AdapterViewFlipper: An adapter-backed simple ViewAnimator that animates between two or more views. Only one child is shown at a time.
Doc: https://developer.android.com/reference/android/widget/AdapterViewFlipper
Example: https://github.com/sunphiz/adapterviewflipper-widget
Is there something for the Android OS with which you can implement scroll pagination?
*Edit
With scroll pagination I mean pagination like on the homescreen, you can swipe right and left and go to the next or previous page.
You can take example on the source code of Launcher at android.git.kernel.org. Look for the classes called Workspace and CellLayout.
According to Apple, UIPageControl does not implement "scroll pagination", at least how I would interpret that phrase. UIPageControl tracks a number of pages, shows dots based on the page count/current page, and fires events when the user taps it. It does not actually implement "pagination" (you have to handle that yourself) and has nothing to do with scrolling.
All that being said, there is no "show a bunch of dots" widget built into Android with the same or similar API to UIPageControl. Creating one for your application would be fairly simple, using a set of ImageViews, watching for taps, replacing image resources to change dot colors, and firing events to registered listeners.