I want to make popup dialog like in facebook app with pointing marker to the selection area.
here is an example how it should look like.
http://imageshack.us/photo/my-images/9/facebookandroid.png/
please help if you know something about it.
Thanks in advance..
May be your question would get solved from this
https://github.com/lorensiuswlt/NewQuickAction
There are multiple strategies that can solve this problem, but each solution has to deal with the placement of the triangle/pointer at the top of the dialog since it has to be positioned to indicate the user's selection.
I think the easiest way to solve this problem is:
Start an activity that has a transparent theme. So, apply something like android:theme="#android:style/Theme.Translucent.NoTitleBar" to the Activity in the manifest. If you want a Title Bar, do some searching for the right android-style.
Pass an extra to the activity that represents the navigation element chosen by the user. this will be used by the activity to position the triangle pointer.
Handle this extra in the activity's onCreate() method by drawing the triangle/pointer in code. This means you will want to call setContentView(...) in onCreate(), then get a reference to the ViewGroup (i.e. RelativeLayout, AbsoluteLayout, etc.). Once you have that you can call ViewGroup#addView(View child, int index) to add the ImageView that represents the triangle. You probably want to use index = 0.
Ensure that whatever View(s) you add programatically is/are not covered (i.e. hidden) by elements in the XML.
Adding the triangle is relatively easy, but positioning can get tricky. First of all, the screenshot you posted assumes a fixed-width device, and that's just not true for an Android app in the market that needs to work on 1000s of screen sizes. The Y-coordinate of the triangle/pointer is not a problem, since the height of the top-nav is probably hardcoded. It's the X-coordinate that can get tricky. What if the top-nav elements stretch? Let's assume we have a robust/decent way to get the X-position where the center of the triangle/pointer should be. Given that, I'd try using a vertical LinearLayout in my Activity and use an ImageView with a left-margin for the triangle/pointer. That's just a guess and you'll probably have to tinker with this to get the right View elements and positioning strategy for your specific implementation.
Related
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.
I'm working on implementing a UI for an Android application, and I wanted to ask if there is already something in the native widgets to accomplish most of what I'm trying to do.
The application that I'm working on performs 15 different tasks that can be divided into 3 different groups. (5 tasks per group) I have 18 icon images (3 for the groups and 15 for the individual tasks) and I want to be able to panel these icons (starting with the groups) like this:
I want the next icon visible below and above (if further down than the first icon) and swipe to go to the next icon
Once an icon is clicked, the panels slide to the side, exposing the next layer (the specific 5 tasks for the selected group) with the selected group still visible on the side:
From there, the user can tell at a glance what group they are in, what the current, next and previous selectable tasks are, and that by swiping right, they can get back to the group selection.
What types of widgets would I need to look into in order to accomplish something like this? Are there already pre-built lists to do these activities?
Thanks for any guidance!
You can get close with a LinearLayout of ImageView widgets and a ScrollView (vertical) or HorizontalScrollView. However, it will not give you the desired "centered image with bits of the previous/next images" effect -- it will be wherever the user positions it.
You can get close with a Gallery. However, it will not give you the vertical orientation, and it will always give you a fixed set of full options to the sides, not the partial images that you seek.
If it's gotta be the way you describe it, you'll have to roll it yourself. Gestures and animations should give you the desired effect.
Have you taken a look at ViewFlipper? http://developer.android.com/reference/android/widget/ViewFlipper.html This will give the side by side effect but you will have to make custom views for each group to populate it with the proper icons.
I'd use a ListActivity for the first 3 top level items. This won't give you the auto centering effect that you'll probably want, but you should be able to look at the Gallery source code, which can be found here, and make some modifications to the ListActivity so that it autocenters.
For the next items, I'd add an onClick and a GestureListener so you can navigate to another activity with another list view. Since you know where you came from (add some data to your Intent) you can set the color rectangle on the left so that it appears that you have just swiped the whole view left.
If you need to customize the animation, you can call this:
overridePendingTransition(R.anim.slide_left_entry, R.anim.slide_left_exit);
To make the yellow icon look good as it animates to the left, I'd change the list bounds (on the first activity) to have no margins, and change the yellow icon to have square right edges - This will make the small yellow rectangle on the next activity appear to be part of the first activity.
It should be relatively easy to mock this up to see if it's going to work properly for you.
Good luck!
EDIT: Ok, so I've made a basic project that does most of what you want.
here is the link to the eclipse project file. I was going to put the source up here, but there's a bit much to display.
What you still have to do:
Tweak animation
Configure the layer lists to display the correct colors
Add information to the top level intent for the sub-activity to be able to configure itself.
Quite a few other small things.
I think I've got the main stuff done. I've also added the gesture listener I talked about, although re-reading your question, you actually didn't ask for that. Since it's cool, I left it in.
Good Luck once again!!
Have you thought of launching Activities with different view configurations? You can switch from one activity to another with a gesture and you can Animate the views. What your UI looks like to me is a bunch of screens with affordances that show the other screens. So one Activity per screen maybe the same in different configurations or something like that.
First off, I'm a beginner. If this is way beyond the scope of a beginner's first application, just tell me.
The best way to explain what I want is as an example: In Robo Defense, when you kill something, a little $10 pops up, animate translates/fades up about 5% of the screen and disappears. (almost like a toast, appears on top of canvas)
I'm looking for something similar to that same effect. As a like, top-layer drawable that ignores the underlying defined XML layout. I can handle the animation part of the code, but I'm curious as to how to create and inflate that view without wreaking chaos on my current layout. If it would be easier as a drawable instead of text, thats really not a big problem for my project. It is simply imformative, no interactivity at all, it will just be a quick little 500ms artifact to show that an action has occurred.
I could use a pointer in the right direction, or some similar code examples please.
I think you would create the TextView within your Java code, and then use an animation to make it rise and fade, once the animation has finished, destroy the TextView.
I've never done this before, but I think that should work!
To anyone else who is wondering, I ended up accomplishing this via wrapping my entire layout in RelativeLayout, making the appropriate changes necessary, then creating a TextView programmatically with layout_above, and then calling an Animation on it.
I am currently working on an Android app, I have completed all the 'hard stuff', such as getting my database working, and so on. Now I need to make the UI look decent.
I would like to make something that has a 'frame' layout that is clickable. You would click on a 'frame' to find out more information, a bit like the Amazon app.
If anyone has any ideas, tutorials or good links, I would be very grateful.
Thanks in advance.
Take a look at Gallery. It's built in to Android and does what I think you're looking for (at least, it describes the Amazon app's UI; since FrameLayout has a very explicit meaning in Android that is not at all what you're talking about, I ignored that part).
EDIT: A screenshot would have been helpful but I think you're actually talking about a simple list-like view.
Oh. That's either a ListView, or more likely just a vertical LinearLayout inside a ScrollView. I can tell you what I'd do: Each item in the LinearLayout would have a background set, with a width of match_parent and a height of wrap_content, using a 9patch with the right-pointing arrow inside it. I'd also define an identical but blue-highlighted version of the image for the pressed state and use a state drawable XML to let it know which to use. Then I'd just bind an onClick listener for each item I wanted to fire off a click action on.
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.