I need to implement user popup dialogs, but they don't look like standard. I guess, there's a way of implementing custom popups by means of Android's functionality (custom dialogs), but is it possible to decorate them ?
Yet it might not be the best solution for this problem - should I try something else like hidden layouts ?
Thank you.
Yes you can change your Dialog box as you want.You can do this by creating a custom dialog box.
Step1. Create a style in String file in res
<style name="myQuitDialog" parent="android:Theme.Dialog">
<item name="android:gravity">center_horizontal</item>
</style>
Step2. Create the xml file in layouts
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_quit"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/image which u want to show"
>
</RelativeLayout>
Step3. Write code of custom dialog box in src
class Custom_Dialog extends Dialog {
protected Custom_Dialog(Context context, int theme) {
super(context, theme);
// TODO Auto-generated constructor stub
}
private void show_alert() {
final Custom_Dialog alertbox = new Custom_Dialog(this, R.style.myQuitDialog);
Window window = alertbox.getWindow();
window.setBackgroundDrawableResource(android.R.color.transparent);
window.requestFeature(window.FEATURE_NO_TITLE);
alertbox.show();
alertbox.setCancelable(true);
alertbox.setCanceledOnTouchOutside(true);
alertbox.dismiss();
}
}
Your question is not so clear to me because you dont specify weather you want to customize and use the alert dialog or pop up dialog.In android both are different.In android pop up dialog named quick actions.I am posting below a link that will give you brief idea about quick action and explain brilliantly how to implement it in ur app.So go for it.
http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
Related
I have a screenshot below of a random dark/black slightly downwards gradient line appearing above my dialog fragments.
These are build with a dialogfragment class that has been overridden, and an alertdialog builder is being used to construct them (happens with and without the title/buttons) inside the following method
public Dialog onCreateDialog(Bundle savedInstanceState)
Anyone had this happen to them before or have any ideas?
Ive tried to theme them differently, and the same happens with both API14 holo and holoeverywhere library. Ive tried to set the backgrounds to transparent ect... but havent achieved anything except making the dim go away.
You need to add your custom theme for your dialog and provide android:windowContentOverlay parameter.
<style name="MyDialogTheme">
<item name="android:windowContentOverlay">#null</item>
</style>
Then, in your DialogFragment in onCreate call:
setStyle(/* desired style */, R.style.MyDialogTheme);
The Weird Line appears because of the title bar. You just need to hide the title bar and it automatically hides the weird line:
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);
// request a window without the title
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
// make your dialog here
return dialog;
}
Try this,
private Dialog custom_dialog;
private Window window;
custom_dialog = new Dialog(context);
custom_dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
custom_dialog.setContentView(R.layout.share_dialog);
custom_dialog.setCancelable(true);
//Below code is used to remove wired black line
window = custom_dialog.getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
window.setLayout(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
window.setGravity(Gravity.CENTER);
window.setBackgroundDrawableResource(R.drawable.empty);
Found one way of getting around my problem.
So the deal was that the FrameLayout (with id: android:id/content) that the system makes itself had a foreground drawable on it (the shadow at the top of the frame). I couldnt for the life of me deal with it with styles or anything, nor could i figure out why it was happening on these two custom alert dialogs inside dialogfragments.
note: im using a HoloEverywhere fork thats compatible with v7 AppCompat, but keeping as many of the classes ect... from the actual support libraries.
I could however access the framelayout and remove the foreground drawable with this:
(note: it had to be in the onresume as i dont think there are any calls before that resulted in a "android.util.AndroidRuntimeException: requestFeature() must be called before adding content" error.
public void onResume() {
super.onResume();
((FrameLayout) getDialog().getWindow().getDecorView().findViewById(android.R.id.content)).setForeground(new ColorDrawable(android.graphics.Color.TRANSPARENT));
}
If theres a better safer way of doing this, or if anyone knows why this is happening, let me know.
The Android design documentation in http://developer.android.com/design/building-blocks/dialogs.html makes a clear differentiation between Dialogs, Alerts, Popups and Toasts. It also recommends the implementation of Dialogs by means of the DialogFragment class and Toasts by means of the Toast class. However it's not clear to me whether Popups should be implemented with PopupWindow or with DialogFragment.
I know that DialogFragments usually come with Ok/Cancel buttons and that the location of PopupWindows can be defined, but:
Are these slight differences the only arguments to use one or the other?
Is DialogFragment the successor of PopupWindow that will be deprecated at some point?
According to the answer in https://stackoverflow.com/a/15165554/2482894, PopupWindow is "Limited to a few templates", but I can't find any reference to a limited amount of templates in the class documentation.
So, finally, how would you implement Popups like these http://developer.android.com/design/media/dialogs_popups_example.png and why?
If you want dialog as shown in the link, just make them by making custom dialog as mentioned below:
Make a dialog object:
Dialog dialog = new Dialog(context,android.R.style.Theme_Translucent_NoTitleBar);
Set custom view to this dialog:
show_dialog(){
dialog.setContentView(R.layout.custom_dialog);//your custom dialog layout.
}
Your custom layout should be like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="#+id/custom_dialog_first_rl"
android:background="#android:color/black">
<!-- write code for rest of your UI here -->
</RelativeLayout>
Now set alpha for your first relative layout in show_dialog() like this:
show_dialog(){
dialog.setContentView(R.layout.custom_dialog);//your custom dialog layout.
RelativeLayout custom_dialog_first_rl=(RelativeLayout)dialog.findViewById(R.id.custom_dialog_first_rl);
custom_dialog_first_rl.getBackground().setAlpha(170);
}
Call show_dialog() where you wanna show this dialog
As soon as my app launches, an AsyncTask retrieves a JSON. While it's being downloaded, I show a progress dialog as usual:
protected void onPreExecute() {
Context c = ((EventoMainActivity)mCallback);
mDialog = new ProgressDialog(c, R.style.my_Dialog);
mDialog.setTitle("Descargando datos del evento ");
mDialog.setMessage("Espere un instante...");
mDialog.setIndeterminate(true);
mDialog.show();
}
As I want to customize the dialog, I pass my style with the constructor to change colors, etc, achieving the following result:
(Some styles come from inheritance from Widget.Sherlock.Light.ProgressBar)
So far so good. With the color text property I changed it to red, but that's all I managed to do. The problem is that I want to give style to the title text, to the message text, and that blue colored line.
My approach was looking for the structure of this elements in the android source (their layout xml files). I found out that the progressDialog comes from the alertDialog. And there I found the structure that defines the title parameter and the message parameter:
From alert_dialog.xml
...
<com.android.internal.widget.DialogTitle android:id="#+id/alertTitle"
style="?android:attr/textAppearanceLarge"
android:singleLine="true"
android:ellipsize="end"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
...
From progress_dialog.xml
...
<TextView android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
...
The problem is that android.R.id does not contain references to those IDs so I'm unable to reach this views in code with findByID and apply to them the style I wish.
I know how to do a custom layout but I wonder if there's some way to style the default components.
Thanks
You can use the wrapper, where you can set a theme (style) to anything in the current context. You can set R.style.MyTheme as style to the alert dialog and customize that view to your own taste.
ContextThemeWrapper ctw = new ContextThemeWrapper( this, R.style.MyTheme );
AlertDialog.Builder builder= new AlertDialog.Builder( ctw );
After researching for a while I think it's not possible. The default components are styled using ids not reachable from your app which makes it not doable unless you create your own custom component.
For most of my Android app's dialogs I use Builder's built-in methods, such as setSingleChoiceItems, but I need 2-3 dialogs that are custom AlertDialogs using my own views.
The custom dialogs look very different from the ready-made ones (text size, background etc).
How can I make my custom dialogs look like the Builder ones?
I have not specified any theme for any of the dialogs.
I created this one using an AlertDialog.Builder with the setSingleChoiceItems(...) method.
This one was created using builder.setView(layout).
You can use custom view with setView, but I recommend to use DialogFragment, in DialogFragment you can use any View and just View event handlers like onClickListener etc.
try out this
set custom theme in dialog to set background and no title of dialog as below
<style name="ActivityDialog" parent="#android:style/Theme.Dialog">
<item name="android:windowBackground">#drawable/dialog_background_image</item>
<item name="android:windowNoTitle">true</item>
</style>
and make a layout of UI
protected void createDialog() {
// TODO Auto-generated method stub
dialog = new Dialog(this,R.style.ActivityDialog);//this take context and style parameter
dialog.setContentView(R.layout.dialogUI); // here load coustom UI layout
Button okbtn = (Button)dialog.findViewById(R.id.button1);
Button cancelbtn = (Button)dialog.findViewById(R.id.rep_cancel_Button);
okbtn .setOnClickListener(okClickListener);
cancelbtn .setOnClickListener(cancelClickListener);
dialog.show();
}
I am wanting to create help overlays like the ones you see when ICS loads for the first time or in apps like ES File Explorer or Apex Launcher (there are more, but I can't think of them right now). Is this just a relative layout with one view sitting on top of the other? I haven't been able to find any sample code for doing such a thing. Anyone know how this is done or have any ideas?
Let's assume you ordinarily would call setContentView(R.layout.main), but on first run, you want to have this overlay.
Step #1: Create a FrameLayout in Java code and pass that to setContentView().
Step #2: Use LayoutInflater to inflate R.layout.main into the FrameLayout.
Step #3: Use LayoutInflater to inflate the overlay into the FrameLayout.
Step #4: When the user taps the button (or whatever) to dismiss the overlay, call removeView() to remove the overlay from the FrameLayout.
Since the overlay is a later child of the FrameLayout, it will float over top of the contents of R.layout.main.
"Coach mark" is "Help overlay" in UX talk :-)
coach_mark.xml is your coach mark layout
coach_mark_master_view is the id of the top most view (root) in coach_mark.xml
public void onCoachMark(){
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setContentView(R.layout.coach_mark);
dialog.setCanceledOnTouchOutside(true);
//for dismissing anywhere you touch
View masterView = dialog.findViewById(R.id.coach_mark_master_view);
masterView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
dialog.dismiss();
}
});
dialog.show();
}
Adding sample of coach_mark.xml (to this excellent solution given by Oded Breiner), so its easy for ppl to copy & paste to see working example quickly.
Sample of coach_mark.xml here, change the -> drawable/coach_marks to your image:
coach_mark.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/coach_mark_master_view">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/coach_marks_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:src="#drawable/coach_marks" />
</RelativeLayout>
</LinearLayout>
And optionally use this theme to remove padding:
<style name="WalkthroughTheme" parent="Theme.AppCompat">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
You can do that pretty quickly. You add, for exemple a LinearLayout where you put a picture with alpha which correspond to your help information and what do you want to draw like an overlay. In you xml of your activity you put this layout in a RelativeLayout after the layout of your activity with the Gone visibility. When you want to draw the help information, you just neeed to set this visibility to visible.
I hope, I'm clear, if you have any question,I'm be please to answer them.
See my another answer how programmatically show an overlay layout on top of the current activity. Activity's layout.xml does not need to know anything about the overlay skin. You can put overlay semi-transparent, cover only part of the screen, one or more textview and buttons on it...
How to overlay a button programmically?
create res/layout/paused.xml RelativeLayout template or use any layout toplevel
create a function to show overlay skin
key is to get handle to layout.xml, use LayoutInflater class to parse xml to view object, add overlay view to current layout structure
My example uses a timer to destroy overlay object by completely removing it from the view structure. This is probably what you want as well to get rid of it without a trace.
My goal was that main activities are not aware of any overlay skin, overlays come and go, many different overlays, still able to use overlay1.xml text files as a template, and content should programmatically be updated. I do pretty much what CommonsWare told us my post shows the actual program code to get started.
disclaimer: OPs "Thanks for your input. This is how I pictured it being done. I have to give credit to the answer below" comment does not mean my answer but CommonsWare answer. Stackoverflow have changed post orderings.