How to create a overlay with help bubbles on Android? - android

I recall seeing some android apps having a help overlay that greys the screen a bit and provides textbubbles with helpfull information pointing to various UI objects.
I thought this to be easy, just create a FrameLayoutwith 2 layers, 1 content, 1 helpoverlay.
However, it appears that you can't use a RelativeLayout with items that are based upon another RelativeLayout?
How would I go to position these bubbles? Manually?

Use a PopupWindow. a sample implementation can be found here : http://sree.cc/google/android/android-popup-window
You can use the popupWindow.showAsDropdown(View anchor) method to attach the popup to any view or manually set the x and y co-ordinates of the popup to be shown.
[EDIT]:
you may also want to have a look here : http://code.google.com/p/simple-quickactions/

Related

Show graphical element/view when tapping on android

Like the image. I am trying to make something like this. When i click my sidemenu that consists of textviews that represents numbers. I want to be able to show what number the user are holding his finger on. So in this case. I was holding my finger over the number 14 and 14:00 is showing on the left side of it.
So does anyone have a good approach for me to deal with this issue.
It seems you want to use a fastscroll like feature. Try to take a look at the example code here. Then you have to customize it to your needs.
Or you can also try a different approach using a PopupMenu on the list element click.
A third approach could be using a PopupWindow, and showing it using showAsDropDown() method, passing the anchor view (in your case the list element clicked)

Android Application Architecture

I am currently designing a Sudoku application for my own personal development, this is the first proper application I will be making. I can program in Java quite effectively with good object orientated understanding.
I want to create the application with 1 view as shown below:
As you can see I would like a single view with a grid object, the grid object will have it's own paint method.
How would I go about making this object zoomable?
How would I handle interaction with this object?
I also have 2 buttons on the bottom left and right,
How would I anchor these so they won't zoom?
Could I float these over the object and have the object as the entire view?
What pop up menu should I use? I would like a small menu with difficulty selection a restart button or a new puzzle button, also an exit button.
Thanks for reading this far, if you do have any advice for me at all then please post, If you require more information about anything then please ask!
You may find this Android Developers tutorial useful in achieving your zooming aims - https://developer.android.com/training/animation/zoom.html. It refers to an ImageView but with some changes I believe it could work similarly with your subclass of GridView.
You wouldn't have to worry about the buttons as long as the zoom was applied only to the GridView. However, you may wish to consider using an Action Bar instead of your current buttons for the menu and hint button.

Circular / rotary dial view in android

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.

Small Popup for Instructions, like foursquare ones

After seeing the last screenshots of new foursquare application and their balloon like cartoon instructions, I'd like to create some of these in my application.
I found a similar question for iPhone
Small popup for instructions... How?
Here is another screenshot of foursquare app:
I'd like to know how I could achieve that with Android.
Thanks in advance for any help.
UPDATE: This is what I could get so far but adding some buttons with a custom drawn background and layering them with a FrameLayout:
But I still couldn't get the triangle effect. Maybe there is something I can do with my custom background shape?
UPDATE2
After checking your suggestions, I decided to go with Aaron C idea and added an image with an arrow on it. This is my current result:
Thank you Snailer, QuickAction API project seems very much promissing. I'll check it out when implementing more features in my app.
Now, I just need to get the right color or maybe I could just let it this way. It seems nice too.
And, so, to summarize what I did:
Got my initial xml layout inside a FrameView.
As I'm using a frameview, everything I put in here will be piled one over the other. That's how I could add things to the layout.
In that framelayout, I put 2 relativelayouts whith an image with the triangle and a button to create the two upper popups. In the bottom I put a button only.
That's it. I hope it helps somebody.
Thank you very much again for all your help!
That sounds like a neat thing to implement. There might be a built-in Android variation on AlertDialog that achieves this, but if not here is how I would go about implementing it:
Create a new Activity whose background is black with a very high (low?) alpha color value. This will allow you to see through it to the previous Activity in the stack. Then, add your alert at whatever coordinates you like using a relative layout with padding values.
You might also want to add a touch listener that exits the Activity if the user touches the balloon (or maybe anywhere in the screen).
If you want to be fancy with coordinate placement of the balloon, you can pass this information into the new Activity using the Activity's launch Intent with the putExtra() methods.
It's probably achieved through skinning a toast.
The developer documentation shows a skinned toast in "Creating a custom toast view" at http://developer.android.com/guide/topics/ui/notifiers/toasts.html
You may want to look at the QuickAction API. It acheives this by using PopupWindow, skinned, positioned, and animated.

When to use Android PopupWindow vs Dialog

I'm unclear about when to use PopupWindow vs Dialog. Any insight would be much appreciated. Thanks.
They both use the addView() method along with various windowManager methods. The two are similar in that regard.
Dialogs seem to come with more built-in features for interaction, such as handlers and buttons already included in the base class, while PopupWindows come with more built-in methods for positioning them about the screen.
I think that each of them can do exactly the same as the other, but choosing between the two will be a matter of convenience to the programmer with regards to how you want to use the Object. I'm not a phD in computer science, but I do not think there is a significant difference in processing time between the two based on what I saw in their respective class definitions.
My advice: If you want to have greater control over where your View appears on the display, use a PopupWindow. If you want to add more control and feedback between your View then use a Dialog. If you, like me, want master control over everything, I would suggest a PopupWindow since it has fewer user-evident default methods to override.
I think, that you should use Dialog for simple user interaction (YES,NO).
I usually use Dialog for simple user interaction and WindowPopup for a little bit more complex view.
One example of WindowPopup is AutoCompleteTextView.
Hope it helps.
I think Dialog should use when you need to take action before proceed to continue next. It never cover the screen and always adjust center aligned as modal event.
On other side, PopupWindow has flexibility to adjust information anywhere in the screen as position wise like sticky footer, sticky header, on left, right, center etc. as per location set.
For Showing Information it's good option as there is facility to animate also.
In short, For Showing Information with minimal action go with PopupWindow and for controlled action to proceed next go with Dialog.

Categories

Resources