hello, I have an alert dialog. the buttons are purple. yes I can change the color of the text inside using:
alertDialog.getButton(Dialog.BUTTON_NEGATIVE).
setTextColor(Color.parseColor("#000000"));
however when they are touched, there is a purple hue that forms.
I want the hue to be blue like the main accent of my app and the text to be black.
this is my alert style:
<style name="MyCustomAlert2" parent="Theme.MaterialComponents.Dialog.Alert">
<item name="colorAccent">#color/materialBlue</item>
<item name="android:textColorPrimary">#android:color/black</item>
<item name="android:windowBackground">#drawable/custom_alert2</item>
<item name="colorControlNormal">#android:color/black</item>
<item name="colorControlActivated">#color/materialBlue</item>
<item name="textColorAlertDialogListItem">#android:color/black</item>
</style>
note: none of the colors linked above are purple.
thanks for the help
Use new theandroidx.appcompat.app.AlertDialog and the Material components for android library.
Just use something like:
new MaterialAlertDialogBuilder(context)
.setTitle("...")
.setMessage("....")
.setPositiveButton("Ok", /* listener = */ null)
.setNegativeButton("Cancel", /* listener = */ null)
.show();
Then you can customize the style with something like:
<!-- Alert Dialog -->
<style name="MyThemeOverlay.MaterialComponents.MaterialAlertDialog" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/Widget.MaterialComponents.Button.TextButton.Dialog</item>
</style>
and here you can change each button:
<style name="PositiveButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#000000</item>
<item name="backgroundTint">#color/selector_bt</item>
</style>
You can set the style globally in your app theme using:
<item name="materialAlertDialogTheme">#style/MyThemeOverlay.MaterialComponents.MaterialAlertDialog</item>
or you can use the constructor:
new MaterialAlertDialogBuilder(context,
R.style.MyThemeOverlay_MaterialComponents_MaterialAlertDialog)
Related
I try to use widgets from Material Components only, but in many cases, it's not documented how styling can be achieved.
Let's consider MaterialAlertDialog.
Each time I want to show a dialog, I call such part of the code:
MaterialAlertDialogBuilder(context, R.style.Theme_MyApp_Dialog_Alert)
.setTitle("Title")
.setMessage("This is message.")
.setPositiveButton(R.string.ok) { _, _ -> }
.show()
As you can see, I'm using a custom theme.
<style name="Theme.MyApp.Dialog.Alert" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<!-- attributes here -->
</style>
The problem is that some of the attributes are not working. For example textColor. So the question is how to change the body or title text color in MaterialAlertDialog?
I use the newest version of Material Components - 1.1.0-alpha07.
PS.
I'm not sure which theme should be a parent. In Material Theme Builder they use #style/ThemeOverlay.MaterialComponents.Dialog.Alert which actually gives an "old" look of dialogs.
Change the style as below
<style name="Theme.MyApp.Dialog.Alert" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="materialAlertDialogTitleTextStyle">#style/MaterialAlertDialogText</item>
</style>
Create MaterialAlertDialogText style and set textColor
<style name="MaterialAlertDialogText" parent="#style/MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:textColor">#color/yourTextColor</item>
</style>
You can simply override the default colors using:
<style name="Theme.MyApp.Dialog.Alert" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<!-- Text Color for title and message -->
<item name="colorOnSurface">#color/....</item>
....
</style>
Otherwise you can customize the style used by the title and the body text using:
<style name="Theme.MyApp.Dialog.Alert" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<!-- Title -->
<item name="materialAlertDialogTitleTextStyle">#style/MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text</item>
<!-- Body -->
<item name="materialAlertDialogBodyTextStyle">#style/BodyTextAppearance.MaterialComponents.Body2</item>
</style>
<style name="MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text" parent="#style/MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:textColor">#color/...</item>
<item name="android:textAppearance">#style/....</item>
</style>
<style name="BodyTextAppearance.MaterialComponents.Body2" parent="#style/MaterialAlertDialog.MaterialComponents.Body.Text">
<item name="android:textColor">#color/....</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textAllCaps">true</item>
<item name="fontFamily">sans-serif-condensed-light</item>
</style>
I am having problems with the AlertDialog. The buttons doesn't use the accentColor to set the button text color any more.
I am using the newest support library, v24.2.1. I am styling my dialogs in my styles.xml the following way:
<style name="Base.Theme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:alertDialogTheme">#style/Widget.DialogStyle</item>
<item name="alertDialogTheme">#style/Widget.DialogStyle</item>
</style>
and the Widget.DialogStyle looks like this:
<style name="Widget.DialogStyle" parent="#style/Theme.AppCompat.Light.Dialog.Alert">
<item name="android:colorAccent" tools:targetApi="lollipop">#color/primaryColor</item>
<item name="colorAccent">#color/primaryColor</item>
<item name="android:textColorPrimary">#color/primaryText</item>
<item name="android:textColor">#color/primaryText</item>
<item name="android:background">#color/backgroundColor</item>
<item name="android:textAppearanceLarge">#color/primaryText</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
</style>
On app API's lower than 24 the dialog buttons are colored with the colorAccent but on API 24 this is no more the behaviour (the text is black, should be orange). See the following screenshot.
Is there anybody that knows how to get the accentColor back on the buttons?
Thank you.
For some AlertDialog implementations, the buttons are contained in a ButtonBar and take their style from buttonBarButtonStyle. So you have to override the settings you inherit from the parent theme (Theme.AppCompat.Light.Dialog.Alert).
Add the following item to Widget.DialogStyle:
<item name="buttonBarButtonStyle">#style/MyButtonStyle</item>
and add another style named MyButtonStyle like this:
<style name="MyButtonStyle" parent="Widget.AppCompat.Button.Borderless">
<!-- Set background drawable and text size of the buttons here
<item name="android:background">#color/my_dialog_dark</item>-->
<item name="android:textSize">18sp</item>
<!-- this is the button text color! -->
<item name="android:textColor">#color/primaryColor</item>
</style>
EDIT
Thanks to kirtan403 for pointing this out: you can also use another parent style for the buttons if Widget.AppCompat.Button.Borderless does not meet your requirements.
An example by nicola.v...#icapps.com using Widget.AppCompat.Button.ButtonBar.AlertDialog as parent style for the buttons can be found under the AOSP Issue 220699: colorAccent not applied to AlertDialog buttons on Android N.
Be sure you are importing the correct AlertDialog:
import android.support.v7.app.AlertDialog
Also try inflating the dialog with another AlertDialog.Builder constructor:
android.support.v7.app.AlertDialog.Builder#Builder(android.content.Context, int)
which means, the second parameter is the style of the dialog:
mDialog = new AlertDialog.Builder(context, R.style.Widget.DialogStyle).create();
EDIT:
Sharing the code, that I use to show alert Dialog:
public AlertDialog showSimpleDialog(Context context, String title, String message, String btnOk, DialogInterface.OnClickListener handler) {
if (mDialog != null && mDialog.isShowing()) {
mDialog.dismiss();
mDialog = null;
}
mDialog = new AlertDialog.Builder(context, R.style.AppTheme_Dialog).create();
mDialog.setTitle(title);
mDialog.setMessage(message);
mDialog.setButton(DialogInterface.BUTTON_POSITIVE, btnOk, handler);
mDialog.setCanceledOnTouchOutside(false);
mDialog.show();
return mDialog;
}
and the style:
<style name="AppTheme.Dialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/colorPrimary</item> //blue
<item name="android:textColorPrimary">#color/primary_text_material_light</item> //black
<item name="android:windowMinWidthMajor">97%</item>
<item name="android:windowMinWidthMinor">97%</item>
</style>
and the buttons are blue. Tested on emulator API 24.
I created a custom alertdialog. I used a half-transparent shape for background.
And its button is fully transparent in unfocused state.
The button is also customized by using a solid colored shape.
My problem is, there are white lines in two sides of the button where the default button originally located.
I tried to manipulate dividers by changing its color, width etc.
I tried:
android:showDividers="none"
But none of my operations worked.
So I am thinking these two lines may not be dividers.
But I can not find what are these and how to hide them.
Here is my java code:
AlertDialog.Builder alert = new AlertDialog.Builder(this, R.style.Theme_Organic_Dialog_Alert);
alert.setMessage(R.string.channel_warning_message);
alert.setNeutralButton(R.string.okay, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
//sthLikeDoNothing();
}
});
alert.show();
My theme:
<style name="Theme_Organic_Dialog_Alert">
<item name="android:windowBackground">#drawable/alert_dialog_bg</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:buttonBarButtonStyle">#style/Organic_Button_AlertDialog</item>
<item name="android:buttonBarStyle">#style/Organic_ButtonBar_AlertDialog</item>
<item name="android:alertDialogStyle">#style/AlertDialog_Organic</item>
<item name="android:textAppearanceMedium">#style/TextAppearance_Organic</item>
</style>
And my button styles:
<style name="Organic_ButtonBar_AlertDialog" parent="#android:style/Holo.ButtonBar.AlertDialog">
<item name="android:background">#android:color/transparent</item> <!-- ButtonBar background transparency -->
</style>
<style name="Organic_Button_AlertDialog" parent="#android:style/Holo.ButtonBar.AlertDialog"> <!-- Custom drawable button -->
<item name="android:background">#drawable/alert_dialog_button_selector</item>
<item name="android:textColor">#drawable/alert_dialog_button_txt_color_selector</item>
<item name="android:fontFamily">roboto-regular</item>
<item name="android:textSize">20sp</item>
</style>
These are the lines I want to hide:
I found what causes those divider lines. It was because I was setting Holo as the parent of my button styles.
Here,
<style name="Organic_ButtonBar_AlertDialog" parent="#android:style/Holo.ButtonBar.AlertDialog">
and here,
<style name="Organic_Button_AlertDialog" parent="#android:style/Holo.ButtonBar.AlertDialog">
Now I removed parents and the lines are gone.
I've added the appCompat material design to my app and it seems that the alert dialogs are not using my primary, primaryDark, or accent colors.
Here is my base style:
<style name="MaterialNavyTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/apptheme_color</item>
<item name="colorPrimaryDark">#color/apptheme_color_dark</item>
<item name="colorAccent">#color/apptheme_color</item>
<item name="android:textColorPrimary">#color/action_bar_gray</item>
</style>
Based on my understanding the dialogs button text should also use these colors. Am I wrong on my understanding or is there something more I need to do?
Solution:
The marked answer got me on the right track.
<style name="MaterialNavyTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/apptheme_color</item>
<item name="colorPrimaryDark">#color/apptheme_color_dark</item>
<item name="colorAccent">#color/apptheme_color</item>
<item name="android:actionModeBackground">#color/apptheme_color_dark</item>
<item name="android:textColorPrimary">#color/action_bar_gray</item>
<item name="sdlDialogStyle">#style/DialogStyleLight</item>
<item name="android:seekBarStyle">#style/SeekBarNavyTheme</item>
</style>
<style name="StyledDialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/apptheme_color</item>
<item name="colorPrimaryDark">#color/apptheme_color_dark</item>
<item name="colorAccent">#color/apptheme_color</item>
</style>
UPDATED ON Aug 2019 WITH The Material components for android library:
With the new Material components for Android library you can use the new com.google.android.material.dialog.MaterialAlertDialogBuilder class, which extends from the existing androidx.appcompat.AlertDialog.Builder class and provides support for the latest Material Design specifications.
Just use something like this:
new MaterialAlertDialogBuilder(context)
.setTitle("Dialog")
.setMessage("Lorem ipsum dolor ....")
.setPositiveButton("Ok", /* listener = */ null)
.setNegativeButton("Cancel", /* listener = */ null)
.show();
You can customize the colors extending the ThemeOverlay.MaterialComponents.MaterialAlertDialog style:
<style name="CustomMaterialDialog" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<!-- Background Color-->
<item name="android:background">#006db3</item>
<!-- Text Color for title and message -->
<item name="colorOnSurface">#color/secondaryColor</item>
<!-- Text Color for buttons -->
<item name="colorPrimary">#color/white</item>
....
</style>
To apply your custom style just use the constructor:
new MaterialAlertDialogBuilder(context, R.style.CustomMaterialDialog)
To customize the buttons, the title and the body text check this post for more details.
You can also change globally the style in your app theme:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="materialAlertDialogTheme">#style/CustomMaterialDialog</item>
</style>
WITH SUPPORT LIBRARY and APPCOMPAT THEME:
With the new AppCompat v22.1 you can use the new android.support.v7.app.AlertDialog.
Just use a code like this:
import android.support.v7.app.AlertDialog
AlertDialog.Builder builder =
new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
builder.setTitle("Dialog");
builder.setMessage("Lorem ipsum dolor ....");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();
And use a style like this:
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#FFCC00</item>
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:background">#5fa3d0</item>
</style>
Otherwise you can define in your current theme:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- your style -->
<item name="alertDialogTheme">#style/AppCompatAlertDialogStyle</item>
</style>
and then in your code:
import android.support.v7.app.AlertDialog
AlertDialog.Builder builder =
new AlertDialog.Builder(this);
Here the AlertDialog on Kitkat:
when initializing dialog builder, pass second parameter as the theme. It will automatically show material design with API level 21.
AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
or,
AlertDialog.Builder builder = new AlertDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
AppCompat doesn't do that for dialogs (not yet at least)
EDIT: it does now. make sure to use android.support.v7.app.AlertDialog
Material Design styling alert dialogs: Custom Font, Button, Color & shape,..
MaterialAlertDialogBuilder(requireContext(),
R.style.MyAlertDialogTheme
)
.setIcon(R.drawable.ic_dialogs_24px)
.setTitle("Feedback")
//.setView(R.layout.edit_text)
.setMessage("Do you have any additional comments?")
.setPositiveButton("Send") { dialog, _ ->
val input =
(dialog as AlertDialog).findViewById<TextView>(
android.R.id.text1
)
Toast.makeText(context, input!!.text, Toast.LENGTH_LONG).show()
}
.setNegativeButton("Cancel") { _, _ ->
Toast.makeText(requireContext(), "Clicked cancel", Toast.LENGTH_SHORT).show()
}
.show()
Style:
<style name="MyAlertDialogTheme" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
<item name="android:textAppearanceSmall">#style/MyTextAppearance</item>
<item name="android:textAppearanceMedium">#style/MyTextAppearance</item>
<item name="android:textAppearanceLarge">#style/MyTextAppearance</item>
<item name="buttonBarPositiveButtonStyle">#style/Alert.Button.Positive</item>
<item name="buttonBarNegativeButtonStyle">#style/Alert.Button.Neutral</item>
<item name="buttonBarNeutralButtonStyle">#style/Alert.Button.Neutral</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded
</item>
</style>
<style name="MyTextAppearance" parent="TextAppearance.AppCompat">
<item name="android:fontFamily">#font/rosarivo</item>
</style>
<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
<!-- <item name="backgroundTint">#color/colorPrimaryDark</item>-->
<item name="backgroundTint">#android:color/transparent</item>
<item name="rippleColor">#color/colorAccent</item>
<item name="android:textColor">#color/colorPrimary</item>
<!-- <item name="android:textColor">#android:color/white</item>-->
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
<item name="backgroundTint">#android:color/transparent</item>
<item name="rippleColor">#color/colorAccent</item>
<item name="android:textColor">#color/colorPrimary</item>
<!--<item name="android:textColor">#android:color/darker_gray</item>-->
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
Output:
You could use
Material Design Library
Material Design Library made for pretty alert dialogs, buttons, and other things like snack bars. Currently it's heavily developed.
Guide, code, example - https://github.com/navasmdc/MaterialDesignLibrary
Guide how to add library to Android Studio 1.0 - How do I import material design library to Android Studio?
.
Happy coding ;)
You can consider this project:
https://github.com/fengdai/AlertDialogPro
It can provide you material theme alert dialogs almost the same as lollipop's. Compatible with Android 2.1.
For some reason the android:textColor only seems to update the title color.
You can change the message text color by using a
SpannableString.AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.MyDialogTheme));
AlertDialog dialog = builder.create();
Spannable wordtoSpan = new SpannableString("I know just how to whisper, And I know just how to cry,I know just where to find the answers");
wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 15, 30, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
dialog.setMessage(wordtoSpan);
dialog.show();
Try this library:
https://github.com/avast/android-styled-dialogs
It's based on DialogFragments instead of AlertDialogs (like the one from #afollestad). The main advantage: Dialogs don't dismiss after rotation and callbacks still work.
Is there a way I can change all the alert dialogs appearing in my Android application? I want to change the dialogs that are system generated as well (like the Edit Text dialog that opens up when you long tap on any EditText). I want to change the title font color and size of all the dialogs in my app.
Is there a way to do it?
I have tried setting android:alertDialogTheme in my theme. But it seems to be not working. Code following -
<style name="Theme.DLight" parent="android:Theme.Light.NoTitleBar">
<item name="android:alertDialogTheme">#style/DialogStyle</item>
</style>
and
<style name="DialogStyle" parent="android:Theme" >
<item name="android:windowBackground">#drawable/background_holo_light</item>
<item name="android:textColor">#014076</item>
</style>
EDIT
I'm not invoking a dialog from my code. It's just the default dialog
that appears when you long click on any EditText. Generally it
contains the keyboard options like Select word, Select all, Input
method etc.
In you dialog theme, the attribute you need to modify windowTitleStyle. There, reference a style for your title and define a text appearance for this title. For example, to display your title red and bold:
<style name="AppTheme" parent="#android:style/Theme.Holo">
...
<item name="alertDialogTheme">#style/AppTheme.AlertDialog</item>
</style>
<style name="DialogStyle" parent="#style/Theme.Holo.Dialog.Alert">
...
<item name="android:windowTitleStyle">#style/DialogWindowTitle_Custom</item>
</style>
<style name="DialogWindowTitle_Custom" parent="#style/DialogWindowTitle_Holo">
<item name="android:maxLines">1</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:textAppearance">#style/TextAppearance_DialogWindowTitle</item>
</style>
<style name="TextAppearance_DialogWindowTitle" parent="#android:style/TextAppearance.Holo.DialogWindowTitle">
<item name="android:textColor">#android:color/holo_red_light</item>
<item name="android:textStyle">bold</item>
</style>
If you want to style a little bit more your AlertDialog, I wrote a blog post detailing the steps.
In styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
//All your other styles and add the one mntioned below.
<item name="alertDialogTheme">#style/AlertDialogStyle</item>
</style>
In the styles of AlertDialog add:
<style name="AlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/primary_text</item>
<item name="android:editTextColor">#color/primary_text</item>
<item name="android:background">#color/white</item>
<item name="android:windowTitleStyle">#style/TextAppearance.AppCompat.Title</item>
</style>
windowTitleStyle is important to add as it will give your title that effect that you need.
Now simply use this Theme in your AlertDialog in any activity that you want like below:
AlertDialog.Builder dialog = new AlertDialog.Builder(this, R.style.AlertDialogStyle);