I want to style the header of an Android dialog. Here is what a standard android dialog looks like
what I want is sth like this which I photoshopped (styled background of header and another text color for it).
I know that it is possible to pass the theme as a parameter to the Dialog()-Constructor. But I don't know how the xml-style elements would look like.
You should be able to use setCustomTitle(View) for this. I've never used it, but it should go something like this:
TextView title = new TextView(context);
title.setBackgroundColor(0xFFFF0000);
title.setTextColor(0xFFFFFFFF);
title.setLayoutParams(/* LayoutParams with MATCH_PARENT width and WRAP_CONTENT height */);
title.setPadding(/* Some padding values */);
yourDialogBuilder.setCustomTitle(title);
In terms of copying verbatim the layout of the existing Android dialog title, I'm not sure what the parameters of those values are. You may have to mess around and/or Google it to find them. (The font itself is obviously Roboto for 4.0+ and Droid for anything less.)
Its really simple...
All you have to do is to create an XML layout, for the pic you have uploaded and then just simply inflate the Dialog with the XML file you just created .....
I'll just give you a sample code, then you can easily follow
private View mView;
private Dialog mDialog;
private LayoutInflater mInflater;
Now create a function as :-
private void showCustomDialog() {
mInflater = (LayoutInflater) getBaseContext().getSystemService(
LAYOUT_INFLATER_SERVICE);
ContextThemeWrapper mTheme = new ContextThemeWrapper(this,
R.style.YOUR_STYE);
mView = mInflater.inflate(R.layout.YOUR_XML_LAYOUT_FILE, null);
// mDialog = new Dialog(this,0); // context, theme
mDialog = new Dialog(mTheme);
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
mDialog.setContentView(this.mView);
mDialog.show();
TextViiew someText = (TextView) mView.findViewById(R.id.textViewID);
// do some thing with the text view or any other view
}
Finally make sure you have the style as :-
<style name="YOUR_STYLE">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:windowContentOverlay">#android:color/transparent</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
That's it .... you are done... just call this function where ever you want to show the custom dialog....
Hope the explanation was useful....
Related
I am struggling with changing the TEXT color of AppCompat DialogFragments.
My App uses a DARK theme (Theme.AppCompat.NoActionBar), but for dialogs I want a LIGHT theme. I am using Build Tools, Support Library and compileSdkVersion to 25, shall it matters.
I am able to change everything else on the dialog (title, background, window background) but not the primary and accented text colors, that keep on using the (white) settings for the dark theme, resulting in white text over white background.
I've tried dozens of solutions in similar questions here in SO, like:
1) The easy one: On the styles.xml:
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="alertDialogTheme">#style/AppCompatAlertDialogStyle</item>
<item name="android:alertDialogTheme">#style/AppCompatAlertDialogStyle</item>
</style>
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- ignored !!!! -->
<item name="colorPrimary">#ff0000</item>
<!-- ignored !!!! -->
<item name="colorPrimaryDark">#ff0000</item>
<!-- ignored !!!! -->
<item name="colorAccent">#ff0000</item>
<!-- ignored !!!! -->
<item name="android:textColorPrimary">#F040FF</item>
<!-- ignored !!!! -->
<item name="android:textColor">#F040FF</item>
</style>
With this solution, the background and buttons style from AppCompat.Light.Dialog.Alert IS APPLIED, but not the text colors as you can see in the screenshot:
2) Manually specifying the style on the AlertDialog Creation:
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.AppCompatAlertDialogStyle);
LayoutInflater inflater = getActivity().getLayoutInflater();
View hostView = mHostView = inflater.inflate(layoutId, null);
Same problem. Light background, Light text.
3) Using a ContextWrapper:
ContextThemeWrapper ctw = new ContextThemeWrapper(getActivity(), R.style.AppCompatAlertDialogStyle);
AlertDialog.Builder builder = new AlertDialog.Builder(ctw);
Nothing :( Same thing happens
4) Manually specifying other exotic constants I came across the many posts here in SO, like
Theme_DeviceDefault_Light_Dialog_Alert
THEME_DEVICE_DEFAULT_LIGHT
This was just a desperate attempt, but anyways the text is not changed
5) Specifying the style in the fragment rather than on the dialog
Dialog_Meta newFragment = new Dialog_Meta();
newFragment.setStyle(DialogFragment.STYLE_NORMAL, R.style.AppCompatAlertDialogStyle);
newFragment.show(fragmentManager, TAG);
I used this solution time ago in a very old API version, can't remember what was the problem, but anyways, doesn't solve the present issue :(
Can anybody tell me what's going on?
The problem here is the custom View you're setting on the AlertDialog. Though you've set a certain theme for AlertDialogs in general, that View is being inflated with the Activity's theme, which doesn't have those overridden color attribute values.
There are several ways to solve this.
• Create a ContextThemeWrapper around the Activity's Context with the custom R.style, and obtain the LayoutInflater.from() that.
ContextThemeWrapper ctw = new ContextThemeWrapper(getActivity(), R.style.AppCompatAlertDialogStyle);
LayoutInflater inflater = LayoutInflater.from(getActivity());
View hostView = mHostView = inflater.inflate(layoutId, null);
...
• As discovered by the OP, rupps, the AlertDialog.Builder will already have the alertDialogTheme wrapped on the Context it's given, and its getContext() method will return the appropriate ContextThemeWrapper, which can be used for the Inflater.
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
LayoutInflater inflater = LayoutInflater.from(builder.getContext()); // THIS IS THE KEY
View hostView = mHostView = inflater.inflate(layoutId, null);
...
From Google's Documentation of AlertDialog.Builder's getContext() method:
/**
* Returns a {#link Context} with the appropriate theme for dialogs created by this
* Builder.
* Applications should use this Context for obtaining LayoutInflaters for inflating views
* that will be used in the resulting dialogs, as it will cause views to be inflated with
* the correct theme.
*
* #return A Context for built Dialogs.
*/
public Context getContext() {
...
• The theme can be set as the android:theme attribute on the root View of the Dialog's layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:theme="#style/AppCompatAlertDialogStyle">
...
• Rather than handling the inflation yourself, the layout's ID can be passed in the Builder's setView() call, and it will be inflated with the alertDialogTheme.
With this method, however, the View objects from the layout won't be available until the Dialog is shown. In a DialogFragment, this will be in the onStart() method.
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setView(R.layout.dialog);
return builder.create();
}
#Override
public void onStart() {
super.onStart();
final Dialog dialog = getDialog();
dialog.findViewById(R.id.dialog_button).setOnClickListener(...);
...
}
color/colorPrimary is some orange color I want header has it. But I succeded to change header text color which is easy . I would like to change color of header background. This is what I have so far:
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColorPrimary">#color/colorPrimary</item>
<item name="android:windowTitleBackgroundStyle">#style/dialog_title_style</item>
<item name="android:alertDialogStyle">#style/AlertDialog_Sphinx</item>
<item name="colorAccent">#color/colorPrimary</item>
</style>
<style name="dialog_title_style" >
<item name="android:background">#color/colorPrimary</item>
<item name="android:padding">100dp</item>
</style>
<style name="AlertDialog_Sphinx">
<item name="android:fullDark">#color/colorPrimary</item>
<item name="android:topDark">#color/colorPrimary</item>
<item name="android:centerDark">#color/colorPrimary</item>
<item name="android:bottomDark">#color/colorPrimary</item>
<item name="android:fullBright">#color/colorPrimary</item>
<item name="android:topBright">#color/colorPrimary</item>
<item name="android:centerBright">#color/colorPrimary</item>
<item name="android:bottomBright">#color/colorPrimary</item>
<item name="android:bottomMedium">#color/colorPrimary</item>
<item name="android:centerMedium">#color/colorPrimary</item>
</style>
public class MyDialogFragment extends DialogFragment {
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder=new AlertDialog.Builder(getActivity(), R.style.AppCompatAlertDialogStyle).setTitle("Naslov")
.setMessage("Poruka......................................................")
.setIcon(android.R.drawable.ic_menu_help)
.setPositiveButton("OK",null);
return builder.create();
}
}
I'm using support version of AlertDialog.(23.1.0) This way dialog look more like dialog on newer version of android(Material Design)
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0'
I want that header is of color/colorPrimary (orange) background.
In the latest API levels the alert dialog does not have a separate header. It has a single view and a divider which separates the header text and message. You can change the header text and message text colors and also the divider colour. Also, you can change the background of the entire alert dialog but not just the header section of it.
As a workaround what you can do is: Dont set header text but use an image with text in it followed by the message. This way the divider will vanish and the image will look like the header.
Basically a custom alert dialog.
Check this post to see how to add an image in alertdialogs.
You can create a custom view for the alert dialog.
LayoutInflater inflater = getLayoutInflater();
View dialoglayout = inflater.inflate(R.layout.dialog_layout, (ViewGroup) getCurrentFocus());
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setView(dialoglayout);
builder.show();
You can check out this material dialogs library here. It is very easy to use and also very customizable.
I'm trying to style all my dialog fragments to look the same in my app. The dialogs coming from my settings fragment are styled exactly the way I want it. For my custom dialog fragments, the style is similar but not exactly the same. For some reason the spinner, timepicker, datepicker, radiobuttons, and edittext widgets inside my custom dialog fragments don't pick up the same style. In fact, the widgets blend in with the white background and you can't see that they are there. What am I doing wrong?
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"/>
<style name="Theme.Base" parent="AppTheme">
<item name="colorPrimary">#color/PrimaryBackgroundColor</item>
<item name="colorPrimaryDark">#color/SecondaryBackgroundColor</item>
<item name="colorAccent">#color/ColorBackgroundAccent</item>
<item name="android:textColorPrimary">#color/PrimaryTextColor</item>
<item name="android:alertDialogTheme">#style/AppTheme.DialogStyle</item>
</style>
<style name="AppTheme.DialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColorPrimary">#color/PrimaryBackgroundColor</item>
<item name="colorAccent">#color/ColorBackgroundAccent</item>
</style>
I'm applying the theme to my custom dialog fragment like this:
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.AppTheme_DialogStyle);
My settings dialog looks like this (Exactly how I want it):
Settings Dialog Fragment
My custom dialog fragment looks like this:
Custom Dialog Fragment
As you can see, the radio button selected color red and you can't see the unselected radio button.
Finally got an answer!!!
It's an issue or bug with AppCompat 22+.
Check out link here
Apparently this was a bug with fragments and widgets weren't getting the material themed in a fragment. It seems they fixed this issue, but the issue still holds in a dialog fragment based on what I'm going through.
The problem comes when you use the inflater instance passed to Fragment#onCreateView(). The workaround for now is to instead used the LayoutInflater from getActivity().getLayoutInflater() according to google.
So I changed my code to:
View view = getActivity().getLayoutInflater().inflate(R.layout.dialog, null);
from:
View view = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.dialoge, null);
All my widgets are now themed. Thanks everyone. Hopes this helps someone else.
I believe you need to set the theme on the actual Dialog and not the Fragment
Use this constructor to create your AlertDialog:
AlertDialog.Builder(Context context, int theme)
ie
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), theme)
I think you need to add one more item in style of your dialog. android:textColorSecondary will show color of un selected checkbox.
in your style add it.
</style>
<style name="AppTheme.DialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColorPrimary">#color/PrimaryBackgroundColor</item>
<item name="colorAccent">#color/ColorBackgroundAccent</item>
<item name="android:textColorSecondary">#000000</item>
</style>
It will make un Checked checkbox or toggle button edge color black. you need to change #000000 to color your want to show.
See if this helps -
Android appcompat-v7:21.0.0 change material checkbox colors
In short, try setting android:textColorSecondary.
I am creating a custom DialogFragment that is displayed underneath the actionbar. So far everything works great. The layout parameters for dialog fragment are match_parent for width and wrap_content for height.
I have tried every solution including setting the layout parameters .width and by getting Display size and removing the themes. However no matter what there is a small amount of space on left, right and top side of the dialog that is invisible. I need to know how to remove this space so it actually matches the width of the screen and hopefully gets rid of the top padding as well.
I figured it out using custom dialog theme. windowIsFloating true will get rid of the background but will add some extra space underneath the background as a background. In which case you can use windowBackground #null to erase it.
<style name="CustomDialog" parent="#android:style/Theme.Holo.Light" >
<item name="android:windowBackground">#null</item>
<item name="android:windowIsFloating">true</item>
</style>
Usage:
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.CustomDialog);
Thank you to Raghunandan who gave me the link that includes all style attributes. It took me a while but I went through that file and found very interesting elements. Definitely have a look at the link posted below to explore theme styles.
https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/themes.xml
https://groups.google.com/forum/#!topic/android-developers/NDFo9pF8sHY
From Dianne Hackborn suggestion
Use non-dialog theme as android.R.style.Theme or android.R.style.Theme_Light.
Look # the themes
https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/themes.xml.
Check this link
http://developer.android.com/reference/android/app/DialogFragment.html
DialogFragment picker = MyDialogFragment.newInstance();
picker.setStyle( DialogFragment.STYLE_NORMAL, android.R.style.Theme );
picker.show(getFragmentManager(), "MyDialogFragment");
if you set this theme to your dialog it will always be fullscreen
<!-- DIALOG STYLE -->
<style name="You.Dialog" parent="android:Theme.Holo.Dialog" >
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsFloating">false</item>
</style>
to do so you can use this setStyle(int,int) method.
dialogFragment.setStyle( DialogFragment.STYLE_NORMAL, R.style.You_Dialog );
First you need to know that handling of full screen in Dialog fragment is different from the normal Dialog component, second you need to customize the Dialog fragment before the actual creation of the dialog # (OnCreateDialog), according to the answer of "user3244180" Full screen DialogFragment
#Override
public Dialog onCreateDialog(final Bundle savedInstanceState) {
// the content
final RelativeLayout root = new RelativeLayout(getActivity());
root.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
// creating the fullscreen dialog
final Dialog dialog = new Dialog(getActivity());
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(root);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
return dialog;
}
This worked for me with support for < API 11.
Create a style that is both full screen and has a transparent background:
<style name="TransparentDialog" parent="#android:style/Theme">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
</style>
Then your DialogFragment code:
public class MyDialog extends DialogFragment {
public static MyDialog newInstance() {
MyDialog dialog = new MyDialog();
dialog.setStyle(DialogFragment.STYLE_NO_FRAME, R.style.TransparentDialog);
return dialog;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.my_custom_layout, container, false);
return view;
}
}
Finally, just for clarity, the contents of my_custom_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.kabx"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/semi_transparent_grey" >
..........................
..Whatever You Want Here..
..........................
</RelativeLayout>
I met the issue before: there is always a padding while having set fullscreen. try this code in dialogFragment's onActivityCreated() method:
public void onActivityCreated(Bundle savedInstanceState)
{
Window window = getDialog().getWindow();
LayoutParams attributes = window.getAttributes();
//must setBackgroundDrawable(TRANSPARENT) in onActivityCreated()
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
if (needFullScreen)
{
window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
}
}
<style name="WideDialog" parent="Theme.AppCompat.Light.DialogWhenLarge">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowIsFloating">false</item>
</style>
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NORMAL, R.style.WideDialog);
}
DialogFragment (when not told explicitly), will use its inner styles that will wrap your custom layout in it (no fullscreen, etc.).
No need to create custom theme for this problem. Just use this method and set style and theme of your choosing:
/* theme is optional, I am using leanback... */
setStyle(STYLE_NORMAL, R.style.AppTheme_Leanback);
The following works perfectly for me. It lets me have a full-width dialog (fills the screen's width with no padding) but with wrap_content for height, and it retains all my other stylings that I do in my builder:
<style name="DialogTheme">
<item name="windowMinWidthMajor">100%</item>
<item name="windowMinWidthMinor">100%</item>
<item name="android:windowBackground">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:background">#ffffff</item>
</style>
Background is required or else it does a weird repeat thing, but just set this to the color you want your dialog background to be. WindowBackground and WindowIsFloating are required to make the size wrap correctly.
Add your theme to your builder like so:
builder = new AlertDialog.Builder(_context, R.style.DialogTheme);
and you're good to go!
I was getting huge side padding in the DialogFragment for Nexus 6p and Pixel.
Fixed that by defining custom style as follows:
<style name="Custom.Dialog" parent="android:Theme.DeviceDefault.Dialog.NoActionBar.MinWidth" >
<item name="android:windowBackground">#null</item>
<item name="android:windowIsFloating">true</item>
</style>
parent="android:Theme.DeviceDefault.Dialog.NoActionBar.MinWidth did the trick
For fullscreen dialog I have posted a answer
In this thread
Please check this is the most efficient and shortest way.
Hope this helps :)
I used to struggle with turning an activity's background to transparent. I would correctly set the layout background to #00000000 and I would correctly set getWindow().setBackgroundDrawable(new ColorDrawable(0)) in the onCreate method. However, with these two changes, I would always end up with a grayish-black container holding my layout. But then I found that I needed to edit the activity tag in the manifest to add android:theme="#android:style/Theme.Holo.Dialog". Voila! That was all.
But now I need to turn an AlertDialog's background to transparent. There are a number of suggestions out there, and I have tried quite a few. My latest configuration is provided below. But I always end up with the same problem I used to have the activities: the grayish-black container holding my layout. So now, my question is: how do I add android:theme="#android:style/Theme.Holo.Dialog" in the manifest file for my custom dialog?
Current code:
public void showMyDialog() {
ContextThemeWrapper ctw = new ContextThemeWrapper(this, R.style.CustomDialog);
AlertDialog.Builder builder = new AlertDialog.Builder(ctw);
LayoutInflater inflater = (LayoutInflater) ctw.getSystemService(LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.dialog_layout,
(ViewGroup) findViewById(R.id.pr_root));
builder.setView(view);
builder.show();
}
Style:
<style name="CustomDialog" parent="android:Theme.Holo.Dialog">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:alertDialogStyle">#style/CustomDialog</item>
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
Of course dialog_layout is a typical layout .xml file.
Use Dialog instead of AlertDialog.Builder and so use setContentView instead of setView.