I always create custom dialog without title to make it centered (both vertical and horizontal) using android:windowNoTitle in styles.xml or requestWindowFeature(Window.FEATURE_NO_TITLE) but some of my dialogs are not center horizontal, for example this dialog:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="20dp"
android:gravity="center"
android:background="#drawable/dialog_bg" >
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="#layout/loading_s"/>
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:gravity="center_vertical"
android:text="#string/loading"
android:textColor="#color/dialog_text"
android:textSize="#dimen/dialog_title_text_size" />
</LinearLayout>
This is how to create dialog:
#Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
View v = LayoutInflater.from(getActivity()).inflate(R.layout.dlg_progress, null);
Dialog dlg = new Dialog(getActivity(), R.style.My_Dialog_Style); //My_Dialog_Style contains android:windowNoTitle = true
dlg.setContentView(v);
dlg.setCanceledOnTouchOutside(false);
dlg.setCancelable(true);
return dlg;
}
And here is how it appears on screen
If I remove android:windowNoTitle attribute this dialog show correctly so the problem only occurs when using dialog without title.
Does anyone know why this happen and how to make dialog always center on screen?
have you tried looking at this thread?
How to align custom dialog centre in android ?
android:layout_gravity="center"
It looks like its just a layout change, or try using relativeLayout or LinearLayout instead of FrameLayout
When you use Builder and set a custom view with setView, it should not be necessary to remove the Dialog's title and the dialog should be centered.
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
LayoutInflater inflater = getActivity().getLayoutInflater();
builder.setView(inflater.inflate(R.layout.dlg_progress, null));
return builder.create();
}
This is very similar to how it is done in the docs: Creating a Custom Layout
I believe you're running lower the dialog's minimum width attribute. It can be found as
<item type="dimen" name="dialog_min_width_major">65%</item>
in Android's framework. It varies depending on which values folder you're looking at, so it differs depending on density, orientation, etc.
You may be able to overwrite this value in your style. If you set it to something that is definitely smaller than your dialog(10%), it may work properly. If not, read on.
If you notice in your view tree panel, it shows your LinearLayout nested inside 3 FrameLayouts. My guess is that the deepest FrameLayout has its width set to wrap_content, so it's not filling the parent layout and is only as big as your LinearLayout. I can't be sure, though, because the dimensions are chopped off in your picture.
Why it changes when you remove the title? I don't know. You can hack it by adjusting the padding/layout params in onMeasure, but it seems like there should be a cleaner way to do it.
Still don't know why removing title make Dialog not centered horizontally but when I set min_width attr of LinearLayout = dialog minWidth this problem gone away.
Related
I'd like to put an indeterminate Progress Dialog material-compliant in my app. I found two ways to achieve it:
1- Using material-dialogs: https://github.com/afollestad/material-dialogs
2- Using the build-in dialogs of material-design-library: https://github.com/navasmdc/MaterialDesignLibrary#dialog
Using any of these solutions I get something pretty much like this: a dialog with a progressbar in it.
What I'd like to get is just the circular progress bar, without the surrounding light-grey view and without any text. A lot of apps proved us that the user knows that when something's spinning around he just needs to wait: there's no need to write it in letters. What I mean is pretty much something like this, but material.
I don't think this is such a strange question (or is it?) but I wasn't able to find any good answer online. Does anyone of you know how to achieve this?
Thank you
[Edit] I must say that in the gitHub issues of the material-dialogs library this seems to be discussed but the developer closes it fast by saying that it would mean not to follow the guidelines: https://github.com/afollestad/material-dialogs/issues/277
You can use this code,work fine in devices >= 19 (Kitkat)
progress = ProgressDialog.show(Splash.this, null, null, true);
progress.setContentView(R.layout.elemento_progress_splash);
progress.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
progress.show();
element progress splash.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#null"
>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/ColorTipografiaAdeudos"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Comprobando sus datos"
android:layout_below="#+id/progressBar1"
android:layout_centerHorizontal="true"
android:id="#+id/textView6"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#color/ColorFuente"
android:layout_gravity="center_horizontal" />
</RelativeLayout>
To sum up our combined with the author efforts:
The main objective was to get a dialog appearance effect (specifically background dimming) for the progress indicator of a type "material progress wheel" with the transparent background of the dialog itself.
How we've gone about it (one of the possible ways):
This library is used as the material progress wheel.
A separate layout file is created (e.g., progress_wheel.xml) containing the progress wheel layout <com.pnikosis.materialishprogress.ProgressWheel>.... If you find yourself in a situation when the wheel's dimensions do not change as per your layout settings, wrap it with a FrameLayout with wrap_content dimensions.
Inflate this layout with a layout inflater to get a view, e.g. dialogView.
Create the dialog:
Dialog progressDialog = new Dialog(context);
progressDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
progressDialog.setContentView(dialogView);
progressDialog.show();
Call this function on dialogView to make the dialog background transparent:
public static void clearParentsBackgrounds(View view) {
while (view != null) {
final ViewParent parent = view.getParent();
if (parent instanceof View) {
view = (View) parent;
view.setBackgroundResource(android.graphics.Color.TRANSPARENT);
} else {
view = null;
}
}
}
I'm learning Android and i'm trying to avoid this behavior on my app.
This is the result using setMessage on the dialog.
This is the result using setTittle on the dialog.
Is there a way to avoid that the text or the radioButtons gets cut when i change orientation to horizontal ?
I'm using the a custom layout (LinearLayout) with this Alert Dialog for displaying the radioButtons.
I'm also using onCreateDialog to create the Alert Dialog .
#Override
protected Dialog onCreateDialog(int id) {
Dialog createdDialog;
AlertDialog.Builder builder = new AlertDialog.Builder(this);
toDisplayInDialog = getLayoutInflater().inflate(R.layout.light_radiogroup, null);
builder.setTitle("Choose Startup Color:")
.setPositiveButton("Set Color",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
// Do things on Click
}
})
.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
})
.setView(toDisplayInDialog);
createdDialog = builder.create();
return createdDialog;
}
The basic problem -- as you'll have guessed -- is that there are too many controls to fit on the screen when in landscape. You need to add a ScrollView so that the user can scroll the UI.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Green"
android:checked="true" />
... etc.
</ScrollView>
Update
There are many ways to layout your widgets into two columns. Unfortunately there is no standard Layout that flows controls into multiple columns. However, below is a fixed way to display your five radio buttons.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Green" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Black" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Yellow" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Red" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="White" />
</LinearLayout>
</LinearLayout>
Below is a preview:
Note: You'll probably not want to use this layout when displaying in portrait, only in landscape. You can have both by adding the "layout-land" resource directory where you can add this layout, and use your regular layout in the normal "layout" resource directory. This way the system will choose the layout resource accordingly to if the device is portrait or landscape.
It's twice the work, but your UI will look better for it.
As the screen height is too small for the dialog, the dialog needs to reduce its height to fit its margins and its own padding. As the elements don't fit normally anymore, it needs to decrease their height too. But on TextView's, that does not include scaling, so what you get here is cropping of the title.
That's a completely common issue in Android front-end development - you make yourself a perfect design but face technical issues on certain sizes/densities.
You can try these (I recommend you apply all 3 points if necessary):
RadioButton circle crops when its size is reduced. BUT it has some built-in padding included. You can try changing the height of each RadioButton. You'll just need to make sure it results compatible with screens of all densities and sizes.
Alternatively, you can apply these 3 steps:
1) set layout_height of every RadioButton, RadioGroup and the title to "match_parent"
2) set layout_weight of every RadioButton, RadioGroup and the title to "1". Radio buttons will be equally distributed within the container, and container and title will be of same height.
3) increase layout_weight of the title as much as necessary.
Method above will reduce title size and increase the RadioGroup size while distributing RadioButton's evenly inside.
Judging by cropping not happening immediately above RadioGroup, that probably means you have padding_bottom on the title. You should remove/decrease padding_bottom from the dialog title. If you need the padding in vertical mode, you can create 2 different layouts like in this answer, or take care of that programmatically through onConfigurationChanged like described here (removing padding_bottom in horizontal mode, and recovering it in vertical).
As you're using your own layout for the dialog, it seems to me like layout_height of your title might be set to "match_parent" or "fill_parent". You could try replacing it with "wrap_content", although it would have a different undesirable effect.
I'm created a custom AlertDialog, but
it have a default black border. How can I hide it?
My layout
props - match_parent,
style - #android:style/Theme.Translucent.NoTitleBar.Fullscreen
UPD
#Override
protected Dialog onCreateDialog(int id) {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
LayoutInflater inflater = getLayoutInflater();
View dialoglayout = inflater.inflate(R.layout.dialog_layout, (ViewGroup) getCurrentFocus());
switch (id) {
case IDD_RESULT:
builder.setView(dialoglayout);
return builder.create();
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog_layout_root"
style="#android:style/Theme.Translucent.NoTitleBar.Fullscreen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_bg"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
The border is due to the fact that you might have set your custom layout (probably inflated) as the content view of the dialog.
I think AlertDialogs are composed by (at least) 3 layouts, one for the title, one for the content and one last for the buttons. So the little border you see might be the layout for the buttons.
I don't know how to make it disappear, anyway if you want custom dialogs without thoses borders, you can create a class that extends Activity, and use the #android:style/Theme.Dialog to make it look like a dialog. Then you can fully manage what your activity do/not shows.
What you are able to see is the default Style for any AlertDialog which normally varies from Device to Device. I tried a few times to change it, but I was not successful. So what I did is, I used the super Class Dialog and created my own AlertDialog.
Here is a link to my answer,
https://stackoverflow.com/a/11608468/603744
Since you are using your own layout, I believe that it will be of the same value.
I'm making a simple custom dialog for my android app, displaying only a seek bar. However, the complications of this simple task are driving me nuts.
My layout for the dialog is as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp">
<SeekBar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogVolumeSlider"
android:layout_width="225dp"
android:layout_height="wrap_content"/>
</LinearLayout>
The dialog is created in code:
Dialog d = new Dialog(this);
d.setContentView(R.layout.custom_dialog);
return d;
Instead of a simple box wrapping the seekbar, I get this phantom space coming from somewhere:
What's the issue here? I've tried modifying
d.getWindow().getAttributes().height
but this creates additional problems as well.
Thanks for any help!!
EDIT: Stranger things happen when I assigned a fixed "50dp" to my LinearLayout's layout_height:
By default a Dialog will leave space for a title even if you don't set one (with d.setTitle()) .
You can either set a title to fill the space or request that the Dialog not have a title.
Here is an example of how to request the no title setting.
Dialog d = new Dialog(this);
d.requestWindowFeature(Window.FEATURE_NO_TITLE);
d.setContentView(R.layout.custom_dialog);
With no title, your SeekBar will appear as you expect.
Try putting a fixed Height on your parent linear layout. Something like:
android:layout_height="50px"
Ok so I've read the Custom Dialog explanation on the And Dev website
http://developer.android.com/guide/topics/ui/dialogs.html#CustomDialog
It show's you how to make a custom dialog, but not how to customise the title!
Basically my title is too long and I want it to scroll (like textview) or better still have a 'marquee' effect i think it's called.
Or if I can't make it scroll, give it more space to wrap onto more lines!
Any ideas, I don't hold out much hope as it's not on android.dev :-(
You can make dialog title multiline:
TextView title = (TextView) dialog.findViewById(android.R.id.title);
title.setSingleLine(false);
Customizig window (and thus also dialog) titles can be done by requesting the window feature CUSTOM_TITLE, which must be done before setContentView.
So in your Dialog / Activity subclasses onCreate(), call the following:
super.onCreate(savedInstance);
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE); // <- insert this
Then, after your setContentView, do this:
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.custom_title); // <- insert this
The layout can generally contain anything you want.
For a marquee text control. e.g. do this:
layout/custom_title.xml:
<FrameLayout android:id="#+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView android:id="#+id/caption_text"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="This is a very very long text that will not fit into a caption regularly, so it will be displayed using marquee..."
android:lines="1"
android:focusable="true"
android:focusableInTouchMode="true"
android:scrollHorizontally="true"
android:marqueeRepeatLimit="marquee_forever"
android:ellipsize="marquee"
></TextView>
</FrameLayout>
Due to some constraints with the marquee feature, the text view has to be made focusable and it will only be scrolling when focused (which it initially should be).
I consider a combination of RuslanK's (for getting the TextView) Thorstenvv's (for making TextView scrollable) answer to be best practice.