Create blue "tutorial" dialogs as in Android 4.4 - android

I would like to create some "dialogs" like those shown in Android 4.4 for example when you are first shown immersive mode. The little arrow is important for me because I would like to have the dialogin different places on the screen.
This is what I'm talking about:
Do I need to create a custom AlertDialog? How do I move it around, can I use the coordinates of a View? I don't really know where to start. Are there any examples on creating this type of thing? I am not interested in using the ShowcaseView library as in my opinion has the "old" holo look.

You can get the coordinate of views using getLocationOnScreen(), make sure to call this after the views have been inflated (so, not in onCreate() of your activity) or else you will be returned default int values (i.e. 0).
You should probably create your own DialogFragment. Incorporate your own custom layout which contains the little bubble and the button. A Quick and dirty sample for the onCreateDialog() would have the following
Dialog dialog = new Dialog(getActivity());
// Get rid of the annoying alert dialog title bar
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
// You must set the content view after requesting window features, not before.
dialog.setContentView(someView);
// Make the dialog full screen
dialog.getWindow().setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
//Dim the background
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.argb(80, 0, 0, 0));
To incorporate the little arrow, you can try having variations of 9-patch images as the background of the little bubble. Another alternative would be to have an arrowhead and a bubble put into the same container, and setting the margin/padding between them to 0. Since you have the coordinates you can adjust the horizontal margins of the arrowhead accordingly. This is actually a pretty cool idea, I think I'll try my own interpretation of it this weekend.
I have actually been working on my own interpretation of the showcase library, Here is what i achieved. Much of the dynamic position changing should be the same I would think

Related

Android Dialog curved edges

I have implemented a custom Dialog in android. The custom view contains curved edges but not the Dialog itself. I want this Dialog to get the shape of curved edges. How it can be done?
As you can see, the curved edges are not actually curve.
Any help or idea would be highly appreciated.
SOLUTION
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
Thanks everyone.
Happy coding.
I guess there are two possible reasons that make your custom view like this:
You forget set the dialog's background transparent first;
The custom background image's corner part is not set transparent.(you can set it transparent and save it with png format.)
A dialog is a small window that prompts the user to make a decision or
enter additional information. A dialog does not fill the screen and is
normally used for modal events that require users to take an action
before they can proceed.
You need to create a custom dialog in Android.
Create a custom dialog layout (XML file).
Attach the layout to Dialog.
Please check below Demo Links
Android Custom Dialog Tutorial
How to create custom Dialog Box in android ?

Android AlertDialog: How to hide the activity behind it?

I'm looking for a way to hide the underlying activity of an AlertDialog.
I tried to set a solid overlay color but it looks like there are no default methods for doing this. Is there a way to do this without creating a new activity with a solid background color that then fires the dialog?
I couldn't find anything other than doing it by firing a whole new activity on StackOverFlow, google, the android documentation and the AlertDialog API page but this seems like overkill.
Ideally I'm looking for something like alert.setOverlayColor(int color)
Create a custom layout for the Dialog with height and width as "match_parent". Use the area required by dialog and put a solid background in the top level.

Android - popup window or something else

I am currently developing an android app that displays a list view. When an item from the list view is selected I would like a small window to appear from the bottom of the screen. This window will not cover the entire list view, but take up a small portion of the bottom. On this window will be a few buttons and a progress bar.
My question is would the best way to achieve this be through a popupwindow or is there something else to better suit this?
Thank you for your help.
you could use a Dialog with a custom View (Android Custom Dialog example). Or you can forgo the concept of the pop-up and just "fake it" by adding your "pop-up" View into your normal layout but setting it as invisible. Then when you want to show it make it Visible and populate it with the appropriate data.
I think I understood what you meant. Do you use ActionBarSherkock? If yes, then there is a splitactionbar which is ususally located on the bottom of the screen, when the screen is small. It looks like this:
http://wptrafficanalyzer.in/blog/wp-content/uploads/2012/07/actionbar_menu_sherlock_splitactionbar.png
Is this what you meant? Let me please know.
Edit:
There is something called quick actions. This handels popups very well, but its not displayed on the bottom of the screen tough. But you might want to look at it:
http://londatiga.net/images/quickactions/quickcontact.jpg

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